Rails 6 và ReactJS

Tram Ho

Rails phiên bản 6 đã ra mắt! Một trong những điều thú vị nhất về bản phát hành mới nhất của Rails là việc đối xử với JavaScript như một công dân hạng nhất. Webpacker mặc định được thêm vào các dự án khởi động với Rails CLI, cùng với hỗ trợ sử dụng Angular, React hoặc Vue. Bây giờ chúng ta sẽ thử tạo 1 ứng dụng Rails đơn giản với sự hỗ trợ của React.

Trước tiên, bạn sẽ muốn đảm bảo rằng bạn cập nhật lên Rails 6. Bạn sẽ cần cài đặt Ruby 2.5 trở lên: nhập ruby -v vào màn hình terminal để xem bạn đang làm việc với phiên bản nào. Mình sử dụng RVM nên để cài đặt phiên bản chỉ định mà mình muốn mình sẽ sử dụng câu lệnh rvm install 2.6.3. Tiếp theo là update Rails CLI: gem update rails. Bây giờ bạn thử nhập rails -v trong màn hình terminal để kiểm tra phiên bản Rails xem chúng ta đã có Rails 6.0.0 hoặc phiên bản cao hơn chưa.

Nếu đã ổn, chúng ta tiến hành tạo mới 1 ứng dụng:

Ở câu lệnh trên mình đã thông báo cho rails bỏ qua testing framework , bỏ qua bundling , và cài đặt các dependencies cho React. Điều tiếp theo chúng ta sẽ muốn làm là thêm gem react-rails, kết hợp một trình tạo cho các thành phần React vào danh sách tasks Rails có sẵn cũng như cho phép chúng ta thực hiện render phía máy chủ với React. Ok giờ chúng ta thực hiện add gem và đặt project trong sự kiểm soát của git:

Trên màn hình terminal nếu bạn nhập rails g --help , sẽ thấy 2 câu lệnh được gợi ý mới là: react:installreact:component, chúng ta sẽ chạy câu lệnh đầu tiên để cài đặt và nó sẽ sinh ra 1 vài file mới trong project của chúng ta

Đó là tất cả những gì chúng ta cần làm để cài đặt. Nếu bạn xem qua package.json trong thư mục gốc của dự án, bạn sẽ thấy tất cả các dependencies cần thiết của React như Babel và Webpack đều đã được thêm. Ngoài ra thì câu lệnh trên đã thêm 1 vài dòng vào app/javascript/packs/application.js.

Chúng ta sẽ tạo nhanh 1 số dữ liệu để hiển thị bằng React:

Thêm vào db/seeds.rb (sử dụng gem Faker):

Chúng ta cần chạy rails db:migrate && rails db:seed để tạo bảng và khởi tạo dữ liệu ảo. Bây giờ chúng ta thử tạo 1 component bằng câu lệnh rails generate ... quen thuộc:

Bằng cách chỉ định users:array , chúng ta nói rằng component sẽ mong đợi một prop gọi users là một mảng. Nếu bạn xem qua tệp đã được tạo, bạn sẽ thấy cài đặt này trong các loại prop.

Chúng ta sẽ set up component như sau:

Và set up ở users_controller.rb:

Ok giờ bạn chạy rails s và vào đường dẫn http://localhost:3000/users trong trình duyệt sẽ thấy danh sách tên của tất cả user được hiển thị.

Tài liệu tham khảo

https://medium.com/swlh/getting-started-with-rails-6-and-react-afac8255aecd

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo