วิธีการ Setup React ใน Ruby on Rails

การพัฒนา web application สมัยนี้ มันต้องมีฟีเจอร์ที่ interactive เยอะๆ และซับซ้อนมากๆ ครั้นจะมาใช้ Javascript เพียวๆ หรือ jQuery ที่ติดมากับ Framework ทั่วๆไป บางครั้งก็คงไม่พอ วันนี้ก็เลยจะมาแนะนำ วิธีการ setup React ใน Ruby on Rails

ขั้นแรก ใครยังไม่ install ruby และ rails ก็ install ก่อน ดูตัวอย่างการ install ได้ที่นี่

ใน rails version ล่าสุด (v6) มันมาพร้อมกับ webpacker อยู่แล้ว และสามารถใส่ option ที่สามารถ install react พร้อมกับ สร้าง application ได้เลย

rails new my_app --webpack=react

หลังจากที่คำสั่งทำงานเสร็จแล้ว ถ้าเราเข้าไปดูในโฟลเดอร์ app/javascript/packs จะพบไฟล์ hello_react.jsx ที่ generate มาให้

.
├── application.js
└── hello_react.jsx

แต่ไฟล์ hello_react.jsx นี้ยังไม่ถูกใช้ เดี๋ยวเราลองมา render react component นี้กัน

สร้าง controller ใหม่ ชื่อ static

rails g controller Static

จากนั้นไปที่ไฟล์ static_controller.rb เพิ่ม method index แบบนี้

class StaticController < ApplicationController
  def index
  end
end

สร้างไฟล์ view ใหม่ที่ app/views/static/index.html.erb และ include javascript ไฟล์ที่ render react component แบบนี้ ชื่อ hello_react ก็มาจากชื่อไฟล์ hello_react.jsx ถ้าจะเปลี่ยนชื่อไฟล์ก็ต้องเปลี่ยนตรง javascript_pack_tag ให้ตรงกัน

<%= javascript_pack_tag 'hello_react' %>

และต้องไปกำหนด index ที่ config/routes.rb ด้วย

Rails.application.routes.draw do
  root "static#index"
end

จากนั้นรัน server ด้วย rails s และไปที่ http://localhost:3000 เพื่อดูหน้าเว็บ

ทีนี้ถ้าเราลองแก้ component ดู จะพบว่า มันต้อง refresh และใช้เวลา compile ค่อนข้างนาน เดี๋ยวเราจะมาใช้ webpack-dev-server กัน ซึ่งถูก install มาให้แล้ว

bin/webpack-dev-server

หลังจากที่รัน webpack-dev-server รันขึ้นแล้ว เวลาแก้โค้ด Javascript มันจะ compile ให้อัตโนมัติและ refresh หน้าจอให้ด้วย

วิธีนี้เป็นวิธี setup แบบ Single page application ไม่ได้ render จาก server ถ้าอยากให้ component render จาก server เลยก็ต้องใช้ library เช่น react-rails หรือ react_on_rails