หัดเขียน React

React เป็น Javascript/(and Typescript) library เพื่อสร้างและจัดการ web UI ที่คนใช้กันเยอะแยะมากมาย แต่เนื่องจากผมทำส่วน Backend ซะมากกว่าในช่วงหลายปีที่ผ่านมา ล่าสุดที่เขียน frontend เป็นงานเป็นการคือสมัย AngularJS 1.x โน้น เลยลองมาหัดเขียน ซะหน่อย

เครื่องไม้เครื่องมือเดี๋ยวนี้ก็จะมีหลักๆคือ NodeJS แน่นอนเป็น Javascript Runtime ที่มีเครื่องมืออย่าง npm, yarn เอาไว้จัดการ dependencies จัดการ project เพื่อ build Typescript ออกไปเป็น JS ที่ browser อ่านออกอีกที

เริ่มแรกไปติดตั้ง NodeJS และ yarn ให้ได้ก่อนจากนั้นจะสร้าง React project ก็แค่สั่งแบบนี้

yarn create react-app clock-app --template typescript

โดยที่ clock-app คือชื่อโปรเจ็ค และ --template typescript คืออ็อปชั่นบอกว่าจะใช้ TypeScript นะ มันจะได้เจนไฟล์ config และ dependencies ต่างๆสำหรับใช้เขียน TypeScript ให้

ก็จะได้ folder clock-app ที่ข้างในมีของประมาณนี้

.
├── README.md
├── node_modules
├── package.json
├── public
├── src
    ├── App.css
    ├── App.test.tsx
    ├── App.tsx
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── react-app-env.d.ts
    ├── reportWebVitals.ts
    └── setupTests.ts
├── tsconfig.json
└── yarn.lock

จริงๆมันก็มีโค้ดใน App.tsx กับ index.tsx มาให้แล้วแหละ แต่เดี๋ยวมาสรุป concept คร่าวๆกันก่อน

React จะให้เราแบ่ง UI ออกเป็น component ซึ่งจริงๆวิธีสร้าง component คือเขียน function ธรรมดานี่แหละให้ return โครงสร้าง UI ในรูปแบบของ JSX ออกมา ซึ่ง JSX ก็จะแบบ HTML Element เนี่ยแหละแต่เป็นการเอา Component มาประกอบร่างกันแทน HTML Element ปกติ

ซึ่ง React จะเอาไปจัดการ render ให้แล้วในการ render React ก็จะจัดการ life cycle ของ component ให้เรา เราสามารถใช้ Hook เพื่อเขียนโค้ดเพิ่มเติมให้ Component เราจัดการ state จัดการ effect หรือ ส่วนอื่นๆของ component life cycle ได้

ตัวอย่างเช่นเดี๋ยวเราจะสร้าง Component ชื่อ Clock แล้วให้แสดงเวลาปัจจุบันโดยเปลี่ยนไปเรื่อยๆทุกวินาที โค้ดเราอยู่ในไฟล์ src/Clock.tsx

// import useEffect กับ useState hook
import { useEffect, useState } from "react";

// เขียน Component ของเราเป็น function Clock
function Clock() {
  // เราใช้ useState เพื่อเพิ่ม state ให้กับ component โดยเริ่มต้นให้มีค่าเป็น new Date()
  // แล้วใช้ date เพื่อแสดงใน UI ของ component กับ ใช้ updateDate เพื่อเปลี่ยน state
  let [date, updateDate] = useState(new Date());

  // เราใช้ useEffect เพื่อจัดการบางอย่างเมื่อ component เราถูก insert หรือ remove ออกจาก UI tree
  useEffect(() => {
    // เราสร้าง setInterval เพื่อ udpate date state ค่าใหม่ทุกๆ 1 วินาที
    let timerID = setInterval(() => updateDate(new Date()), 1000);

    // เราต้อง return function สำหรับ clear interval ด้วยเมื่อ component ถูกเอาออกจาก UI tree
    return () => clearInterval(timerID);
  });

  // สุดท้ายเราเขียนส่วน UI element ของ component ของเรา โดยที่ {} ใช้เพื่อ render TypeScript value
  return (
    <div>
      <h1>Clock</h1>
      <h1>{date.toLocaleString()}</h1>
    </div>
  );
}

// สุดท้าย export Component เราออกไปด้วยสำหรับ module นี้
export default Clock;

จากนั้นเราไปแก้โค้ดใน index.tsx ให้มาเรียกใช้ Clock component ของเราแบบนี้

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Clock from './Clock';

ReactDOM.render(
  <React.StrictMode>
    <Clock />
  </React.StrictMode>,
  document.getElementById('root')
);

แล้วลองสั่งให้รันด้วย yarn start ทีนี้เข้าไปที่ localhost:3000 ก็จะได้หน้าเว็บที่แสดง clock แบบนี้