react 环境搭建
导读
当前版本是 V16.13.1
之前需要全局安装 create-react-app，但是现在不可以的了。
如果之前你全局安装了 create-react-app 需要卸载,否则使用 npx 创建的项目没有模版文件。
卸载命令：npm uninstall -g create-react-app
使用 npx 创建项目
使用如下命令安装：需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6
// npx是npm 5.2+ 附带的 package 运行工具
/** npx是运行本地node_moduls包里的依赖的，
如果本地没有该依赖它就会去下载。**/
npx create-react-app my-app
cd my-app
npm start
1
2
3
4
5
6
2
3
4
5
6
项目结构
├── └── │ 当前是 react@^16.13.1 项目目录
├── node_modules # 依赖包
├── public # 公共文件
│ └── favicon.ico # 网站标识图
│ └── index.html # 网页模板页
│ └── logo192.png # 自带192像素图标
│ └── logo512.png # 自带512像素图标
│ └── manifest.json # chrome扩展,Web App Manifest描述应用扩展
│ └── robots.txt # 对爬虫设置数据爬取规则
├── src
│ └── App.css # 主组件样式
│ └── App.js # 主组件
│ └── App.test.js # 主组件测试文件
│ └── index.css # 全局主样式
│ └── index.js # 全局入口主文件
│ └── logo.svg # 矢量图标
│ └── serviceWorker.js # 设置页面缓存
│ └── setupTests.js # 设置测试环境
├── .gitgnore # 过来git清单
├── package.json # 包管理文件
├── README.md # 项目说明
├── yarn.lock # 依赖包版本号锁定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
项目结构约定
yarn.lock 文件是因为我使用 yarn 安装的项目依赖，一般情况下是npm.lock,在 react 项目中，我们使用.jsx作为后缀来区分组件和 js 逻辑代码文件。在脚手架环境里支持.jsx文件的编译，所以不用额外配置