从0开始搭建react项目实践

1.全局安装create-react-app

npm install -g create-react-app

2.创建项目，安装依赖

create-react-app my-react-app

3.进入项目，启动项目

cd my-react-app   
npm start

4.创建src项目结构

路由	状态管理redux	工具类	图片管理	组件	路由组件
router	store	utils	img	component	view

5.配置src根路径替换成@的方法

npm install react-app-rewired --save-dev

• 在根路径下面添加 config-overrides.js
  
• 修改package.json
  

6.路由配置

安装路由组件：npm install react-router-dom --save-dev

• 在router 文件夹下面新加 index.js，修改如下

• 修改入口文件 index.js
  
  7.在view文件里面添加 login , home 路由组件
  实例：login 文件
  
  8.使用create-react-app修改配置多环境打包

npm install -g dotenv-cli 
or
yarn global add dotenv-cli

在根目录创建 .env 文件（注意：只能以 REACT_APP_ 开头），如创建 .env.development、.env.production，.env.test内容如下：

// .env.development
REACT_APP_ENV=development
 
// .env.production
REACT_APP_ENV=production

// .env.test
REACT_APP_ENV=test

修改package.json

"scripts": {
    "start": "react-app-rewired start",
    "build:test": "dotenv -e .env.test react-app-rewired build",
    "build:pro": "dotenv -e .env.production react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
"devDependencies": {
    "dotenv-cli": "^2.0.1",
    "react-app-rewired": "^2.1.3"
}

打包命令：
打包测试环境（npm run build:test）、打包生产环境（npm run build:pro）
在js/jsx中：可以在 process.env 中访问

注意：使用vsCode 编辑react的小伙伴，记得切换右下角的语言配置，JavaScript点击切换成JavaScript React 即可，避免出现红色波浪线错误