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

问题:在 React 的使用中,如果我们需要用到路由,那么 react-router 和react-router-dom 是不是两个都要引用呢?
非也,坑就在这里。他们两个只要引用一个就行了,不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了,具体react-router-dom使用方法见Router使用方法详解

原文地址:https://www.cnblogs.com/liutianzeng/p/11277922.html

时间: 2024-08-15 04:28:58

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

如何利用go modules 在 项目中 导入包

go modules 是go1.11 推出的官方的依赖管理,废话不多说直接开始 set GO111MODULE=on set GOPROXY=https://goproxy.cn 我的关于go module 的环境变量设置 踩坑:因为我是初学者,go module 并不熟悉,就开始跟着老师后面学 爬虫项目需要利用到 包 golang.org/x/text 老师使用的是 gopm -g -u golang.org/x/text gopm这个软件我并没有,一个用来进行包管理的软件,手动安装失败显示软

Android 导入v7包常见错误,以及项目引用v7包错误解决,androidv7

Android 导入v7包常见错误,以及项目引用v7包错误解决,androidv7 android下v4    v7   v21等包是android系统的扩展支持包,就想windows的系统补丁一个道理. android的扩展包主要是用来兼容低版本的,比如android3.0以后出现了actionbar,如果要使用actionbar,那么手机系统必须在3.0以上才能使用,这样将会导致很多用户不能安装apk从而损失用户:(有人会想,为什么不直接将新出来的东西全部打包到sdk中而是提供各种支持包?我

从零开始搭建一个react项目

如果只是想试试 React,那么建议使用 create-react-app来创建一个react项目.快速开始 因为 create-react-app 和 vue-cli 不一样,create-react-app将webpack的相关配置直接封装好了,所以自定制化程度不高,所以考虑手动构建一个 React项目 代码下载 准备工作 安装node环境. 配置cnpm(看个人需求). 准备一个空的文件夹react-demo. 初始化工程 从这里开始新建一个react工程 1. 初始化工程目录 1 cd

【学习】reactjs(一)——使用npm创建react项目并整合elementUI

在实习的过程中了解了react,所以打算使用react搭建一个属于自己的页面,如有问题请教正,谢谢. Github:https://github.com/yclxt/react-elementUI 工具: 使用工具:nodejs:Jetbrains WebStorm nodejs的安装和配置环境变量这里就不写了. 创建过程: 命令行安装全局create-react-app脚手架工具:npm install -g create-react-app 定位到工作目录下,创建项目:create-reac

如何从0创建一个react项目

1. 确保本机电脑安装了yarn和node: 2. 在需要安装的文件夹目录下输入:create-react-app  +(项目名称): PS:上图使用的软件为webStorm 3. 此时一个简单的react项目就已经创建好了, react 项目目录下的文件的意思: ①. public: 文件夹中是 index.html存放目录,也就是React根页面的所在地 ②. src: 用于存放js文件,也就是项目开发中的主要区域 ③. package.json: 用于记录项目信息,以及外部依赖包的导入信息

webpack搭建react项目

遥看套路挖掘机,不见当年老司机.this is a boilerplate 1.新建一个项目目录文件夹,暂且叫seed cd seed npm init 然后一直回车,最后yes,最终生成一个package.json文件 2.新建以下 src  文件夹用于存放js,css,img等源码和引用的静态文件 .babelrc babel编译器配置文件 favicon.ico   浏览器默认读取的一个icon index.html  入口首页 webpack.config.js  webpack配置文件

项目结构、包、编译为exe!

一个java源文件里至多有一个public类,该类的名称必须与源文件名称称同样.也能够没有public类.文件名称与随意一个类名一致就可以. 包 类似于cpp的namespace,是对类的再封装,防止命名冲突. java包的命名规则所有使用小写字母. 定义包: package likeyichu.com; 导入包中的类: import likeyichu.com.cc;   //(必须详细到类.不能仅仅导入包) 演示样例: 在定义包的时候.实际上就指定了你的源文件的存放位置.如包名为"com.l

在项目中导入import javax.servlet 出错解决办法

我们有时会把别人的项目copy到自己这里进行二次开发或者参考学习,有的时候会发生下图的错误,即eclipse项目里我们导入的项目里提示HttpServletRequest 不能引用,会伴随头疼的小红叉出现 具体原因是我们工程里面web-inf/lib目录下少了相应的包:Package javax.servlet.http引起的:通俗且确切的讲就是缺少TOMCAT_HOME\lib下的servlet-api.jar.在别人的机器上他配置了Server,一般都是tomcat,而在拷贝的过程中Serv

java项目打jar包

java项目打jar包分为2种情况: 一.java项目没有导入第三方jar包 这时候打包就比较简单: 1. 首先在Eclipse中打开项目, 右键点击项目,选择“Export”:2. 选择Java/JAR file,Next:3. Select the resources to export中可以选择你想要包含的项目文件夹,一些不必要的文件夹就无需放进去了,免得增大空间:这里有几个选项:    * Export generated class files and resources 表示只导出生