这篇文章大体是对官方文档 的一个翻译,把短期内自己会用到的提取了出来,作为一个环境搭建文档。 ### 编辑器中显示Lint信息 添加.eslintrc
编辑器中调试
只有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()
// Todo
测试
库:Jest Enzyme1 2 npm install --save enzyme react-test-renderer npm install --save jest-enzyme
### Developing Components in Isolation // Todo 在项目中添加 Storybook for React 或者 React Styleguidist。可以以隔离的形式开发单个组件。
// 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",
或者
TypeScript React
支持TypeScript的React脚手架
1 create-react-app my-app --scripts-version=react-scripts-ts