3 cách để sử dụng React với Ruby on Rails 5

Có một vài cách khác nhau để sử dụng React trong các ứng dụng Ruby on Rails. Trong bài đăng này, tôi sẽ giới thiệu 3 cách phổ biến nhất.

Gem react-rails là cách đơn giản và nhanh nhất để bắt đầu sử dụng React trong ứng dụng Rails của bạn. Nó sử dụng Rails asset mặc định và tự động chuyển JSX vào asset pipeline bằng cách sử dụng trình biên dịch Ruby Babel. Giả sử bạn đã có phiên bản mới nhất của Ruby và Rails gem đã được cài đặt, giờ là cách bạn bắt đầu với react-rails. Thêm gem vào Gemfile:

gem 'react-rails'

Cài đặt gem:

bundle install

Chạy đoạn scrip cài đặt react-rails

rails g react:install

Câu lệnh trên sẽ tạo một thư mục component, manifest file và thêm nó vào file application.js Sau đó tạo một tệp React component với đuôi là jsx và lưu lại trong app/assets/javascripts/components.

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

Cuối cùng, sử dụng component với phương thức react_component trong helper.

<%= react_component('HelloMessage', name: 'John') %>

Tham số đầu tiên của phương thức này là tên component, tham số thứ 2 là prop. Nó sẽ add 1 div với những class và prop liên quan, sau đó được react_ujs driver sữ dụng để gắn kết và render các component. Gem này cho phép bắt đầu với React một cách chậm rãi và kiểm tra những trường hợp bằng cách chuyển đổi view vào React component. Do đó bạn có thể sẽ rất hài lòng với gem này.

Một gem khác rất nổi tiếng cho việc tích hợp React với Rails. Sự khác biệt chính với react-rails là mặc định nó sử dụng EcmaScrip 6 (ES6) và tool của state-of-the-art JavaScript, bao gồm Webpack thay thế dựa hoàn toàn trên Rails asset pipeline. Nó cũng không dựa trên JQuery. Thay vì sử dụng Rails asset pipeline để biên dịch ES6, react_on_rails chỉ sử dụng để thêm vào việc biên dịch file JS của Webpack. Bạn có thể sử dụng npm để cài đặt thư viện Javascript, thay vì phải sử dụng gem hoặc download bằng tay và sau đó include chúng. Nó sẽ cho bạn bớt tiêu tốn thời gian để cài đặt và quản lý nhiều thứ khác nhau. Đầu tiên, bạn cần phải cài đặt node để mà có thể sử dụng npm để cài đặt các thư viện JS. Bạn có thể download node 1 cách trực tiếp từ website của họ hoặc cài đặt bằng npm. Một khi node đã được cài đặt, chúng ta có thể bắt đầu thêm gem vào trong Gemfile:

gem "react_on_rails", "~> 6"

Sau đó chạy đoạn lệnh sau để tạo ra package.json và Procfile.dev:

bundle install
rails generate react_on_rails:install
bundle && npm install
foreman start -f Procfile.dev

Chúng ta đang sử dụng foreman để chạy Webpack, cụ thể là Rails server. Bây giờ mọi thứ đã được chuẩn bị xong, bây giờ chúng ta có thể sử dụng React component. Dưới đây là một ví dụ cơ bản để hiển thị Hello với tên được truyền qua prop.

import React from 'react';

export default class HelloWorld extends React.Component {
  constructor(props, _railsContext) {
    super(props);
  }

  render() {
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
}

Chúng ta có thể sử dụng những phương thức helper react_component để render component vào trong view cùng với cách mà chúng ta đã làm với gem react_rails.

<%= react_component("HelloWorldApp", props: {name: 'John'}) %>

Lựa chọn thứ 3 để sử dụng React với Rails là tách riêng 2 phần back-end và front-end vào trong 2 app khác nhau. Backend có thể là 1 Rails app bình thường gọi đến API với JSON output hoặc cũng có thể là 1 Rails API-only app. Về phần frontent thì là 1 Express app chạy trên Nodejs, nó sử dụng React và trao đổi với Rails API. Thật sự thì việc buiding, running và maintain 2 app khác biệt nhau sẽ rất khó. Bù lại cũng có rất nhiều lợi ích. Việc tạo API dù sao cũng là 1 ý tưởng để sau này bạn có thể mở rộng ra và buid các client như là mobile app. Một cái Node app là một môi trường tự nhiên dành cho thư viện JS giống như React, do vậy bạn có thể sẽ cảm thấy thuận tiện với tool mới nhất của JS. Vì vậy cách thứ 3 này là cách phổ biến nhất để sử dụng React với Rails. Tuy nhiên việc nghiên cứu và phát triển theo cách nào là tùy bạn.

Tham khảo

Bài viết được dịch lại từ tác giả Hrishi Mittal https://learnetto.com/blog/3-ways-to-use-react-with-ruby-on-rails-5