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就可以使用了