React学习笔记(六) Create React App
React学习笔记(六) Create React App
1、介绍
Create React App 是官方支持的创建单页应用程序的方法，可以帮助我们快速搭建一个繁杂的脚手架
我们可以直接使用命令 npm install create-react-app -g 全局安装 Create React App
然后使用命令 create-react-app <project-name> 创建一个应用程序
- 注意
在创建应用程序过程中，由于网络问题，我们可能会遇到下面的错误
npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! zlib: unexpected end of file
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts has failed.
Deleting generated file... package.json
Deleting my-propject/ from C:\Users\lenovo\Desktop
Done.
这是因为 NPM 默认使用的是一个国外的源：https://registry.npmjs.org，下载速度比较慢
使用 npm config get registry 命令可以查看使用的源
> npm config get registry
https://registry.npmjs.org
所以我们可以换成淘宝的源：https://registry.npm.taobao.org，这样可以加快下载速度
使用 npm config set registry <URL> 命令可以设置使用的源
> npm config set registry https://registry.npm.taobao.org
之后，我们重新运行 create-react-app <project-name> 命令即可
2、目录结构
成功创建应用程序之后，我们得到的目录结构如下：
+ my-project
+ node_modules（存放第三方模块）
+ public（存放静态文件）
- favicon.ico（图标）
- index.html（页面模板）
- manifest.json
+ src（我们自己写的文件一般放在这个文件夹下）
- App.css（页面入口文件的样式文件）
- App.js（页面入口文件）
- App.test.js（页面入口文件的测试文件）
- index.css（程序入口文件的样式文件）
- index.js（程序入口文件）
- logo.svg
- serviceWorker.js
- .gitignore
- package-lock.json（项目配置文件）
- package.json（项目配置文件）
- README.md（项目说明文档）
其中，我们重点看看项目的配置文件 package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
（1）dependencies
项目的依赖包含三个，分别是 react、react-dom 和 react-scripts
react 和 react-dom 不用说，它们是 React 的核心库，而 react-scripts 则管理着项目的所有依赖
有兴趣的朋友可以直接看一下 react-scripts 的源码 node_modules\react-scripts，我们这里不细说
（2）scripts
可用的命令共有四个，分别是 npm start、npm run build、npm test 和 npm run eject
npm start：在开发模式下运行应用程序npm run build：将应用程序构建到 build 文件夹npm test：以交互式监视模式启动测试运行器npm run eject：将项目的配置暴露出来，注意这是一个 单向不可逆操作
【 阅读更多关于 Create React APP 的内容，请参考 官方文档】
【 阅读更多 React 系列文章，请看 React学习笔记 】
