react项目建立导入包问题总结
2019-07-31 17:38
2061 查看
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
问题:在 React 的使用中,如果我们需要用到路由,那么 react-router 和react-router-dom 是不是两个都要引用呢?非也,坑就在这里。他们两个只要引用一个就行了,不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了,具体react-router-dom使用方法见Router使用方法详解
相关文章推荐
- Eclipse导入外部项目问题总结1
- Android Studio 之 导入Eclipse项目常见问题及解决方案 在将Eclipse做的Android项目成功导入Android Studio 后,启动生成,遇到一些问题,现总结如下:
- Myeclipse学习总结(10)——MyEclipse2014导入项目时The project was not built since its build问题
- Eclipse导入外部项目问题总结1
- Eclipse导入外部项目问题总结
- Android Studio 导入Eclipse建立的android项目问题
- Eclipse导入外部项目问题总结1
- Android Studio导入项目出现问题总结
- 新导入其他机器Maven项目会出现的问题总结
- Eclipse导入外部项目问题总结
- JavaWeb项目的创建以及导入Web项目时的问题总结
- Maven导入建立父子项目时的问题
- Android项目导入Eclipse遇到问题个人总结
- Eclipse导入外部项目问题总结 Target runtime com.genuitec.runtime.generic.jee6 is not defined
- 从eclipse导出,Android Studio导入项目过程出现的各种问题总结
- 项目问题总结3:MyEclipse导入项目报错-"The import javax.servlet cannot be resolved"
- 使用phonegap建立安卓webapp项目及其问题总结
- 关于Eclipse导入同名maven项目的问题总结
- IDEA导入Eclipse项目问题总结
- 建立maven模块化项目遇到的问题总结