推荐通过 nvm 来管理 node 版本:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
或者通过 wget:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
环境
- node 6.9.1
- npm 3.10.8
可以使用 nrm 来进行 npm 源的管理:
npm install nrm -g
nrm ls
nrm use taobao
clone 后需要先安装所有依赖:
npm install
然后再运行:
# 也可以使用 `npm start` 或者 `node run start`
node run
可以在 release (production) 环境测试:
node run start --release
关闭 HMR 和 React Hot Loader:
node run start --no-hmr
App 会运行在 http://localhost:3000/.
IDE 可以自由选择。这里推荐两个 Chrome 插件:
React Developer Tools:
可以查看 Virtual Dom 时的每个组件,以及每个组件的 props,还有整个 React App 层级。
可以查看 Redux 的状态,包括 Action、Action 产生的 state 变化,甚至还能直接在控制台 dispatch action,十分强大。
单元测试使用了 chai 和 mocha,每次 push 前请自觉检查 lint 并进行修复:
$ npm run lint # 检查 JavaScript 和 CSS 代码
$ npm run test # 跑单元测试。或者使用 `npm run test:watch`
使用在你的 Firebase console 找到的
完整的 Firebase 项目名字更新到 run.js
文件中的 publish
脚本。
注意完整名字应该会带有一个额外的 ID 后缀。然后运行:
$ node run publish # 编译并发布网站到 Firebase, 也可以使用 `npm run publish`
如果只需要进行编译,可以运行:
$ node run build # 或者使用 `node run build --release` 来进行生产环境编译
如果想要在本地模拟生产环境的部署,可以参见 Production-ish Server,使用 express 和 if-env 快速搭建本地环境。 如果想要探索服务端渲染,可以参见 Server Rendering。
- Airbnb JavaScript Style Guide
- Airbnb React/JSX Style Guide
- Airbnb CSS-in-JavaScript Style Guide
- Airbnb CSS / Sass Styleguide
- React
- React Router, React Router Tutorial
- React Router Redux
- Redux
- Ant Design
- Immutable.js
- Redux DevTools Extension
- Validate.js
- Underscore
- Redux Thunk
- keyMirror
- History
- History Wrapper
- FastClick
- etc.
React 里面的组件生命周期比较重要。
开发前建议阅读 React、React Router、Redux 以及 Immutable.js,并扫一遍 antd 支持的组件。
尤其是 antd 的栅格布局方式,见栅格,也可以参考react-flexbox-grid。
这些函数在组件实例被创建和插入到 DOM 时候会被调用:
- constructor()
- componentWillMount()
- render()
- componentDidMount()
一次更新可能被 props 或者 state 的变化所触发。这些方法会在一个组件重新 render 的时候被调用:
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
这个方法会在组件从 DOM 上被删除的时候被调用:
- componentWillUnmount()
- setState()
- forceUpdate()
- defaultProps
- displayName
- propTypes
- props
- state
- 通过 Babel 实现的现代 JavaScript 语法 (ES2015+),通过 PostCSS 实现的现代 css 语法
- 通过 React, Webpack 和 CSS Modules 实现的基于组件的 UI 架构
- 通过 Redux 实现的应用状态管理以及时间旅行调试 (见
main.js
,core/Store.js
) - Code-splitting and async chunk loading via Webpack and ES6 System.import()
- 热模块替换 (HMR) 和 React Hot Loader
- 跨设备测试使用 Browsersync (见
run.js#start
)
查看 docs, 学习 React.js 和 ES6
.
├── /components/ # Shared or generic UI components
│ ├── /Button/ # Button component
│ ├── /Layout/ # Website layout component
│ ├── /Link / # Link component to be used instead of <a>
│ └── /... # etc.
├── /core/ # Core framework
│ ├── /history.js # Handles client-side navigation
│ ├── /routes.jsx # Handles routing
│ └── /Store.js # Application state manager (Redux)
├── /node_modules/ # 3rd-party libraries and utilities
├── /pages/ # React components for web pages
│ ├── /about/ # About page
│ ├── /error/ # Error page
│ ├── /home/ # Home page
│ └── /... # etc.
├── /public/ # Static files such as favicon.ico etc.
│ ├── /dist/ # The folder for compiled output
│ ├── favicon.ico # Application icon to be displayed in bookmarks
│ ├── robots.txt # Instructions for search engine crawlers
│ └── /... # etc.
├── /test/ # Unit and integration tests
├── /utils/ # Utility and helper classes
│── main.js # React application entry point
│── package.json # The list of project dependencies and NPM scripts
│── run.js # Build automation script, e.g. `node run build`
└── webpack.config.js # Bundling and optimization settings for Webpack
You can always fetch and merge the recent changes from this repo back into your own project:
$ git checkout master
$ git fetch react-static-boilerplate
$ git merge react-static-boilerplate/master
$ npm install
- React.js Training Program by Tyler McGinnis
- React for Beginners and ES6 Training Course by Wes Bos
- React: Up & Running: Building Web Applications by Stoyan Stefanov (Aug, 2016)
- Getting Started with React by Doel Sengupta and Manu Singhal (Apr, 2016)
- You Don't Know JS: ES6 & Beyond by Kyle Simpson (Dec, 2015)