Guide to Rails and Preact (Part 1)

💡บทความนี้จะแนะนำไลบราลีที่ชื่อ Preact ซึ่งถือเป็นไลบราลี JavaScript ขนาดเล็กและทันสมัยให้กับ Frontend Developer ได้รู้จักกัน โดยในบทความจะแนะนำวิธีการติดตั้ง Preact บน Rails

เริ่มต้น

• สร้างโปรเจคใหม่

$ rails new book_store --wepacker -d postgresql

• ติดตั้ง Preact และปลักอินสำหรับ compile

$ yarn add preact @babel/plugin-transform-react-jsx

• เพิ่มปลักอิน plugin-transform-react-jsx เข้าไปยัง babel.config.js

plugins: [
  ...,
  [
    "@babel/plugin-transform-react-jsx",
    { "pragma": "h" }
  ]
]

• สร้าง controller ชื่อ Pages และ action ชื่อ index

$ rails generate controller Pages index

• กำหนด routes ในการเข้าถึงใน config/routes.rb

Rails.application.routes.draw do
  root to: 'pages#index'
end

• กำหนด file extensions ของ jsx เพิ่มเติมใน config/webpacker.yml

...
extensions:
  - .js
  - .jsx
...

• สร้าง interactive component Box โดยสร้างไฟล์ app/javascripts/packs/box.jsx ซึ่งจะรับค่าจากผู้ใช้ในช่อง input และเมื่อกดปุ่ม จะนำข้อความที่ได้ไปแสดงผลในบริเวณที่กำหนดไว้

import { h, render, Component } from 'preact'

class Box extends Component {
  state = { value: '', name: '' }

  onInput = (event) => {
    this.setState({ value: event.target.value })
  }

  onSubmit = (event) => {
    event.preventDefault();
    this.setState({ name: this.state.value })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input type="text" value={this.state.value} onInput={this.onInput}></input>
          <button type="submit">อัพเดต</button>
        </form>

        <h1>แสดงผลที่นี่: {this.state.name}</h1>
      </div>
    );
  }
}

document.addEventListener('DOMContentLoaded', () => {
  render(<Box />, document.body)
})

• เพิ่ม tag สำหรับโหลด box ใน app/view/home/index.html.erb

<%= javascript_pack_tag 'box' %>

• รัน server และเข้าไปยัง http://localhost:3000

ทดสอบการทำงาน Preact

สำหรับในบทความนี้ก็จะแนะนำการติดตั้งไว้เพียงเท่านี้ สำหรับในบทความหน้า เราจะมาลงลึกในการใช้งาน Preact กัน 🤩 👉 Part 2

Referecnes

• PREACT