เริ่มต้นเขียนโปรแกรมด้วย React: สร้างโปรเจกต์แรกแบบมืออาชีพด้วย Vite

ทำความรู้จักกับ React เครื่องมือสร้างเว็บยอดนิยม

หากเปรียบเทียบการสร้างเว็บไซต์เหมือนกับการสร้างบ้าน React คือชุดตัวต่อ Lego ที่ช่วยให้เราประกอบบ้านได้เร็วและเป็นระบบมากขึ้น โดยปกติแล้วการเขียนเว็บไซต์ด้วย HTML, CSS และ JavaScript แบบดั้งเดิมอาจจะทำให้โค้ดของเราพันกันยุ่งเหยิงเมื่อโปรเจกต์มีขนาดใหญ่ขึ้น แต่ React ถูกออกแบบมาเพื่อแก้ปัญหานี้โดยเฉพาะ

React (ไลบรารีสำหรับสร้างส่วนติดต่อผู้ใช้) จะแบ่งหน้าเว็บของเราออกเป็นส่วนย่อยๆ ที่เรียกว่า Component (ส่วนประกอบ) ซึ่งแต่ละส่วนสามารถแยกกันทำงานและนำกลับมาใช้ใหม่ได้ เช่น ปุ่มกด หรือแถบเมนู สิ่งนี้ทำให้โปรแกรมเมอร์ทำงานได้ง่ายขึ้นมากเพราะเราไม่ต้องเขียนโค้ดซ้ำไปซ้ำมา และยังช่วยให้เว็บแสดงผลได้รวดเร็วทันใจผู้ใช้งาน

การเรียนรู้ React เป็นทักษะที่ จำเป็นอย่างยิ่ง สำหรับใครที่อยากก้าวเข้าสู่สายงาน Frontend Developer (นักพัฒนาส่วนหน้าเว็บที่ผู้ใช้มองเห็น) เพราะบริษัทเทคโนโลยีส่วนใหญ่ในปัจจุบันต่างใช้ React เป็นมาตรฐานหลักในการพัฒนาผลิตภัณฑ์ หากคุณเข้าใจพื้นฐานนี้ คุณก็จะมีโอกาสสมัครงานในบริษัทชั้นนำได้ง่ายขึ้นมาก

เตรียมความพร้อมก่อนเริ่มเขียนโค้ด

ก่อนจะเริ่มสร้าง Hello World เราต้องมีเครื่องมือที่จำเป็นเสียก่อน สิ่งที่ต้องมีคือ Node.js (สภาพแวดล้อมที่ทำให้รัน JavaScript นอกเบราว์เซอร์ได้) ซึ่งเปรียบเสมือนเครื่องมือช่างที่ช่วยให้เราติดตั้งไลบรารีต่างๆ ของ React ได้อย่างสะดวก คุณสามารถดาวน์โหลดเวอร์ชัน LTS (Long Term Support) ได้จากเว็บไซต์ทางการของ Node.js

เมื่อติดตั้งเสร็จแล้ว ให้เปิด Terminal (โปรแกรมพิมพ์คำสั่งสั่งงานคอมพิวเตอร์) ขึ้นมาเพื่อเช็คว่าเครื่องเราพร้อมหรือยัง โดยพิมพ์คำสั่ง node -v หากปรากฏตัวเลขเวอร์ชันขึ้นมา แสดงว่าผ่านด่านแรกแล้ว นอกจากนี้คุณต้องมี VS Code (โปรแกรมแก้ไขโค้ดที่โปรแกรมเมอร์นิยมใช้) เพื่อใช้ในการพิมพ์และจัดการไฟล์โปรเจกต์ของคุณ

จุดที่มือใหม่มักพลาดคือการลืมเช็คว่าตัวเองอยู่ในโฟลเดอร์ไหน ให้จำไว้เสมอว่าก่อนจะเริ่มสร้างโปรเจกต์ ให้ใช้คำสั่ง cd (Change Directory) เพื่อย้ายเข้าไปในโฟลเดอร์ที่คุณต้องการเก็บงานก่อนเสมอ เพื่อความเป็นระเบียบและป้องกันการหาไฟล์ไม่เจอในภายหลัง

สร้างโปรเจกต์แรกด้วย Vite

ในปัจจุบันเราไม่จำเป็นต้องตั้งค่า React เองตั้งแต่ศูนย์ เพราะมีเครื่องมือที่ชื่อว่า Vite (เครื่องมือสร้างโปรเจกต์ที่ทำงานเร็วมาก) เข้ามาช่วยให้เราเริ่มต้นได้ภายในไม่กี่วินาที เพียงแค่เปิด Terminal ในโฟลเดอร์ที่ต้องการแล้วพิมพ์คำสั่งเพื่อสร้างโปรเจกต์กันเลย

