使用create-react-app创建react项目

一、创建

全局安装脚手架工具    npm install -g create-react-app

新建项目：

create-react-app my-app
cd my-app
npm start

环境变量问题 npm init react-app my-app；

其他方式    yarn create-react-app my-app

二、运行

启动

启动开发
npm start
# or
yarn start
启动测试
npm test
#or
yarn test
构建生产版本
npm run build
#or
yarn build
解压默认的webpack配置到配置文件中
npm run eject 

三、配置

sass依赖

$ npm install node-sass --save
$ # or
$ yarn add node-sass

代理配置

配置简单代理，直接在package.json文件中添加proxy节点即可：

{
  ...
  "proxy": "http://localhost:4000",
  ...
}

自定义配置

安装中间件
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
创建： src/setupProxy.js 添加如下内容:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

http-proxy-middleware 1.x比0.x变化较大，正确写法如下

const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function(app) { app.use(createProxyMiddleware('/api', { target: 'http://localhost:5000/' })); };

 环境变量：在项目中区分开生产环境还是编译环境，从而执行不同的代码。

Windows (cmd.exe)
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

Windows (Powershell)
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

Linux, macOS (Bash)
REACT_APP_NOT_SECRET_CODE=abcdef npm start

添加自定义环境变量文件.env
项目根目录下创建.env文件，文件内部添加 key=value的配置可以直接应用于项目的编译中。

REACT_APP_NOT_SECRET_CODE=abcdef
Note: 如果创建自定义的环境变量必须以REACT_APP_开头.

在项目中可以直接用process.env.XXX访问我们的自定义的环境变量。比如：

js中使用
render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}
再比如：判断是否是生产环境

if (process.env.NODE_ENV !== 'production') {
  analytics.disable();
}
HTML中使用
<title>%REACT_APP_WEBSITE_NAME%</title>

配合typescript

配合TypeScript
第一种方式：创建项目的时候直接配置好TypeScript.

npx create-react-app my-app --typescript
#or
yarn create react-app my-app --typescript
第二种方式：为现有的React项目添加TypeScript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

 参考：https://www.jianshu.com/p/77bf3944b0f4

配置本地服务配置项

方法1.eject

打开 package.json ，可以看到eject。运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来。

复制代码
{
  ...
  "scripts": {
   ...
    "eject": "react-scripts eject"
  },
  ...
}

此时目录中多出来配置文件夹

scripts文件夹start.js中修改配置
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0'

重启项目

弊端：这种方法不可逆

方法2.react-app-rewired

安装    npm install react-app-rewired --save

修改package.json,原本的react-script 改为react-app-rewired　　

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

在根目录下新建config-overrides.js,在config-overrides.js里更改配置项，项目启动的时候会先在config-overrides.js里读数据，对webpack里的默认文件进行整合，最后才会启动。

复制代码
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin([
        'import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }
    ], config)
    config = injectBabelPlugin([
        "@babel/plugin-proposal-decorators", { "legacy": true }
    ], config)
    return config;
}

参考：https://www.cnblogs.com/superlizhao/p/11026930.html

运行npm run eject之后bug解决

方法一、

// package.json中增加配置项
{
  "babel": {
    "presets": [
      [
        "react-app",
        {
          "runtime": "automatic"
        }
      ]
    ]
  }
}

方法二、

// webpack.config.js
{
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    // Add this back
    presets: [
      [
        require.resolve('babel-preset-react-app'),
        {
          runtime: hasJsxRuntime ? 'automatic' : 'classic',
        },
      ],
    ],
  }
}

参考：https://github.com/facebook/create-react-app/issues/9882