Giới thiệu và cài đặt ReactJS với Rails

Bài đăng này đã không được cập nhật trong 7 năm

Dạo này nghe React đang nổi lên như 1 hiện tượng. Nên mình cũng nhảy vào tìm hiểu và nghiên cứu xem React là j? Và vì sao nó lại hot đến như vậy

React.js là gì? là 1 thư viện JavaScript được tạo bởi Facebook. Chưa gì đã thấy hàng xịn rồi.
Mục đích React? 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ình chỉ giới thiệu sơ qua thôi chứ minh lập trình web nên mình sẽ tìm hiểu và đi sâu vào ReactJs.
Cách thức hoạt động của ReactJs
- Khi phía client request lên server thì phía server (không quan trong là node.js, php, asp.net, ruby...) Nói chung là nó không quan tâm tới server viết bằng ngôn ngữ gì?
- Server sẽ trả về cho client và trong đó sẽ có mã script của react.
- Và lúc đó react mới complie code và hiển thị cho người dùng. Note: Khi React mới ra đời thì cơ chế hoạt động của React là khi server trả dữ liệu về cho người dùng thì lúc đó mới tải về mã React. Và lúc đó React mới rennder ra HTML. Chính vì vậy mà các image hay keyword được render bởi React sẽ không tốt cho SEO. Chính vì vậy mà React mới ra 1 kỹ thuật mới là Server sẽ render mã React thành HTML rồi mới trả về phía Client. Như vậy GG sẽ bắt được khi phía server trả HTML về phía client. Cơ mà quan trọng hiện giờ GG đều bắt đc các image or keyword bằng cả 2 cách này nên bạn có thể áp dụng cả 2 cách đều được Vậy cách thức hoạt động của React gồm 2 cách.
Syntax Hiện có 2 syntax đang được phổ biến đó là : JSX và CJSX(CoffeeScript with JSX markup)
Cài đặt React với Rails
- Trước khi cài đặt ta cần phải hiểu React với Rails hoạt động như thế nào:
  - ReactJs chỉ phục vụ tầng View vì vậy ở tầng Controller và Model của Rails vẫn bình thường không có gì thay đổi.
  - Dữ liệu trả về là Json
  - ReactJs sử dụng nhưng cấu trúc phân nhỏ (Component) để quản lý dễ dàng (cái này rails cũng vậy ^^)
- Tạo 1 project trong rails rails new react-js
- Thêm gem "react-rails"' vàbundle`
- install react rails g react:install
- mở file application.js và nhúng thêm
```
//= require react
//= require react_ujs
//= require components
```
- Ở file index.html.erb sẽ gọi ReactJs để render HTML với cú pháp <%= react_component("HelloWorld") %>
- Chúng ta tạo 1 file hello-word.jsx trong thư mục 'javascripts/components'
```
    class HelloWorld extends React.Component {
      render() {
         return <h1>Hello World</h1>
      }
    }
```
class HelloWorld tương ứng khi gọi ở file HTML. Khi đó React sẽ render ra mã HTML và hiển thị lên. Note: HTML bạn return luôn luôn được nằm trong 1 tag HTML. VD : <h1>
<span>....

Giờ reload lại page xem đã xuất hiện Hello World chưa nào! ^^

Ví Dụ Giờ mình sẽ thử truyền data vào React rồi hiện thị lên view thử xem! Đầu tiên mình sẽ genarate resource bằng rails: rails g resource User name:text email:text age:integer address:text

#users_controller.rb

  def index
    @users = User.all
  end

#index.html.erb

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

Tương tự mình tạo 1 file trong thư mục 'javascripts/components' là users.jsx

class Users extends React.Component {
  render() {
    var users = this.props.users.map((user) => {
      return (
        <tr key={user.id}>
          <td>{user.name}</td>
          <td>{user.age}</td>
          <td>{user.address}</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>Name</th>
            <th>Age</th>
            <th>Address</th>
          </tr>
        </thead>
        <Users users={this.state.users} />
      </table>
    )
  };
}

OK. Vậy là đã xong ^^. Đừng lo lắng mình sẽ giải thích cơ chế hoạt động của React ngay sau đây. Đầu tiên : Khi server trả data về chúng sẽ được React biên dịch và render ra mã HTML.

trong class Table chúng ta thấy hàm
- constructor(props): chúng sẽ thiết lập state
- super(props): để chúng ta có thể sủ dụng props trong component

Vậy state và props trong này là gì?

State: là thuộc tính của React class cho phép chúng ta theo dõi được sự thay đổi trong view, vai trò của nó là giúp cho giữ liệu của bạn thay đổi nhằm tương tác với ng dùng
Propes: props là một attribute của Component. Chúng ta có thể sử dụng props như là một Object hay là một Function vai trò của props là chứa giá trị được chuyển từ bên ngoài vào trong Component. Hiểu nôm na thì theo dỗi sự thay đổi như kiểu $watch của angular và chắc propes truyền dữ liệu kiểu như two-way binding và state thì kiểu các one-way binding ^^ Sau đó bạn reder và trả về mã HTML. trong đây mình có gọi đến class Users nhằm render ra dữ liệu bằng <Users users={this.state.users} /> như vậy là mình sẽ gọi đến class Users. Thật ra là ở class Tabe mình có thể ko cần dùng contructor để thiết lập state. và mình có thể viết <Users users={this.props.users} /> nhưng nếu dùng props sẽ dẫn đến tình trạng cả Users và Table đều gọi this.props.users tất nhiên chúng ta có thể đổi tên biến truyền vào là <Users usersS={this.state.users} /> tuy nhiên sẽ khó quản lý hơn và có thể dẫn đến tình trạng duplication và bạn sẽ không biết dữ liệu thật sự nằm ở đâu (https://en.wikipedia.org/wiki/Single_source_of_truth) OK. sau đó bạn sẽ return var users trong thẻ <tbody>

Ưu nhược điểm của React Thật ra mình cũng mới và đang dần tìm hiểu React. Nên mình cũng lên mạng và tìm xem ưu điểm và nhược điểm của nó ra sao?
- ưu điểm
  - Như các bạn thấy mình rất dễ lồng các dòng code HTML vào trong JS. đó là do nó được viết trong file JSX. Bạn có thể thêm các đoạn HTML vào trong hàm render mà không phải nối chuỗi (bạn có thể viết trong file js được. cơ mà nhớ import thêm thư viện babel.js)
  - Nó tạo ra các DOM ảo - nơi các component tồn tại thực sự trên đó dẫn đến hiệu suất cao.
  - Nó có nhiều công cụ để phát triển (như các ứng dụng trên chrome như React Developer Tool...)
  - Render tầng Server như mình nói ở trên thì nó sẽ giúp tối ưu hóa SEO và thời gian load page. (kiểu như bạn vô hiệu hóa JS thì sao nhỉ? =>ok ko thành vấn đề )
- nhược điểm
  - Reactjs chỉ phục vụ cho tầng View.
  - Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại.
  - Khó tiếp cận cho người mới học về Web...(mình cũng thấy khó h
Tài liệu:
- https://github.com/reactjs/react-rails
- https://facebook.github.io/react/ (thật ra khi đọc cái này các bạn nên dùng React với NodeJS hơn. dễ áp dụng cho mọi người mới học hơn) ơn angular :v :v)
Kết Luận Mình mới chỉ tìm hiểu sơ qua về React. các định nghĩa cũng chưa đi sâu vào. Hy vọng ở các bài sau mình sẽ tìm hiểu sâu và giải thích tường tận hơn cũng như xây dựng một sample đầu tay với ReactJS cho mọi người.

Reactjs Rails NULL

Mục lục