เขียน React และ API ทำเว็บสำหรับ CRUD ข้อมูล (2022 Updated for new MUI and react-router-dom@6)

3 min readMar 7, 2022

บทความนี้จะเป็นพื้นฐานในการสร้างหน้า Web โดยใช้ React เพื่อทำการ CRUD ข้อมูล ซึ่งประกอบไปด้วย Create (สร้าง), Read (อ่าน), Update (แก้ไข) และ Delete (ลบ) ข้อมูล ผ่านการเรียกใช้ API ตัวจำลอง ที่ให้บริการอยู่บนเว็บ MeCallAPI.com (เว็บผมเองครับ 5555) ซึ่งเป็นการปรับปรุงเนื้อหาให้ล่าสุดจากบทความที่ผ่านมาของผมที่ link นี้นะครับ อัพเดท version ของ MUI ที่ปรับเยอะพอสมควร และ version ใหม่ของ react-router-dom@6 ครับ

สามารถดู clip แบบ Live Code ครับ

ถ้าอยากลองใช้ API สำหรับจำลองการทำ CRUD หรือ Authentication ก็เข้าไปดูรายละเอียดได้ที่ MeCallAPI.com เลยครับ

ส่วนผลลัพธ์ของบทความนี้ มีตัวอย่างให้ลองทดสอบได้ที่ https://www.mecallapi.com/crud/

Software Installation

Node.js https://nodejs.org
Postman https://www.postman.com/

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

สร้างโปรเจค

npx create-react-app react-crud
cd react-crud

ติดตั้ง package เพิ่มเติม

MUI (Material UI) สำหรับใช้แสดงส่วนประกอบต่าง ๆ บนหน้าจอ (เช่น กล่องข้อความ ปุ่ม เป็นต้น)
react-router-dom@6 สำหรับจัดการ Route หรือเส้นทางภายใน app ของเรา

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material 
npm install react-router-dom@6

รัน app ได้เลย

npm start

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

สร้างหน้า Read User และ Delete User

แก้ไขไฟล์ index.js โดยใส่ BrowserRouter เพื่อเริ่มใช้ react-router-dom@6 ในการจัดการ path ต่าง ๆ ในเว็บ

แก้ไขไฟล์ App.js โดยใส่ component Navbar และ Users ที่จะสร้างต่อจากนี้

สร้างไฟล์ Navbar.js สำหรับเป็น Component ส่วนของแถบด้านบน โดยใช้ Material UI App bar

สร้างไฟล์ Users.js สำหรับเป็น Component ส่วนของหน้าแสดงรายการ User โดยในหน้านี้ Code จะค่อนข้างเยอะนะครับ เพราะต้องการความสวยงามของ Material UI นิดนึงครับ 555

หน้านี้จะใช้ API สำหรับข้อมูลรายการ User ตามด้านล่าง (Read)
API URL: https://www.mecallapi.com/api/users
Method: GET

และ API สำหรับการลบข้อมูล (Delete) *API นี้ลบได้เฉพาะข้อมูลที่สร้างใหม่เท่านั้น
API URL: https://www.mecallapi.com/api/users/delete
Method: DELETE
ตัวอย่าง Body (JSON):

{
    "id": 11
}

อธิบาย Code ซักหน่อยนะครับ 555

กำหนด State (บรรทัดที่ 18) ชื่อว่า users และฟังก์ชัน setUsers สำหรับแก้ไขค่า users
กำหนดฟังก์ชัน useEffect (บรรทัดที่ 18–21) เป็นวิธีการของ React ที่เรียกว่า Effect Hook สำหรับการให้เรียกฟังก์ชัน useEffect หลังจากมีการโหลดหน้าเว็บขึ้นมา และในทุกครั้งที่มีการอัพเดทของค่าของ State ตัวใดก็ตาม เพื่อให้ข้อมูลที่แสดงอยู่บนหน้าเว็บมีการเปลี่ยนแปลงอยาก dynamic (ไม่ต้อง refresh หน้าใหม่)
กำหนดฟังก์ชัน UsersGet (บรรทัดที่ 23–31) เพื่อเรียก API เส้น https://www.mecallapi.com/api/users เพื่อนำค่าที่เป็นรายการของ users มาเก็บอยู่ใน State users
บรรทัดที่ 37–58 เป็นส่วนของการเรียก API เส้นที่ใช้สำหรับลบ user
บรรทัดที่ 90–108 เป็นการนำ State users มาแสดงทีละรายการเป็นแถวในตารางโดยการใช้ loop (map)

ผลลัพธ์ที่ได้จะเป็นหน้ารายการ User ดังภาพ

สร้างหน้าสำหรับ Create User

สร้างไฟล์ UserCreate.js เพื่อเป็น Component สำหรับหน้าสร้างข้อมูล User

แก้ไขไฟล์ App.js โดยใส่ Router จาก react-router-dom@6 เข้าไป และจัดการแยก Route สำหรับหน้า Users และ UserCreate

ทดสอบหน้าสร้างข้อมูล

สร้างหน้าสำหรับ Update User

สร้างไฟล์ UserUpdate.js เพื่อเป็น Component สำหรับหน้าแก้ไขข้อมูล User โดย code จะแทบเหมือนกับหน้า Create User มีแก้ API จากเส้น create เป็น update

API สำหรับการแก้ไขข้อมูล User (Update)
API URL: https://www.mecallapi.com/api/users/update
Method: PUT
ตัวอย่าง Body (JSON):

{
    "id": 11,
    "fname": "Cat",
    "lname": "Gato",
    "username": "cat.gato@mecallapi.com",
    "email": "cat.gato@mecallapi.com",
    "avatar": "https://www.mecallapi.com/users/cat.png"
}

และ API สำหรับการเรียกดูข้อมูล User โดยอ้างอิงจาก id (Read)
API URL: https://www.mecallapi.com/api/users/1
Method: GET
*เลขที่อยู่ท้าย URL จะใช้เป็น id ในการอ้างอิงเพื่อแสดงข้อมูล User

กำหนดฟังก์ชัน useEffect (บรรทัดที่ 11–23) เพื่อให้หลังจากมีการโหลดหน้าเว็บขึ้นมา และในทุกครั้งที่มีการอัพเดทของค่าของ State ตัวใดก็ตาม และรวมถึง Props ด้วย (ยกเว้น id เป็นตัวยกเว้น ที่ใส่ใว้ในวงเล็บเหลี่ยม [ ] ท้ายฟังก์ชัน) เพื่อให้ข้อมูลที่แสดงอยู่บนหน้าเว็บมีการเปลี่ยนแปลงทันที
กำหนดฟังก์ชัน handleSubmit (บรรทัดที่ 25–52) สำหรับใช้เรียก API เส้น Update User

แก้ไขไฟล์ App.js โดยเพิ่มหน้า UserUpdate เข้าไปใน Routes

ทดสอบการแก้ไขข้อมูล