/react_frame

Primary LanguageJavaScript

HMB OA Web

推荐通过 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： React Developer Tools 可以查看 Virtual Dom 时的每个组件，以及每个组件的 props，还有整个 React App 层级。

Redux DevTools： Redux DevTools

可以查看 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。

代码规范

第三方依赖

React 里面的组件生命周期比较重要。

开发前建议阅读 React、React Router、Redux 以及 Immutable.js，并扫一遍 antd 支持的组件。

尤其是 antd 的栅格布局方式，见栅格，也可以参考react-flexbox-grid。

组件生命周期

Mounting

这些函数在组件实例被创建和插入到 DOM 时候会被调用：

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

Updating

一次更新可能被 props 或者 state 的变化所触发。这些方法会在一个组件重新 render 的时候被调用：

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

Unmounting

这个方法会在组件从 DOM 上被删除的时候被调用：

  • componentWillUnmount()

其他 APIs

  • setState()
  • forceUpdate()

类属性

  • defaultProps
  • displayName
  • propTypes

实例属性

  • props
  • state

特性

查看 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

Update

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

Learn React.js and ES6