React-cli

安装

建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。

国内使用 npm 速度很慢，可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

1、全局安装
cnpm install create-react-app -g

2、查看版本号：
    create-react-app -V

3、创建项目
create-react-app 项目的名字

npx可以避免全局安装。先会查看npm path 是否安装过。如果安装过，直接使用。如果未安装，它才会帮你安装。

创建项目

1、创建项目

npx create-react-app xxxxx

npm init react-app my-app

yarn create react-app my-app

2、运行项目：

    npm start    

    yarn start

3、打包

    npm run build

    在生产环境中编译代码，并放在build目录中
    能够正确的打包代码，并且优化，压缩，使用hash重命名文件

create-react-app 目录结构

EADME.md                说明文件
  node_modules/            依赖包目录
  package.json            依赖包配置
  gitignore  --  git管理代码的时候，有的文件不希望传到git仓库中，可以把文件定义在这。
  public/                    公共资源目录
    index.html            默认首页
    favicon.ico            ico图标
    manifest.json: wepack打包优化相关
  src/                        项目核心目录
    App.css                根组件css样式文件
    App.js                根组件App
    App.test.js            测试文件
    index.css                全局css样式文件
    index.js                全局入口程序文件
    logo.svg                logo图片文件
    serviceWorker.js            离线支持和网络恢复能力
    setupTests.js            index.js测试文件

craco配置

使用 create-react-app 创建项目，不想 eject 项目但想对项目中 wepback 进行自定义配置 那么就可以使用craco配置

1、安装

  yarn add @craco/craco -S

2、修改命令配置文件 (package.json)

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

3、项目根目录下创建配置文件 (项目名称/craco.config.js)

  /* craco.config.js */
  const path = require('path')

  module.exports = {
    webpack: {
      // 别名
      alias: {
        "@": path.resolve("src"),
      }
    },
    //配置代理解决跨域
    devServer: {
      proxy: {
          "/api": {
              target: "http://www.ask.com/api",  
              changeOrigin: true,
              pathRewrite: {
                  "^/api": ""
              }
          }
      }
    }
  }