การสร้างตารางแสดงข้อมูลจาก API ด้วย React 17

2 min readMay 28, 2021

แนะนำเนื้อหาในบทความ

จากบทความ ทดลองใช้งาน Angular, React, Vue และ Svelte ในการสร้างตารางแสดงข้อมูลที่ได้รับจาก API บทความนี้จะลงรายละเอียดในส่วนของ React 17 ครับ

เริ่มติดตั้งและสร้างโปรเจ็ค

ทำการสร้าง app ชื่อว่า my-table โดยใช้คำสั่งด้านล่างนี้

npx create-react-app my-table

เมื่อสร้างเรียบร้อยแล้ว เข้าไปยัง Folder ของ app และใช้คำสั่งด้านล่างนี้เพื่อดูผลลัพธ์

cd my-table
npm start

ซึ่งระบบจะทำการเปิด Browser ให้อัตโนมัติที่ URL: http://localhost:3000/ พร้อมกับแสดงหน้าจอเริ่มต้นให้

สร้างหน้าจอที่จะแสดงผลตาราง

ภายใต้ Folder: src ให้ทำการสร้าง Folder: pages จากนั้นสร้างไฟล์ Table.js (ตามตัวอย่างไฟล์ที่มีมาให้จะตั้งชื่อไฟล์ขึ้นต้นด้วยตัวอักษรพิมพ์ใหญ่) ซึ่ง Folder Structure ของ React ในตัวอย่างนี้ จะเป็นดังภาพด้านล่างนี้

เพิ่มโค้ดพื้นฐานของ Component ในไฟล์ Table.js ตามโค้ดด้านล่างนี้

ในบทความนี้จะใช้ Function Component นะครับ ดูเหมือน Document จากเว็บ https://reactjs.org/ จะเน้นให้ใช้รูปแบบนี้มากกว่า Class Component

หมายเหตุ เพื่อให้การใช้งาน Visual Studio Code กับ React โดยไม่มีปัญหาเรื่องการจัด Format ของ Code แนะนำให้ติดตั้ง Extension: Prettier Code formatter

การแสดงผลหน้าจอ table ที่เราสร้างขึ้นต้องทำการ Import Component Table เข้ามาและทำการเรียกใช้งาน โดยให้แก้ไขไฟล์ index.js ที่บรรทัดที่ 5 และ แก้ไขบรรทัดที่ 10 ดังนี้

ถึงจุดนี้เมื่อเราทำการแก้ไขไฟล์และ Save หน้าจอที่ปรากฏบน Browser จะเกิดการ Refresh อัตโนมัติ หรือเรียกว่า Live Reload และแสดงผลลัพธ์หน้าจอ Component Table ซึ่งตอนนี้จะไม่มีอะไรนอกจากข้อความ Table

เรียกใช้ข้อมูลจาก API

ทำการ Import useState useEffect เพื่อทำการกำหนด state ให้กับตัวแปร ซึ่งจะใช้งานบรรทัดที่ 4–6 ส่วนของการเรียกใช้งาน API จะอยู่ในบรรทัดที่ 8–22 ซึ่งจะทำงานภายใต้ useEffect (เปรียบเสมือน componentDidMount ในรูปแบบ Class) ดังตัวอย่างในโค้ดด้านล่างนี้

ซึ่งเมื่อถึงขั้นตอนนี้หากตรวจสอบที่ Browser ในส่วนของ console ซึ่งเป็นผลมาจากโค้ดในบรรทัดที่ 15 จะพบว่ามีข้อมูลมาพร้อมให้แสดงแล้ว จากนั้นให้แก้ไขไฟล์ Table.js เพิ่มเติม เพื่อนำข้อมูลใส่ไปในตารางเพื่อแสดงผล โดยใช้โค้ดด้านล่างนี้

ซึ่งเมื่อถึงจุดนี้จะได้ตารางหน้าตาปกติ ดังภาพ

การใช้งานร่วมกับ Bootstrap Framework

ให้ติดตั้ง React Bootstrap โดยใช้คำสั่งด้านล่างนี้

npm install react-bootstrap bootstrap@4.6.0

เมื่อติดตั้งแล้วให้เพิ่มโค้ดตามโค้ดด้านล่างนี้

ในบรรทัดที่ 2 เป็นการ Import bootstrap มาใช้งาน ซึ่งในขั้นตอนนี้หากต้องการให้ทั้งเว็บไซต์ใช้งานได้โดยไม่ต้อง Import ในแต่ละหน้าให้ไปทำการ Import โค้ดนี้ที่ไฟล์ index.js

สำหรับโค้ดในบรรทัดที่ 3 เป็นการเรียกใช้งาน Component Table มาใช้ แต่เนื่องด้วยผมใช้ชื่อ Function Table หาก import Table เฉยๆ จะชื่อซ้ำกัน เลยใช้ชื่อว่า TableBootstrap จากนี้นำ TableBootstrap ไปแทน Tag table ที่เป็น HTML ปกติ ในบรรทัดที่ 32 และ 59

สำหรับการใช้งาน React Bootstrap สามารถศึกษาข้อมูลเพิ่มเติมได้จาก https://react-bootstrap.github.io/components/table/

ถึงจุดนี้ตารางจะแสดงผลตามรูปแบบของ Bootstrap Framework แล้ว ดังภาพ

การ Build สำหรับ Production

ให้ทำการเพิ่ม property homepage ในไฟล์ package.json และระบุ url ของเว็บเราก่อน ดังโค้ดด้านล่างนี้

“name”: “my-table”, 
“homepage”: “http://127.0.0.1:5500/build/", 
“version”: “0.1.0”,

จากนั้นใช้คำสั่งด้านล่างนี้

npm run build

ระบบจะทำการสร้าง Folder: build พร้อมไฟล์ต่างๆ ให้ เป็นแบบ Static ซึ่งสามารถทำการ Upload ไฟล์ดังกล่าวไปยัง Hosting ได้เลย

โค้ดทั้งหมดของบทความนี้อยู่ที่ https://github.com/wutthiponghub/table-react