react搭建项目

1.npm install create-react-app -g
2.create-react-app demo  (demo为项目名)
3.cd demo   
4.npm install
5.npm start     //运行

 

public里面的文件：

    favicon.ico即为html的ico 图标，可以替换
    manifest.json，是app的配置文件，设置icons，首页路径等；

src文件夹：

    index.js 是入口文件
    App.js是最大的组件App
    registerserviceworker.js 用来做资源离线的缓存，registerServiceWorker注册的service worker 只在生产环境(正式环境)中生效。

常用命令

    npm start 启动项目，在 http://localhost:3000查看项目运行
    npm run build 项目打包，生成build文件夹
    npm run eject弹出配置文件，用于修改默认的配置，操作不可逆
    npm test --测试

安装Ant Design

　　npm install antd --save  或者 cnpm install antd-mobile --save

　　npm install react-app-rewired --save-dev
配置 package.json

　　"scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test",
            "eject": "react-scripts eject"
        }

项目根目录创建一个 config-overrides.js 用于修改默认配置

　　由于引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra，否则会出现问题。

　　npm install customize-cra --save-dev

　　npm install less-loader less --save-dev

　　cnpm install --save-dev react-app-rewire-less

 

　　const {
    　　override,
    　　fixBabelImports,
    　　addLessLoader,
  　 } = require("customize-cra");
 
 
  　module.exports = override(
    　　fixBabelImports("import", {
      　  libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
     }),
     addLessLoader({
       javascriptEnabled: true,
       modifyVars: { "@primary-color": "#1DA57A" }
     })
   )

如果启动报Cannot find package 'babel-plugin-import'错误，则说明axios所需的插件没有装上，需安装

　　npm install axios qs --save

　　npm install antd babel-plugin-import --save

 

路由依赖包：npm i -S react-router-dom

实现多环境打包

　　1、安装dotenv-cli：yarn global add dotenv-cli

　　2、添加配置文件.env，放在项目根目录

　　　　开发环境：.env.development

　　　　测试环境：.env.test

　　　　生产环境：.env.production

　　注：文件中的变量名必须以REACT_APP开头才能识别