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:
1 2 | rails new PROJECT_NAME -BT --webpack=react |
Ở 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:
1 2 3 | bundle add react-rails git add . && git commit -m "initial commit" |
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:install và react: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
1 2 | rails g react:install |
Đó 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:
1 2 | rails g resource User f_name:string l_name:string |
Thêm vào db/seeds.rb (sử dụng gem Faker):
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">require</span> <span class="token string">'faker'</span> <span class="token constant">ActiveRecord</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Base</span><span class="token punctuation">.</span>connection<span class="token punctuation">.</span>tables<span class="token punctuation">.</span><span class="token keyword">each</span> <span class="token keyword">do</span> <span class="token operator">|</span>t<span class="token operator">|</span> <span class="token constant">ActiveRecord</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Base</span><span class="token punctuation">.</span>connection<span class="token punctuation">.</span>reset_pk_sequence<span class="token operator">!</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span> <span class="token keyword">end</span> <span class="token number">25.</span>times <span class="token keyword">do</span> first_name <span class="token operator">=</span> <span class="token constant">Faker</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Name</span><span class="token punctuation">.</span>first_name last_name <span class="token operator">=</span> <span class="token constant">Faker</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Name</span><span class="token punctuation">.</span>last_name <span class="token constant">User</span><span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>f_name<span class="token punctuation">:</span> first_name<span class="token punctuation">,</span> l_name<span class="token punctuation">:</span> last_name<span class="token punctuation">)</span> <span class="token keyword">end</span> |
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:
1 2 | rails g react:component Users users:array |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">class</span> <span class="token class-name">Users</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span><span class="token constant">All</span> <span class="token constant">Users</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>ul<span class="token operator">></span> <span class="token punctuation">{</span>this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>users<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>user <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span> <span class="token operator"><</span>li key<span class="token operator">=</span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>id<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>`$<span class="token punctuation">{</span>user<span class="token punctuation">.</span>f_name<span class="token punctuation">}</span> $<span class="token punctuation">{</span>user<span class="token punctuation">.</span>l_name<span class="token punctuation">}</span>`<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Và set up ở users_controller.rb:
1 2 3 4 5 6 7 | <span class="token keyword">class</span> <span class="token class-name">UsersController</span> <span class="token operator"><</span> <span class="token constant">ApplicationController</span> <span class="token keyword">def</span> index <span class="token variable">@users</span> <span class="token operator">=</span> <span class="token constant">User</span><span class="token punctuation">.</span>all render component<span class="token punctuation">:</span> <span class="token string">'Users'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> users<span class="token punctuation">:</span> <span class="token variable">@users</span> <span class="token punctuation">}</span> <span class="token keyword">end</span> <span class="token keyword">end</span> |
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