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

เริ่มต้นเขียน 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 ก็จะมีการเปลี่ยนแปลงด้วย

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

--

--

Lecturer at Digital Innovation Technology, Rangsit University

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karn Yongsiriwit

Karn Yongsiriwit

474 Followers

Lecturer at Digital Innovation Technology, Rangsit University