Quick Start

HelloWorld

基本的React的页面形式如下所示：

<!DOCTYPE html>@H_403_9@
    <html@H_403_9@>@H_403_9@
      <head@H_403_9@>@H_403_9@
        <script@H_403_9@ src@H_403_9@="../build/react.js"@H_403_9@>@H_403_9@@H_403_9@</script@H_403_9@>@H_403_9@
        <script@H_403_9@ src@H_403_9@="../build/JSXTransformer.js"@H_403_9@>@H_403_9@@H_403_9@</script@H_403_9@>@H_403_9@
      </head@H_403_9@>@H_403_9@
      <body@H_403_9@>@H_403_9@
        <div@H_403_9@ id@H_403_9@="example"@H_403_9@>@H_403_9@</div@H_403_9@>@H_403_9@
        <script@H_403_9@ type@H_403_9@="text/jsx"@H_403_9@>@H_403_9@ // ** Our code goes here! **@H_403_9@ @H_403_9@</script@H_403_9@>@H_403_9@
      </body@H_403_9@>@H_403_9@
    </html@H_403_9@>@H_403_9@

React独创了一种JS、CSS和HTML混写的JSX格式，可以通过在页面中引入JSXTransformer这个文件进行客户端的编译，不过还是推荐在服务端编译。

var@H_403_9@ HelloMessage = React.createClass({
  render: function@H_403_9@()@H_403_9@ {@H_403_9@
    return@H_403_9@ <div@H_403_9@>@H_403_9@Hello {this.props.name}</div@H_403_9@>@H_403_9@;@H_403_9@
  }
});

React.render(
  <HelloMessage@H_403_9@ name@H_403_9@="John"@H_403_9@ />@H_403_9@,document.getElementById('container') );@H_403_9@

React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。要注意的是，React的渲染函数并不是简单地把HTML元素复制到页面上，而是维护了一张Virtual Dom映射表。

class@H_403_9@ ExampleComponent extends React.Component {
 constructor() {
  super();
  this@H_403_9@. _handleClick = this@H_403_9@. _handleClick.bind(this@H_403_9@);
  this@H_403_9@.state = Store.getState();
 }
 // ...@H_403_9@
}

Setup:开发环境搭建

完整的React开发环境应该包括了JSX/ES6的解析以及模块化管理，笔者在这里是选用了WebPack与Babel。Webpack是一个强大的包管理以及编译工具，

参考资料

[react-webpack-cookbook][3]

Webpack

Webpack是一个非常强大依赖管理与打包工具，其基本的配置方式可以如下：

var@H_403_9@ path = require@H_403_9@('path'@H_403_9@);
var@H_403_9@ node_modules = path.resolve(__dirname,'node_modules'@H_403_9@);
var@H_403_9@ pathToReact = path.resolve(node_modules,'react/dist/react.min.js'@H_403_9@);

config = {
    entry: ['webpack/hot/dev-server'@H_403_9@,path.resolve(__dirname,'app/main.js'@H_403_9@)],resolve: {
        alias: {
          'react'@H_403_9@: pathToReact
        }
    },output: {
        path: path.resolve(__dirname,'build'@H_403_9@),filename: 'bundle.js'@H_403_9@,},module: {
        loaders: [{
            test: /\.jsx?$/@H_403_9@,loader: 'babel'@H_403_9@
        }],noParse: [pathToReact]
    }    
};

module.exports = config;

Project Structure：项目结构

一个典型的项目结构你可以参考这个仓库。

config/  
    app.js@H_403_9@
    webpack.js@H_403_9@ (js config over json -> flexible)
src/  
  app/ (the React app: runs on server and@H_403_9@ client too)
    components/
      __tests__ (Jest test folder)
      AppRoot.jsx@H_403_9@
      Cart.jsx@H_403_9@
      Item.jsx@H_403_9@
    index.js@H_403_9@ (just to export app)
    app.js@H_403_9@
  client/  (only browser: attach app to DOM)
    styles/
    scripts/
      client.js@H_403_9@
    index.html@H_403_9@
  server/
    index.js@H_403_9@
    server.js@H_403_9@
.gitignore@H_403_9@
.jshintrc@H_403_9@
package.json@H_403_9@  
README.md@H_403_9@

Integrated With Angular

Angular与React是笔者喜欢的两个框架，二者可以相辅相成。可以查看笔者的[这个][4]库。

Integrated With jQuery

ES6

refactoring-react-components-to-es6-classes

ES6是一门非常让人兴奋的语言，而React自身的譬如JSX这样的语法也是别具特色，笔者一贯坚持从现在开始就广泛使用ES6。而在React的实践编程中，如果需要完全使用ES6语法进行开发，需要注意以下几点。

使用Class代替createClass

Before

var@H_403_9@ ExampleComponent = React.createClass({
 render: function@H_403_9@()@H_403_9@ {@H_403_9@ 
  return@H_403_9@ <div@H_403_9@ onClick@H_403_9@={this._handleClick}@H_403_9@>@H_403_9@Hello,world.</div@H_403_9@>@H_403_9@;@H_403_9@
 },_handleClick: function@H_403_9@()@H_403_9@ {@H_403_9@
  console.log(this@H_403_9@);
 }
});

After，这里要注意将类的方法绑定到当前对象，避免在方法内部this指针被覆盖

class@H_403_9@ ExampleComponent extends React.Component {
 constructor() {
  super();
  this@H_403_9@. _handleClick = this@H_403_9@. _handleClick.bind(this@H_403_9@);
 }
 render() { 
  return@H_403_9@ <div@H_403_9@ onClick@H_403_9@={this._handleClick}@H_403_9@>@H_403_9@Hello,world.</div@H_403_9@>@H_403_9@;@H_403_9@
 }
 _handleClick() {
  console.log(this@H_403_9@); // this is an ExampleComponent@H_403_9@
 }
}

在Constructor中初始化State

如果使用createClass方法创建一个Component组件，可以自动调用它的getInitialState方法来获取初始化的State对象，但是在ES6的Class中并不会如此自动调用，因此，要稍作修改。

Before

class@H_403_9@ ExampleComponent extends React.Component {
 getInitialState() {
  return@H_403_9@ Store.getState();
 }
 constructor() {
  super();
  this@H_403_9@. _handleClick = this@H_403_9@. _handleClick.bind(this@H_403_9@);
 }
 // ...@H_403_9@
}

After

class@H_403_9@ ExampleComponent extends React.Component {
 constructor() {
  super();
  this@H_403_9@. _handleClick = this@H_403_9@. _handleClick.bind(this@H_403_9@);
  this@H_403_9@.state = Store.getState();
 }
 // ...@H_403_9@
}

Mixin

Mixin是React中非常好用的一个功能，但是ES6提倡的面向对象，即使用类继承等方式来进行传递。如果需要在ES6中继续使用Mixin，特别是大量现存的React Library中的Mixin功能，可以有以下几种方式：

使用extends继承，然后在对应方法中调用父类方法。
参考react-mixin这个库。

React实践笔记-Quick Start