ทำไมต้องวางโครงสร้างแอปด้วย Component
ก่อนจะเริ่มเขียนโค้ด เราต้องเข้าใจก่อนว่า React (เครื่องมือสร้างหน้าเว็บแบบแบ่งเป็นส่วนย่อย) ทำงานอย่างไร การเขียนแอปด้วย React เหมือนกับการต่อเลโก้ครับ เราไม่ได้สร้างบ้านทั้งหลังในชิ้นเดียว แต่เราแยกสร้างเป็นผนัง หลังคา และประตู
การแยกชิ้นส่วนแบบนี้เรียกว่า Component (ชิ้นส่วนของหน้าจอที่นำไปใช้ซ้ำได้) มันช่วยให้เราจัดการโค้ดได้ง่ายขึ้น ถ้าปุ่มกดมีปัญหา เราก็แค่เข้าไปแก้ไขที่ไฟล์ของปุ่มนั้น ไม่ต้องไปรื้อโค้ดทั้งหน้าเว็บให้เหนื่อย
ลองนึกภาพเว็บขายของออนไลน์ดูครับ ส่วนหัวที่มีโลโก้ ส่วนรายการสินค้า และส่วนท้ายของหน้า ทั้งหมดนี้คือ Component แยกกัน การวางแผนแบบนี้จะทำให้โปรเจกต์ของคุณดูเป็นระเบียบและไม่มั่วเวลาต้องกลับมาแก้ไขในอนาคตครับ
วางแผนโครงสร้างแอป E-Commerce
ขั้นตอนแรกของการพัฒนาคือการวาดภาพ Wireframe (ร่างแบบโครงร่างหน้าจอ) ออกมาก่อนครับ เราต้องรู้ว่าหน้าเว็บของเรามีส่วนประกอบอะไรบ้าง และแต่ละส่วนควรอยู่ตรงไหนของหน้าจอ
สำหรับเว็บขายของ เราควรแบ่งโครงสร้างเป็น 3 ส่วนหลัก คือ Header (ส่วนบนของเว็บ), ProductList (รายการสินค้า), และ Footer (ส่วนล่างของเว็บ) การวางแผนแบบนี้ช่วยให้เราเห็นภาพรวมก่อนลงมือเขียนจริง
มือใหม่มักพลาดตรงที่พยายามเขียนทุกอย่างรวมกันในไฟล์เดียวครับ วิธีแก้คือให้จดลงกระดาษก่อนว่าเราต้องการกี่ส่วน แล้วค่อยสร้างไฟล์แยกสำหรับแต่ละส่วนตามแผนที่วางไว้
- วาดรูปหน้าจอลงบนกระดาษ
- แบ่งส่วนประกอบเป็นกล่องสี่เหลี่ยม
- ตั้งชื่อส่วนประกอบเหล่านั้นให้ชัดเจน
ผลลัพธ์ที่ได้คือผังงานที่บอกเราว่าต้องสร้างไฟล์อะไรบ้าง ทำให้การเริ่มเขียนโค้ดมีความชัดเจนและไม่สับสนครับ
สร้าง Component แรกด้วย React
เมื่อได้แผนงานแล้ว เรามาเริ่มเขียน Function Component (ฟังก์ชันที่ทำหน้าที่สร้างหน้าจอ) กันครับ ใน React เราจะใช้ภาษา JSX (โค้ดที่หน้าตาเหมือน HTML แต่เขียนใน JavaScript) เพื่อกำหนดว่าหน้าจอควรแสดงผลอะไร
หัวใจสำคัญคือการสร้างฟังก์ชันที่คืนค่าสิ่งที่ต้องการแสดงผลออกมาครับ โค้ดที่เขียนจะดูสะอาดและอ่านง่าย เพราะเราแยกงานออกเป็นส่วนๆ อย่างชัดเจนตามที่เราวางแผนไว้ในขั้นตอนก่อนหน้า
นี่คือตัวอย่างการสร้าง Component ชื่อ ProductItem เพื่อแสดงข้อมูลสินค้าหนึ่งชิ้นในรายการของเราครับ
// ไฟล์ ProductItem.jsx
function ProductItem() {
return (
<div>
<h2>ชื่อสินค้า</h2>
<p>ราคา: 100 บาท</p>
</div>
);
}
export default ProductItem; // ส่งออกไฟล์ไปใช้ที่อื่น
โค้ดด้านบนคือการสร้างกล่องแสดงชื่อและราคาครับ เราใช้ function เพื่อประกาศส่วนประกอบ และใช้ return เพื่อบอกว่าจะให้แสดงอะไรบนหน้าจอ จากนั้นใช้ export เพื่อให้หน้าอื่นเรียกใช้งานได้
การประกอบร่าง Component เข้าด้วยกัน
เมื่อเรามีชิ้นส่วนย่อยๆ แล้ว ขั้นตอนต่อไปคือการนำมาประกอบกันใน App Component (ชิ้นส่วนหลักที่รวมทุกอย่างเข้าด้วยกัน) เปรียบเหมือนการเอาเลโก้ที่เราสร้างไว้มาวางต่อกันให้เป็นบ้านที่สมบูรณ์
เราจะทำการ import (นำเข้าไฟล์จากที่อื่น) เข้ามาในไฟล์หลัก เพื่อบอกว่าหน้าจอของเราจะประกอบไปด้วยอะไรบ้าง วิธีนี้ทำให้ไฟล์หลักของเราไม่ยาวจนเกินไปและดูสะอาดตา
จุดที่มือใหม่มักจะลืมคือการใส่แท็กเปิดและปิดให้ถูกต้องครับ ถ้าเราลืมปิดแท็ก หน้าเว็บจะแสดงผลผิดพลาดหรือขึ้นหน้าจอว่างเปล่า ให้ตรวจสอบเสมอว่าทุก Component ที่เปิดมา ต้องมีเครื่องหมายปิดให้ครบถ้วน
// ไฟล์ App.jsx
import ProductItem from './ProductItem';
function App() {
return (
<div>
<h1>ร้านค้าของฉัน</h1>
<ProductItem /> <!-- เรียกใช้ชิ้นส่วนสินค้า -->
<ProductItem />
</div>
);
}
ในโค้ดนี้ เรานำ ProductItem มาวางซ้อนกันสองครั้งครับ ผลลัพธ์คือหน้าเว็บจะแสดงรายการสินค้าสองชิ้นโดยอัตโนมัติ ซึ่งนี่คือพลังของการนำกลับมาใช้ใหม่ใน React ครับ
รับมือกับข้อมูลด้วย Props
การเขียนโค้ดแบบแข็งตัว (Fix code) คือสิ่งที่เราควรหลีกเลี่ยงครับ เราต้องการให้ ProductItem แสดงสินค้าที่แตกต่างกันได้โดยไม่ต้องเขียนโค้ดใหม่ทุกครั้ง เราจึงต้องใช้ Props (ตัวแปรที่ส่งข้อมูลเข้าไปใน Component)
คิดซะว่า Props คือการส่งค่าผ่านพารามิเตอร์ของฟังก์ชันครับ เราส่งชื่อสินค้าและราคาจากหน้าหลักเข้าไปข้างใน Component เพื่อให้มันแสดงผลตามข้อมูลที่เราต้องการในแต่ละจุด
มือใหม่มักจะงงว่าส่งค่าอย่างไร ให้จำไว้ว่าเราส่งเหมือนการเขียน Attribute (คุณสมบัติของแท็ก HTML) เช่น name="เสื้อ" แบบนี้ครับ แค่นี้ Component ของเราก็มีความยืดหยุ่นสูงขึ้นมาก
// การส่งข้อมูลเข้าไป
<ProductItem name="เสื้อ" price="200" />
// การรับข้อมูลมาแสดงผล
function ProductItem(props) {
return (
<div>
<h2>{props.name}</h2>
<p>ราคา: {props.price} บาท</p>
</div>
);
}
สังเกตว่าเราใช้ปีกกา { } เพื่อดึงค่าจาก props มาแสดงครับ วิธีนี้ช่วยให้เราสร้างรายการสินค้าจำนวนมากได้ด้วยโค้ดเพียงไม่กี่บรรทัด ซึ่งเป็นหัวใจสำคัญของการเขียนโปรแกรมที่ดีครับ
สรุป: การนำไปใช้จริงในโปรเจกต์
เราได้เรียนรู้วิธีการวางโครงสร้างและประกอบร่าง Component แล้วครับ หัวใจสำคัญคือการคิดแบบแยกส่วนและนำมาประกอบกันอย่างเป็นระบบ เพื่อให้แอปของคุณขยายขนาดได้ง่ายในอนาคต
ลองนำแนวคิดนี้ไปใช้กับโปรเจกต์ Task Management System (ระบบจัดการรายการสิ่งที่ต้องทำ) ดูครับ ให้คุณลองแยกส่วนประกอบเป็น TaskInput (ช่องกรอกงาน) และ TaskList (รายการงานที่ต้องทำ) แล้วลองส่งข้อมูลผ่าน Props ดู
การฝึกเขียนบ่อยๆ คือทางลัดเดียวที่จะทำให้คุณเก่งขึ้นครับ อย่ากลัวที่จะลองผิดลองถูก เพราะทุกบั๊กที่แก้ได้คือบทเรียนที่สำคัญที่สุดสำหรับการเป็นโปรแกรมเมอร์มืออาชีพครับ
