这篇文章大体是对官方文档的一个翻译，把短期内自己会用到的提取了出来，作为一个环境搭建文档。
### 编辑器中显示Lint信息

添加.eslintrc

1
"extends": "react-app"

编辑器中调试

只有VSCode支持
在.vscode中添加launch.json

1
2
3
4
5
6
7
8
9
10
11
12
13
"version": "0.2.0",
"configurations": [{   
"name": "Chrome",   
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
  "webpack:///src/*": "${webRoot}/*"
  }
}]
}

npm start启动app后, 在VS Code中F5 或者点击debug 按钮。然后可以设置断点，改变代码进行调试。

自动格式化代码

库：Prettier，lint-staged 和 husky
husky支持githooks的封装使用。
lint-staged 可以对git暂存区文件运行脚本
prettier 是 JS的格式化工具。

1
npm install --save husky lint-staged prettier
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"dependencies": {
   // ...
},
+ "lint-staged": {
+   "src/**/*.{js,jsx,json,css}": [
+     "prettier --single-quote --write",
+     "git add"
+   ]
+ },
  "scripts": {
+   "precommit": "lint-staged",
    "start": "react-scripts start",
    "build": "react-scripts build",
...

只要你进行提交，Prettier会对代码进行格式化。
你也可以运行./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}" 格式化代码文件。

更改页面标题

  • 静态更改：public/index.html中编辑title标签
  • 动态更改：使用 document.title API
  • 对于更复杂的场景，比如更改React组件中title，使用第三方库React Helmet

添加CSS预处理器 (Sass, Less etc.)

1
npm install --save node-sass-chokidar
1
2
3
4
"scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start": "react-scripts start",

如果希望不使用相对路径：
1
2
@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module

但是这样配置不能在开发环境中同时支持同时编译页面和编译scss，要支持watch模式:
1
npm install --save npm-run-all

1
2
3
4
5
6
7
8
9
10
11
 "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build": "npm run build-css && react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

### Adding Bootstrap

目前还未使用
1
npm install --save react-bootstrap bootstrap@3

在 src/index.js 中导入CSS:
1
2
3
4
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
Import required React Bootstrap components within src/App.js file or your custom component files:
import { Navbar, Jumbotron, Button } from 'react-bootstrap';

### Adding Flow

用TypeScript，所以没有配置

安装其他库

1
npm install --save react-router

环境变量

写：在.env文件或者使用 set(临时） 

set REACT_APP_SECRET_CODE=abcdef&&npm start

读：process.env.REACT_APP_Name
HTML中读取：<title>%REACT_APP_WEBSITE_NAME%</title>
注意 env文件规则如下：

.env: Default.
.env.local: Local overrides. This file is loaded for all environments except test.
.env.development, .env.test, .env.production: Environment-specific settings.
.env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.

文件优先级(左边文件优先于右边):
​
npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)

后端API

// Todo

fetch()

https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/
### 开发中使用HTTPS

// Todo
### Generating Dynamic Tags on the Server

// Todo

测试

库：Jest Enzyme
1
2
npm install --save enzyme react-test-renderer
npm install --save jest-enzyme

1
npm test -- --coverage

### Developing Components in Isolation

// Todo
在项目中添加 Storybook for React 或者 React Styleguidist。可以以隔离的形式开发单个组件。

Making a Progressive Web App

// Todo
PWA是Google提出的概念。

分析生成代码

1
npm install --save source-map-explorer
1
2
3
4
  "scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
    "start": "react-scripts start",
    "build": "react-scripts build",
1
2
npm run build
npm run analyze

运行

1
2
npm install -g serve
serve -s build

相对路径构建

主要用于页面在服务器非根目录运行(子页面)的情况

1
"homepage": "http://mywebsite.com/relativepath",

或者

1
"homepage": ".",

TypeScript React

支持TypeScript的React脚手架

1
create-react-app my-app --scripts-version=react-scripts-ts