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使用方法详解

react项目建立导入包问题总结的更多相关文章

  1. hibernate课程 初探单表映射1-6 hibernate项目建立以及导入jar包

    hibernate 项目建立 1 new ==>java project hibernate 导入jar包 1 windows==>prerence==>java ==>bui ...

  2. 基于Abp React前端的项目建立与运行——React框架分析

    基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 ...

  3. Go 导入当前项目下的包

    其实和其他语言很类似 import (     "../controllers" //这里就是导入上一级目录中的controllers     "./models&quo ...

  4. springMVC项目创建及导入包项

    springMVC项目创建及导入包项 - zhangzhetaojj的博客 - CSDN博客https://blog.csdn.net/zhangzhetaojj/article/details/50 ...

  5. Gradle | Gradle项目无法导入依赖包

    Gradle | Gradle项目无法导入依赖包 背景 今天使用idea导入一个Gradle项目,使用 gradle build构建成功,但是项目还是无法正常导入依赖包,显示错误如下: 解决方案 后来 ...

  6. 2022最新版超详细的Maven下载配置教程、IDEA中集成maven(包含图解过程)、以及导入项目时jar包下载不成功的问题解决

    文章目录 1.maven下载 2.maven环境变量的配置 3.查看maven是否配置成功 4.配置文件的修改 5.IDEA集成maven 6.导入项目时jar包下载不成功的问题解决 maven教程: ...

  7. eclipse自身导致的项目问题:上边提示需要移除无用包,下边类提示需要导入包。

  8. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  9. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

随机推荐

  1. 附006.Kubernetes RBAC授权

    一 RBAC 1.1 RBAC授权 基于角色的访问控制(RBAC)是一种基于个人用户的角色来管理对计算机或网络资源的访问的方法. RBAC使用rbac.authorization.k8s.io API ...

  2. devexpress 给GridView添加行号

    先找到 此时间gridView1_CustomDrawRowIndicator private void gridView1_CustomDrawRowIndicator(object sender, ...

  3. 如何在虚拟环境里运行spyder?如解决import tensorflow as tf 出现importError:no module named 'tensorflow'

    问题描述:我们安装tensorflow时,通过activate tensorflow把tensorflow安装在虚拟环境里了,当我们在spyder里想要使用tensorflow时,就会发现如下图所以情 ...

  4. Hive 学习之路(八)—— Hive 数据查询详解

    一.数据准备 为了演示查询操作,这里需要预先创建三张表,并加载测试数据. 数据文件emp.txt和dept.txt可以从本仓库的resources目录下载. 1.1 员工表 -- 建表语句 CREAT ...

  5. 【设计模式】结构型03外观模式(Facade Pattern)

    [设计模式]结构型02装饰模式(Decorator Pattern) 意图:为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 主要解决:降低访问 ...

  6. 使用redis PSUBSCRIBE实现实时任务

    PSUBSCRIBE可以监听键的过期事件 1.进行数据库的配置 notify-keyspace-events Ex 2.使用命令监听事件 psubscribe  __keyevnet@0__:expi ...

  7. Null作为参数的时候,Java编译器如何调用函数?

    public class TestNull { public void method(Object o){ System.out.println("Object Version") ...

  8. 2. 2.1查找命令——linux基础增强,Linux命令学习

    2.1.查找命令 grep命令 grep 命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并 把匹配的行打印出来. 格式: grep [option] pattern [file] 可使用 ...

  9. 前端笔记之React(四)生命周期&Virtual DOM和Diff算法&日历组件开发

    一.React生命周期 一个组件从出生到消亡,在各个阶段React提供给我们调用的接口,就是生命周期. 生命周期这个东西,必须有项目,才知道他们干嘛的. 1.1 Mouting阶段[装载过程] 这个阶 ...

  10. S7-1200 的运动控制

    S7-1200 CPU本体集成点硬件输出点最高频率为100kHz,信号板上硬件集成点输出的最高频率为20kHz,CPU在使用PTO功能时将把集成点Qa.o,Qa.2或信号板的Q4.0作为脉冲输出点,Q ...