React 101 ก้าวแรกสู่ Front-End Developer (React Components, Props, State, Hook and calling REST API)

ก้าวแรกสู่การเป็น Front-End Developer ด้วย React นะครับ โดยจะเป็นพื้นฐานสุด ๆ (ไม่ได้ใช้ package อะไรติดตั้งเพิ่มเติมเลย) โดยเนื้อหาจะครอบคลุม Components, Props, State, Hook และการเรียก REST API

สามารถทำตามจาก clip live code ของผมได้นะครับ

Software Installation

• Node.js https://nodejs.org
• Visual Studio Code https://code.visualstudio.com/

เริ่มต้นเขียน React

สร้างโปรเจค

npx create-react-app react-basic
cd react-basic

รัน development server

npm start

เข้า URL http://localhost:3000 ด้วย web browser เห็นผลลัพธ์ดังภาพ

http://localhost:3000

MyBar Component

สร้างแถบด้านบนสำหรับเป็นเมนู ด้วยการสร้าง Component ที่มีชื่อว่า MyBar
สร้างไฟล์ src/MyBar.js

ตกแต่ง Component MyBar ด้วย CSS โดยตกแต่งให้เป็นแถบแนวนอนและเพิ่มสีเข้าไป โดยดูตัวอย่างจาก https://www.w3schools.com/css/css_navbar.asp
สร้างไฟล์ src/MyBar.css

แก้ไขไฟล์ src/App.js เพื่อเพิ่ม Component MyBar เข้าไปในหน้าแสดงผล

ผลลัพธ์ดังภาพ

MyBar Component

MyCard Component

สร้าง Component สำหรับเป็นการ์ดแสดงข้อมูล โดยดูตัวอย่างที่เป็น HTML และ CSS จาก https://www.w3schools.com/howto/howto_css_cards.asp
สร้างไฟล์ src/MyCard.js

สร้างไฟล์ src/MyCard.css

แก้ไขไฟล์ src/App.js เพื่อเพิ่ม Component MyCard เข้าไปหลาย ๆ อัน

แก้ไขไฟล์ src/App.css ให้รองรับการแสดงผลเป็น grid แบบ responsive
โดยถ้าหน้าจอขนาดเล็ก (576px) จะแสดง Component 1 อัน ต่อ 1 แถว
แต่ถ้าเป็นหน้าจอขนาดใหญ่ (992px) จะแสดง Component 3 อัน ต่อ 1 แถว

ผลลัพธ์ดังภาพ

MyCard Components

React Props

ก่อนอื่นให้ดาวน์โหลดไฟล์ข้อมูล attractions.json จาก:
https://melivecode.com/file/?f=json/attractions.json
จากนั้นนำไฟล์ไปใส่ที่ src/attractions.json

แก้ไขไฟล์ src/App.js เพื่ออ่านค่าจากไฟล์ json มาเก็บที่ตัวแปร data (บรรทัดที่ 5)

Props ใช้สำหรับการส่งค่าเข้าไปใน Component เพื่อนำค่าดังกล่าวไปแสดงผลใน Component โดยสามารถส่งค่าเข้าไปดังตัวอย่างบรรทัดที่ 13–17 (data เป็น array ของ object จึงสามารถใช้ index ในการดึงค่ามาแต่ละ object ได้) โดยใช้เป็นลักษณะของ attribute:

ที่บรรทัดที่ 13-17
name={data[0].name}
name คือ ชื่อของ attribute ที่ส่งค่าไป
{data[0].name} คือ ค่าที่ส่งเข้าไปกับ attribute

แก้ไขไฟล์ src/MyCard.js
เพิ่ม Props เข้าไปที่ parameter ของ function MyCard(props) ตามบรรทัดที่ 4 แล้วจะสามารถดึงค่า props ที่ส่งมาได้ (บรรทัดที่ 8–11)

ที่บรรทัดที่ 8-11
{props.title}
หลัง props. ที่เป็น title คือชื่อ attribute ที่ส่งมา
{props.title} จึงเป็นค่าของ attribute title ที่ส่งมา

ผลลัพธ์ดังภาพ

Card Components using data from json

แก้ไขไฟล์ src/MyCard.js โดยใช้ data.map เพื่อ loop ข้อมูลมาแสดงผล (บรรทัดที่ 13–15)

ผลลัพธ์ดังภาพ

Card Components using all data from json

React State, Hook and calling REST API

แทนที่จะเป็นการอ่านไฟล์ json สามารถเปลี่ยนมาเรียก REST API (GET) ได้จาก: https://www.mecallapi.com/api/attractions/

แก้ไขไฟล์ src/App.js

• เพิ่ม State data (บรรทัดที่ 7) เป็น array เพื่อใช้ในการเก็บข้อมูลที่ได้จากการเรียก REST API
• ใช้ useEffect Hook เพื่อให้มีการเรียก REST API และเก็บค่าที่ State data ทุกครั้งที่โหลดหน้าเว็บขึ้นมา

ผลลัพธ์บนหน้าเว็บยังเป็นเหมือนเดิม แต่เปลี่ยนมาเรียกใช้ REST API แทน แสดงว่าถ้ามีการเพิ่มเติมข้อมูลใน REST API หน้าแสดงผล Front-End ก็จะมีการเปลี่ยนแปลงด้วย

บทความโดย อ.ผศ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต