React和Rails

对于rails中集成react组件有两个比较好的gem可供选择。

1. react_rails

这个gem相对简单一点,有一个很好的例子可供参考。

reactjs-a-guide-for-rails-developers

2. react_on_rails

这个gem复杂些,对环境要求比较高。

环境要求

  1. nodejs
  2. yarn
  3. foreman – gem install foreman

recet_on_rails example

本人使用react_rails和react_on_rails两个gem实现了同一个例子。
react_rails是使用coffee编写。
react_on_rails是使用原生的jsx编写。
源码

react_rails主文件在 app/assets/javascripts/components

react_on_rails主文件夹在
client/app/bundles/HelloWorld/components/records下。

该如何选择:
简单的使用react_rails.
复杂的使用react_on_rails

3. 纯前端的React Deomo

  • 主要是实现了一个简单的TODO功能。
  • UI是从bootstrsap切换成了Ant-Design.
  • react源码,wiki中有介绍如何接入ant-design.其实官方文档里已经说明了如何使用。
  • Ant-Design官网

react jsx语法规范

Note

  1. 每次在组件中调用方法,在执行该方法时会报错找不到this(null),这个时候需要去手动绑定,在构造函数的函数里。
1
2
3
4
5
6
7
8
9
10
11
constructor(props) {
super(props);
this.state = {
name: 'xiaozhu'
}
this.example = this.example.bind(this);
}
  example() {
// do somthing
}

这样很麻烦吧,可以换成es6的写法:

1
2
3
4
5
6
7
8
9
10
11
constructor(props) {
super(props);
this.state = {
name: 'xiaozhu'
}
//this.example = this.example.bind(this);
}
  example = (param) => {
// do somthing
}

这样写,就不需要自己去手动绑定了。
参考
具体的不是es6的效果请查阅
2. 组件之间进行通信,需要在对应的组件上添加属性。

// OneComponent
render(){
    return(
        <ExampleComponent handleOperation={this.doSomthing}>
    )
}

doSomthing = (param) => {
    // do somthing
}


// ExampleComponent
render(){
    return(
        <h1>Hi,Xiaozhu</h1>
        <a className='btn btn-default' onClick={this.handleToUpdate}>
        Update
      </a>
    )
}

handleToUpdate = (e) => {
    var _this = this
    e.preventDefault();
    $.ajax({
        ...
        success: function(data){
            _this.props.handleOperation (data)
        }
    })
}