Giới thiệu về React.js

React.js là một thành viên mới và khá nổi tiếng gần đây trong thế giới "Javascript Frameworks", và sở dĩ React.js trở nên phổ biến bởi nó được biết đến với sự đơn giản dễ dàng tiếp cận.
Thông thường các mô hình Frameworks hoàn thiện thường phải là mô hình MVC, tuy nhiên với React thì nó chỉ hoạt động ở lớp V (View) và trên thực tế đã có rất nhiều người đã thay thế lớp V bằng React.
Một ứng dụng React được xây dựng trên 2 nguyên tắc chính là: ComponentsStates.
Components có thể được xây dựng từ các thành phần khác nhau hoặc tự xây dựng; State là cái mà Facebook gọi là One-way reactive data flow, nghĩa là giao diện người dùng sẽ thay đổi với mọi thay đổi của State.

Một điều đáng chú ý ở React là nó không yêu cầu bất kỳ một thư viện bổ sung nào vì thế React có thể được tích hợp với bất kỳ thư viện JS nào. Và tận dụng lợi thế này của React, chúng ta sẽ đưa nó vào Rails để xây dựng 1 ứng dụng đơn giản minh họa cho bài viết này.

Ứng dụng Demo: Mô hình theo dõi chi phí

Trong ứng dụng này chúng ta sẽ xây dựng 1 chương trình đơn giản để theo dõi các khoản chi phí; tất cả các bản ghi sẽ chỉ bao gồm ngày, tiêu đề và số tiền.
Một record sẽ được coi như 1 Credit nếu số tiền của nó lớn hơn 0, Dưới đây là hình minh họa UI của ứng dụng:

Nói chung, ứng dụng sẽ hoạt động như sau:

  • Khi người dùng thêm một bản ghi mới vào form hàng ngang trên thì, dữ liệu sẽ được thêm vào bảng ghi bên dưới
  • Người dùng có thể sửa bản ghi
  • Click vào nút Delete sẽ xóa bản ghi.
  • Thêm, chỉnh sửa hoặc xóa bản ghi sẽ được cập nhật ngay lập tức ở các box thông số trên cùng.

Khởi tạo React.js trong Rails

Đầu tiên, chúng ta tạo 1 dự án Rails và đặt tên là Accounts:

rails new accounts

Trong dự án này chúng ta sẽ sử dụng thư viện Twitter Boostrap. Trong bài này tôi không nói về việc cài đặt Bootstrap, nhưng bạn có thể cài đặt thông qua gem bootstrap-sass theo như hướng dẫn từ repo github chính thức
Sau khi khởi tạo thành công 1 dự án Rails, chúng ta sẽ tiến hành tích hợp React vào, ở đây tôi khuyến khích sử dụng react-rails vì chúng ta có thể tận dụng một số tính năng sẵn có của gem này. Ngoài ra nếu bạn không muốn sử dụng gem thì có thể tải React thông qua trang Official và sao chép vào trong thư mục javascript.
Nếu bạn đã từng xây dựng 1 ứng dụng Rails thì chắc chắn bạn sẽ biết cách cài đặt gem, hãy thêm gem react-rails vào Gemfile của bạn:

gem 'react-rails', '~> `1.0'

Sau đó, chạy bundle để cài đặt gem này:

bundle install

react-rails đi kèm với 1 kịch bản cài đặt, nó sẽ tạo ra file components.js và thư mục components nằm trong thư mục app/assets/javascripts, để khởi tạo React ta chạy lệnh sau:

reails g react:install

Nếu bạn để ý file application.js sau khi cài đặt xong, bạn sẽ thấy có sự thay đổi với vài dòng mới như sau:

//= require react
//= require react_uis
//= require components

Về cơ bản, nó sẽ thêm thư viện react vào bao gồm 2 thư viện là reactreact-ujs toàn bộ các file trong thư mục components.

Khởi tạo Resource

Tiếp theo chúng ta sẽ khởi tạo các bản ghi để làm cơ sở dữ liệu, bao gồm các trường: date,title,amount. Thay vì sử dụng scaffold, chúng ta sẽ sử dụng resource, để khởi tạo chúng ta chạy lệnh sau:

rails g resource Record title date:date amount:float

Sau khi chạy lênh xong, các thành phần mới được thêm vào bao gồm: Model Record, controller Record và routes.
Tiếp theo chúng ta cần chạy migrate để khởi tạo database

rake db:create db:migrate

Để khởi tạo sẵn các record để sử dụng, chúng ta truy cập vào rails console:

Record.create title: 'Record 1', date: Date.today, amount: 500
Record.create title: 'Record 2', date: Date.today, amount: -100

Như vậy ta đã tạo xong cơ sở dữ liệu sẵn sàng sử dụng, hãy bắt đầu khởi chạy ứng dụng của bạn:

rails server

Như vậy trong bài này chúng ta đã tích hợp được react vào ứng dụng rails thông qua gem hoặc download trực tiếp từ trang official của react.
Bài tiếp theo chúng ta sẽ đi sâu vào việc viết các Components sử  dụng cú pháp của React để tạo một vài thao tác cơ bản như:

  • Hiển thị toàn bộ dữ liệu
  • Thêm, sửa, xóa một record