React 学习笔记 脚手架
- 参考:王红元老师的React
前端脚手架
- 对于现在比较流行的三大框架都有属于自己的脚手架:
- Vue的脚手架:vue-cli
- Angular的脚手架:angular-cli
- React的脚手架:create-react-app
- 它们的作用都是帮助我们生成一个通用的目录结构,并且已经将我们所需的工程环境配置好。
安装node
- 官网地址:https://nodejs.org/en/download/
- 注意:这里推荐大家下载LTS(Long-term support )版本,是长期支持版本,会比较稳定;
包管理工具
- React脚手架默认也是使用yarn;
- npm install -g yarn
Yarn和npm命令对比
安装脚手架
- 在国内,某些情况使用npm和yarn可能无法正常安装一个库,这个时候我们可以选择使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 最后一个需要安装的是创建React项目的脚手架:
npm install -g create-react-app
创建React项目
- 创建React项目的命令如下:
- 注意:项目名称不能包含大写字母
- 另外还有更多创建项目的方式,可以参考GitHub 的readme
- create-react-app 项目名称
- 创建完成后,进入对应的目录,就可以将项目跑起来:
- 进入项目目录
- yarn start
目录结构分析
脚手架中的webpack
- 如果我们希望看到webpack的配置信息,应该怎么来做呢?
- 我们可以执行一个package.json文件中的一个脚本:"eject": "react-scripts eject"
- 这个操作是不可逆的,所以在执行过程中会给与我们提示;
- yarn eject
文件结构删除
- 我们先将不需要的文件统统删掉:
- 1.将src下的所有文件都删除
- 2.将public文件下出列favicon.ico和index.html之外的文件都删除掉
编写代码
- 在src目录下,创建一个index.js文件,因为这是webpack打包的入口。
- 在index.js中开始编写React代码:
- 我们会发现和写的代码是逻辑是一致的;
- 只是在模块化开发中,我们需要手动的来导入React、ReactDOM,因为它们都是在我们安装的模块中;
- 如果我们不希望直接在 ReactDOM.render 中编写过多的代码,就可以单独抽取一个组件App.js: