react脚手架生成事项及整套react依赖配置

create-react-app---->react脚手架的安装与使用

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像

npm config set registry https://registry.npm.taobao.org

一、开始安装使用react步骤

1、cnpm install -g create-react-app ----->安装react脚手架
2、create-react-app my-app ----->创建react脚手架
3、cd my-app/ ----->在my-app文件夹下打开终端
4、npm start ----->直接使用react

5、若是缺少依赖的包，则可以使用 npm run build

如果需要在其他地方在创建react，请从开始react的第二步开始操作即可

生成文件详解

my-app/
  node_modules/           //依赖的包
  public/                  //最后展示的页面，没必要修改
    index.html              //页面模板
    favicon.ico        //就是ico..
  src/              //开发源码
    App.css             //根组件样式，可以删除，并在App.js中的import 'App.css'删除
    App.js             //根组件，写的组件都在这里实现
    App.test.js       //测试文件可删除
    index.css        //入口文件的样式表删除，并在index.js中的import 'index.css'删除
    index.js        //js入口文件
    logo.svg        //react图标（可删除）
  package.json      //打包文件
  README.md         //脚手架生成的markdown文件，有教你如何使用脚手架，前期可看

生成config文件

npm run eject----->会生成config文件夹，里面进行对react路径什么的修改

路径别名修改方式

config–>webpack.config.js–>直接搜索alias 如图：

使用yarn和git bash

https://yarn.bootcss.com/官方网址，直接按照步骤装就可以了

先装node，再装Choco，最后装yarn

使用VS code：

1、VS code中的设置中输入Terminal › Integrated › Shell: Windows

2、将路径修改为gitbush的bin文件夹下面的bash.exe文件

二、装好的cerete-react-app脚手架还必须装另外一些东西

• 第一个就是react-router-dom：就是react的路由

  安装过程：npm install --save react-router-dom / cnpm install --save react-router-dom / yarn add react-router-dom

  这样就配置好了react路由依赖

• 第二个，可选，这边使用 antd ui框架，-- https://ant.design/docs/react/use-with-create-react-app-cn

  安装过程： cnpm install --save antd / yarn add antd / npm install --save antd

  其次：antd按需加载必须引入rewired

  安装过程：yarn add react-app-rewired customize-cra,

  然后在package.json的scripts中添加：/* package.json */（加号就是添加的意思，减号就是删除的意思）

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

  并且在根目录创建一个config-overrides.js，用于修改配置

  module.exports = function override(config, env) {
    // do stuff with the webpack config...
    return config;
  };
  

  然后再引入一个Babel工具：babel-plugin-import

  安装过程： yarn add babel-plugin-import，并且在config-overrides.js修改配置（加号就是添加的意思，减号就是删除的意思）

  + const { override, fixBabelImports } = require('customize-cra');
  
  - module.exports = function override(config, env) {
  -   // do stuff with the webpack config...
  -   return config;
  - };
  + module.exports = override(
  +   fixBabelImports('import', {
  +     libraryName: 'antd',
  +     libraryDirectory: 'es',
  +     style: 'css',
  +   }),
  + );
  

  然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块。（加号就是添加的意思，减号就是删除的意思）

    // src/App.js
    import React, { Component } from 'react';
  - import Button from 'antd/lib/button';
  + import { Button } from 'antd';
    import './App.css';
  
    class App extends Component {
      render() {
        return (
          <div className="App">
            <Button type="primary">Button</Button>
          </div>
        );
      }
    }
  
    export default App;
  

最后重启 yarn start就可以使用了