สร้าง React App และเรียกใช้ API สำหรับแสดงข้อมูลน้องแมวหลาย ๆ ตัว😻 สำหรับมือใหม่
บทความนี้จะแนะนำการสร้าง React web app ง่าย ๆ สำหรับผู้เริ่มต้นโดยจะมีพื้นฐานการสร้างและใช้ React Component และ Props ร่วมกับการเรียกใช้ API เพื่อแสดงข้อมูลน้องแมวหลาย ๆ ตัว
หลังจากที่ทำตามบทความนี้แล้ว สามารถต่อยอดเพิ่มเติมเกี่ยวกับการสร้าง API ด้วยตนเองได้อีกบทความนึงของผมเอง (ยังเป็นเวอร์ชันภาษาอังกฤษอยู่ เดี๋ยวแปลไทยอีกทีนะครับ)
Software Installation
ติดตั้ง Software ที่จำเป็น แค่ตัวเดียวเลยครับ 555 แนะนำให้ลงตัวล่าสุดนิดนึงนะครับ
- Node.js https://nodejs.org
เริ่มต้นสร้าง React app
เปิด Command Prompt สำหรับเครื่อง Windows หรือเปิด Terminal สำหรับเครื่อง Mac เราจะใช้คำสั่ง npx create-react-app เพื่อสร้าง React app เปล่า ๆ ขึ้นมา โดยใส่ชื่อของ app ไว้ต่อท้ายดังตัวอย่างด้านล่างที่เป็นการสร้าง React app ที่ชื่อว่า cat-friends
npx create-react-app cat-friends
จะมี folder ชื่อเดียวกับ app ถูกสร้างขึ้นมา เข้าไปที่ folder แล้วทำการ start app ขึ้นมาด้วยคำสั่ง yarn start
cd cat-friends
yarn start
เมื่อ app ถูก start เสร็จแล้ว จะมีหน้า web browser เด้งขึ้นมาดังภาพด้านล่าง โดยสามารถเข้าใช้ app ผ่าน URL: localhost:3000
ติดตั้ง Tachyons
เพื่อให้ React app ของเรามีความสวยงามซะนิดนึง เราจะติดตั้ง module เพิ่มเติมที่มีชื่อว่า Tachyons ซึ่งเป็น css toolkit สำหรับจัด layout หน้า web app ของเรา โดยให้กลับมาที่หน้าจอ Command Prompt/Terminal กดปุ่ม Ctrl + C และกด Y เพื่อปิด app ที่ทำงานอยู่
ติดตั้ง Tachyons เข้าไปใน app ด้วยคำสั่ง
yarn add tachyons
start React app อีกครั้ง
yarn start
Cat Card
เราจะเริ่มสร้าง React component (stateless) สำหรับแสดงข้อมูลของน้องแมว โดยจะให้มีรูป ชื่อ และ email ของน้องแมว ดังภาพ
เราจะใช้ robohash.org เพื่อสร้างรูปแมวโดยใช้เป็น the URL https://robohash.org/<<anytext>>?set=set4 ให้เปลี่ยน <<anytext>> เป็นข้อความใดก็ได้และรูปของน้องแมวจะเปลี่ยนไปตามข้อความ
ตัวอย่างเช่น https://robohash.org/karnyong?set=set4
สร้าง src/Card.js สำหรับแสดงข้อมูลรูป ชื่อ และ email ของน้องแมว
แก้ไข src/index.js โดยเพิ่ม Card Component เข้าไปในหน้าหลัก
ดูผลลัพธ์การเรียกใช้ Card Component ได้ที่ web browser
Cat List
เราจะทำการแสดงรายการของ Cat Component เพื่อแสดงข้อมูลน้องแมวหลาย ๆ ตัว เริ่มต้นเราจะใช้ข้อมูล mockup จาก URL: https://jsonplaceholder.typicode.com/users โดยเปรียบได้กับการเรียกใช้ API เพื่อให้ได้มาซึ่งข้อมูลในรูปแบบของ JSON ที่มีข้อมูล dummy ของ user จำนวน 10 user โดยเราจะใช้เฉพาะแค่ id, name และ email ในตัวอย่างนี้
เพิ่ม src/CardList.js.
- สร้างตัวแปร array cats เป็น state ใน constructor of CardList Component class (stateful) (บรรทัดที่ 5–9) อธิบายเบื้องต้นเกี่ยวกับ state คือ เมื่อค่า state มีการเปลี่ยนแปลงบนหน้าจอที่มีการผูก state ไว้จะเปลี่ยนตามด้วย
- ใช้ method componentDidMount เพื่อเรียกใช้ API https://jsonplaceholder.typicode.com/users และบันทึกข้อมูลลง cats state. (บรรทัดที่ 12–16)
- แสดง Cat components โดยใช้ key, id, name และ email จาก cats state (บรรทัดที่ 18 เป็นต้นไป)
แก้ไข src/Card.js โดยใช้ Props {name, email, id} เพื่อรับค่าที่ส่งมาจาก CardList
แก้ไข src/index.js โดยลบ Card component ออกแล้วเพิ่ม CardList component เข้าไปแทน
ผลลัพธ์ที่ได้
Cat Search
ถัดมา ลองสร้าง SearchBox component สำหรับใช้ในการ filter ข้อมูลน้องแมว
สร้าง src/SearchBox.js.
แก้ไข src/CardList.js โดยให้เพิ่ม:
- searchfield state.
- onSearchChange เพื่อรองรับการเปลี่ยนแปลงของค่าที่ใส่ใน SearchBox component.
- เพิ่มตัวแปร searchfield เพื่อผูกค่ากับ state ในชื่อเดียวกัน (บรรทัดที่ 2).
- เพิ่มตัวแปร filteredCats เพื่อใช้ filter ข้อมูลแมวตามชื่อ (บรรทัดที่ 3–5).
- เพิ่ม SearchBox component ใน CardList component (บรรทัดที่ 9).
- ทำ Loop แจงแจงค่าใน filteredCats เพื่อแสดงข้อมูลน้องแมวหลาย ๆ ตัวด้วย Cat component (บรรทัดที่ 11 เป็นต้นไป)
กลับมา reload ที่ web browser เราจะสามารถค้นหาแมวด้วยชื่อได้แล้ว 😸
เสร็จเรียบร้อยแล้ว สามารถดาวน์โหลด source code ทั้งหมดได้จาก GitHub:
ถ้าอยากทดลองสร้าง API มาใช้ในตัวอย่างนี้ สามารถดูได้จากอีกบทความนึงของผมเอง (ยังเป็นเวอร์ชันภาษาอังกฤษอยู่ เดี๋ยวแปลไทยอีกทีนะครับ)
บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต
Reference:
https://reactjs.org/docs/components-and-props.html
https://github.com/coderrsid/RoboFriends