1. พิมพ์คำสั่ง npm create vite@latest my-react-app ใน Terminal
2. เลือก Framework เป็น React และเลือก Variant เป็น JavaScript
3. เข้าไปในโฟลเดอร์ด้วยคำสั่ง cd my-react-app
4. ติดตั้งแพ็กเกจที่จำเป็นด้วย npm install
5. รันโปรเจกต์ด้วยคำสั่ง npm run dev

เมื่อทำตามขั้นตอนครบแล้ว ให้กด Ctrl + Click ที่ลิงก์ใน Terminal (ส่วนใหญ่จะเป็น http://localhost:5173) คุณจะเห็นหน้าเว็บเริ่มต้นของ Vite ปรากฏขึ้นมา นี่คือความสำเร็จก้าวแรกของการเป็นโปรแกรมเมอร์แล้วครับ

เข้าใจโค้ด Hello World ใน React

เมื่อเปิดไฟล์ App.jsx ในโฟลเดอร์ src ขึ้นมา คุณจะเห็นโครงสร้างโค้ดที่ดูแปลกตาเล็กน้อย นี่คือ JSX (การเขียน HTML ปนกับ JavaScript) ซึ่งเป็นเอกลักษณ์ของ React ที่ช่วยให้เราเขียนโค้ดได้กระชับและเข้าใจง่ายขึ้น ลองลบโค้ดเดิมแล้วใส่โค้ดนี้ลงไปแทนดูครับ

function App() {
  // นี่คือส่วนแสดงผลหลักของหน้าเว็บ
  return (
    <div>
      <h1>Hello World!</h1>
      <p>ยินดีต้อนรับสู่โลกของ React ครับ</p>
    </div>
  )
}

export default App // ส่งออกฟังก์ชันเพื่อให้ไฟล์อื่นเรียกใช้ได้

โค้ดด้านบนคือการสร้าง Component ที่ชื่อว่า App ซึ่งส่งค่ากลับไปเป็น HTML ที่เราต้องการแสดงผลบนหน้าจอ การใช้ export default คือการบอกว่าให้ไฟล์อื่นสามารถนำ Component นี้ไปใช้งานต่อได้ ซึ่งเป็นหัวใจสำคัญของการเขียนโปรแกรมแบบ Modular (แยกส่วนประกอบ)

ข้อควรระวัง: มือใหม่มักลืมปิดแท็ก HTML เช่น ลืมใส่ </div> หรือใส่ชื่อฟังก์ชันไม่ขึ้นต้นด้วยตัวพิมพ์ใหญ่ React จะแจ้งเตือน Error ทันทีใน Browser ซึ่งถือเป็นเรื่องปกติ ให้ค่อยๆ อ่านข้อความ Error นั้นแล้วคุณจะเก่งขึ้นเองครับ

สรุปบทเรียนและการนำไปใช้จริง

การเริ่มต้นด้วย Hello World อาจดูเป็นเรื่องเล็กน้อย แต่จริงๆ แล้วมันคือการวางรากฐานการตั้งค่าสภาพแวดล้อมการทำงาน (Environment Setup) ซึ่งเป็นสิ่งที่โปรแกรมเมอร์มืออาชีพต้องทำเป็นในทุกๆ วัน การสร้างโปรเจกต์ด้วย Vite ช่วยให้เราประหยัดเวลาและลดความซับซ้อนในการตั้งค่าลงไปได้มหาศาล

สำหรับการนำไปใช้จริงในฐานะโปรแกรมเมอร์มือใหม่ ผมแนะนำให้คุณลองปรับแก้โค้ดใน App.jsx ให้แสดงผลข้อมูลส่วนตัว เช่น ชื่อเล่น หรือรายการโปรเจกต์ที่คุณกำลังสนใจจะทำ การทดลองเปลี่ยนโค้ดแล้วเห็นผลลัพธ์ทันทีบนหน้าเว็บ จะช่วยให้คุณเข้าใจหลักการทำงานของ React State และ Component ได้ลึกซึ้งยิ่งขึ้น

จำไว้ว่า ความสม่ำเสมอสำคัญกว่าความเร็ว ในการฝึกเขียนโปรแกรม ไม่ต้องรีบเรียนรู้ทุกอย่างในวันเดียว ให้ลองทำโปรเจกต์เล็กๆ ไปทีละนิด แล้ววันหนึ่งคุณจะพบว่าการสร้างเว็บแอปพลิเคชันที่ซับซ้อนด้วย React กลายเป็นเรื่องสนุกและท้าทายสำหรับคุณในที่สุดครับ