create-react-app项目搭建流程指引（完善中）快速开始以上命令执行完成后，浏览器自动打开： http://

快速开始

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app

# 启动编译当前的React项目，并自动打开 http://localhost:3000/
npm start

以上命令执行完成后，浏览器自动打开： http://localhost:3000/

构建React项目的其他方式

npm init react-app my-app

yarn

yarn create react-app my-app

项目目录

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

默认的npm脚本

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

启用Sass

npm install node-sass --save

安装完之后，把原来的CSS文件后缀直接改为 .scss 或者.sass

HTML模板修改

在public目录中有个index.html是单页面应用的基本模板，所有react生成的代码都会注入到此HTML中。所以此处可以添加一些cdn脚本或者全局的html

添加全局的资源（图片、字体、svg、视频等）

在公共目录下，你可以放字体文件、图片、svg等文件，访问这些文件最好添加 %PUBLIC_URL%作为根目录。

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

环境变量

巧妙的使用环境变量可以帮我们在项目中区分开生产环境还是编译环境，从而执行不同的代码。

命令行直接添加环境变量

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.

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

配置代理

`package.json`配置代理

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

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

自定义配置代理

第一步：安装 http-proxy-middleware

$ 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/' }));
};

VS Code配置React开发环境

React集成VSCode测试

第一步: 首先安装：Debugger for Chrome插件。

第二步：项目根目录下创建 .vscode文件夹。

第三步：创建launch.json文件文件内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

此时可以F5直接启动测试了。

create-react-app项目搭建流程指引（完善中）