react项目建立导入包问题总结
1.react和react-dom包
使用react开发网页的话,我们难免会下载两个包,一个是react,一个是react-dom,其中react是react的核心代码。react的核心思想是虚拟Dom,其实虚拟Dom改变没有那么复杂,简单而言就是一个js的对象来表达一个dom包含的东西,例如如下代码:
var element={
"tagName": "div",
"attrs": {
"styles": {
"fontSize": "20px"
}
},
"children": [
{
"tagName": "span",
"children": ["hello,world"]
}
]
}
就表达了一个div标签里面有一个span标签,标签里面是个文本节点,文字内容就是’hello,world‘,如果整个对象都自己去写未免也太麻烦了,所以react包弄了一个生成虚拟dom的函数react.createElement,以及Component这个类来帮助我们表示虚拟DOM,我们自己写创建组件的类时需要继承这个类,关于创建组件的方式请参考React创建组件的三种方式。主要是继承一些react的高级方法,而包react-dom的核心功能就是把这些虚拟Dom渲染到文档中变成实际dom,当然了除了渲染这个功能之外还有一些其他的方法,这里就不多说了。
2.babel-core和babel-loader包
因为我们要把JSX语法浏览器不认识,所以我们需要借助babel-core和babel-loader包来帮我们将JSX语法编译成JS语法,其中babel-core提供转义的API,而babel-loader则是webpack用来调用babel-core的API完成转义的工具。
重点来了:babel-core和babel-loader一定要对应安装,否则webpack打包时会报错,例如:
babel-core版本 | 是否兼容 | 对应babel-loader版本 |
6.0 | 是 | 7.0 |
7.0 | 是 | 8.0 |
6.0 | 否 | 8.0 |
3.react-router和react-router-dom
非也,坑就在这里。他们两个只要引用一个就行了,不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了,具体react-router-dom使用方法见Router使用方法详解
react项目建立导入包问题总结的更多相关文章
- hibernate课程 初探单表映射1-6 hibernate项目建立以及导入jar包
hibernate 项目建立 1 new ==>java project hibernate 导入jar包 1 windows==>prerence==>java ==>bui ...
- 基于Abp React前端的项目建立与运行——React框架分析
基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 ...
- Go 导入当前项目下的包
其实和其他语言很类似 import ( "../controllers" //这里就是导入上一级目录中的controllers "./models&quo ...
- springMVC项目创建及导入包项
springMVC项目创建及导入包项 - zhangzhetaojj的博客 - CSDN博客https://blog.csdn.net/zhangzhetaojj/article/details/50 ...
- Gradle | Gradle项目无法导入依赖包
Gradle | Gradle项目无法导入依赖包 背景 今天使用idea导入一个Gradle项目,使用 gradle build构建成功,但是项目还是无法正常导入依赖包,显示错误如下: 解决方案 后来 ...
- 2022最新版超详细的Maven下载配置教程、IDEA中集成maven(包含图解过程)、以及导入项目时jar包下载不成功的问题解决
文章目录 1.maven下载 2.maven环境变量的配置 3.查看maven是否配置成功 4.配置文件的修改 5.IDEA集成maven 6.导入项目时jar包下载不成功的问题解决 maven教程: ...
- eclipse自身导致的项目问题:上边提示需要移除无用包,下边类提示需要导入包。
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...
随机推荐
- 纯异步nodejs文件夹(目录)复制
思路: 1.callback 驱动 2.递归所有需要复制文件 3.在一定阀值下并发复制文件 4.运行需要安装 async.js npm install async 代码如下: var asyn ...
- Spring注解之-自定义注解
1.自定义注解,先自定义三个水果属性的注解 元注解: java.lang.annotation提供了四种元注解,专门注解其他的注解(在自定义注解的时候,需要使用到元注解): @Documented ...
- CSS中浮动的使用
CSS有两个性质 第一个是 :继承性 第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁 { 里面分两种情况: 分别是 选中和没选中. 1.选不中的情况下,走继承性,(font,color,t ...
- POJ 3155:Hard Life(最大密度子图)
题目链接 题意 给出n个人,和m对有冲突的人.要裁掉一些人,使得冲突率最高,冲突率为存在的冲突数/人数. 思路 题意可以转化为,求出一些边,使得|E|/|V|最大,这种分数规划叫做最大密度子图. 学习 ...
- XAML与C#与WPF三者到底有什么关系?
XAML是.NET体系开发程序或者网页时前台编程的一种布局方式或者说开发语言,可以比较自由的用标签的方式进行布局,借鉴了HTML和XML等语言的风格,并且加入了一些动画等的实现.C#则是后台逻辑开发用 ...
- kuangbin专题 专题一 简单搜索 Pots POJ - 3414
题目链接:https://vjudge.net/problem/POJ-3414 题意:给你两个杯子,分别容量为A(1),B(2)和一个C,C是需要经过下列操作,得到的一个升数.(1) FILL(i) ...
- C语言学习书籍推荐《C和指针 Pointers On C》下载
<C和指针 POINTERS ON C>提供与C语言编程相关的全面资源和深入讨论.本书通过对指针的基础知识和高 级特性的探讨,帮助程序员把指针的强大功能融入到自己的程序中去. 全书共18 ...
- 使用Gitlab-CI 实现NetCore项目Docker化并部署到阿里云K8S
使用Gitlab-CI 实现NetCore项目Docker化并部署到阿里云K8S 先行条件: 1.了解NetCore项目基础命令,如dotnet publish 等几个常用命令. 2.了解Dock ...
- 2019-2020年值得关注的9个AR发展趋势
作者Andrew Makarov,由计算机视觉life编辑:乔媛媛编译 更好的阅读体验请看首发原文链接 2019-2020年值得关注的9个AR发展趋势 增强现实技术在2019年实现了创纪录的发展.微软 ...
- MySQL 8.0 information_schema系统库的改进
目录 information_schema有何用? mysql8.0 之前的查询方式 mysql8.0 开始的查询方式 测试5.7和8.0不同版本访问I_S库的性能 结论 information_sc ...