人生必须的知识就是引人向光明方面的明灯。这篇文章主要讲述React 学习 ---- create-react-app相关的知识,希望能为你提供帮助。
现在react
基础知识已经算是学完了,知道了React是做什么的,以及怎么使用,是时候学习一个webpack, babel
等现代化前端开发了,真正做项目的时候,我们不可能再使用babel
的线上编译,一是很慢,二是我们写代码没有提示,因为我们在script标签中加入了type= ‘text/babel‘,
影响开发效率。如果实在不学也没有关系,react的提供了create-react-app脚手架工具,
和vue-cli
一样,它帮你配置好了webpack/babel
等,我们直接书写代码就可以了。
打开命令行,全局安装npm install create-react-app -g
然后创建项目时,用create-react-app
项目名就可以了。
当我们使用create-react-app来创建应用时,发现它非常慢,上网搜了一下,看能不能能快一点? 网上提供了以下说法,可以试一下。
因为create-react-app是从npm 官网下载依赖,而我们平时使用cnpm 来安装依赖,它比较快,是因为从淘宝镜像来安装依赖,我们能不能也让create-react-app从淘宝镜像下载依赖,那是可以的,就是把npm的register给永久设置成淘宝镜像的地址,打开cmd 窗口, 输入命令npm config set registry https://registry.npm.taobao.org即可,可以用以下命令查看成一下是否成功。npm config get registry。
这时我们再用create-react-app 创建项目时,可以发现它是从淘宝镜像下载依赖,速度相对快一些.
我在这里碰到一个小问题: 把源变成了淘宝镜像,以后直接可以使用npm install
安装依赖了,但是有一天当我npm install node-sass ,sass-loader时,它下载不下来node-sass,
不知道
为什么,当我们改用cnpm
去安装时,它却很快。
用create-react-app
创建项目成功后,当我们打开package.json文件,发现它并没有我们平时所安装的webpack, babel 等依赖,而是多了一个react-scripts 依赖。原来React 把所有的webpack babel配置都放到了react-scripts中,这样我们想修改一下webpack的配置文件就很困难了。还好 React给我们提供了一个命令eject,可把react-scripts打开,看到它封装的配置文件, eject命令就在scripts 字段的下面,我们执行npm run eject 就可以了。
命令执行完成后,再看一下package.json, 和我们平时经常见的一致了。而且多了config和scripts目录,它里面就是webpack的配置文件。 但是这个命令是单向,不可逆的,我们打开react-scripts以后,就不可能再回去了。
【React 学习 ---- create-react-app】除了webpack、babel构建工具以外,我们还要学习react
的状态管理---Redux或Mobx,
因为如果应用比较大时,每一个组件都有一个状态,不太好管理。当用React
作单页应用时,还要用到React-router.
推荐阅读
- Android源码学习-----Handler机制
- android sdk环境变量的配置
- app后端开发系列文章文件夹
- 开发app组件
- Elasticsearch Reference6.1Mapping
- leetcode之Find All Numbers Disappeared in an Array
- android--------实现Activity和Fragment通信的面向对象的万能接口
- revolv怎样用?revolv自动选择家居系统运用图文详细教程
- 小米活塞耳机if纪念版怎样?小米活塞耳机纪念版评测