ReactJs với Ruby on Rails 5 (Phần 1)

React là gì? là 1 thư viện JavaScript được tạo bởi Facebook Mục đích là tập trung và hướng vào giao diện của người dùng. Trên Facebook có 2 nền là ReactJs và React Navive.

• React Js là thiên về thiết kế giao diện bên web
• React Native là dùng để thiết kê giao diện trên IOS và Android

Một số thành phần trong ReactJS

• Props: Được sử dụng để truyền dữ liệu vào trong React view, bất kì có sự thay đổi nào thì props sẽ được kích hoạt tự động đối với cả thành phần cha và con
• State: Thuộc tính state của React class cho phép chúng ta theo dõi được sự thay đổi trong view. Nó cũng như props cũng sẽ tự động kích hoạt render view khi mà state thay đổi với điều kiện phải gọi method setState.
• Component: React được xây dựng xung quanh các component, chúng ta có thể tái sử dụng component ở nhiều nơi với các trạng thái và thuộc tính khác nhau, trong một component lại chứa một thành phần khác

Cài đặt React với Rails Thêm vào Gemfile

gem "react-rails"

Bây giờ dùng lệnh "bundle install", sau đó chạy tiếp lệnh "rails g react:install"

# application.js
  //= require react
  //= require react_ujs
  //= require components

VD: mình có 1 model users

class CreateUsers < ActiveRecord::Migration[5.0]
  def change
    create_table :users do |t|
      t.string :name
      t.integer :age

      t.timestamps
    end
  end
end

 # app/controllers/users_controller.rb
class UsersController < ActionController::Base
    def index
        @users = User.all
    end
end

// app/assets/javascripts/components/user.jsx
class Users extends React.Component {
  render() {
    var users = this.props.users.map((user) => {
      return (
        <tr>
          <td>{user.id}</td>
          <td>{user.name}</td>
          <td>{user.age}</td>
        </tr>
      )
    })

    return(
      <tbody>
        {users}
      </tbody>
    )
  }
}

class Table extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      users: this.props.users
    }
  }
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <Users users={this.state.users} />
      </table>
    )
  };
}

 
<%= react_component("Table", {users: @users}) %>

Kết luận Ưu điểm:

• Luôn biết được component của bạn sẽ sinh ra mã HTML như thế nào chỉ bằng cách nhìn vào file source code.
• Render React phía server
• ReactJS tạo ra DOM ảo nơi mà chứa các component và React tính toán những cập nhập rồi thực hiện thay đổi lên DOM, điều đóa thực sự hiệu quả.
• ReactJS giúp việc code JS trở lên dễ dàng hơn với JSX.

Nhược điểm:

• ReactJs chỉ vục phụ tầng view
• Tích hợp vào MVC truyền thống cần tích hợp lại
• Khó học đối với người mới học web
• Khá nặng so với framework khác