มาทำความรู้จักว่า React คืออะไร เขียนคอมโพเนนต์แรกของคุณ และเรียนรู้กฎพื้นฐานของ JSX
เปิดบทเรียนนี้ใน KodokonReact คือ ไลบรารี JavaScript หรือพูดอีกอย่างคือกล่องเครื่องมือของโค้ดที่พร้อมใช้งาน สร้างขึ้นเพื่อสร้าง ส่วนติดต่อผู้ใช้ (user interface): ทุกสิ่งที่คุณเห็นและโต้ตอบด้วยบนหน้าจอ (ปุ่ม เมนู ฟอร์ม...) สิ่งที่ต้องรู้มาก่อนสำหรับโมดูลนี้มีเพียงพื้นฐาน JavaScript (ตัวแปร ฟังก์ชัน อาร์เรย์) เพื่อทำความเข้าใจว่าทำไม React จึงสำคัญ เรามาดูกันก่อนว่าจะเปลี่ยนหน้าเว็บ โดยไม่ใช้ React ได้อย่างไร
const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";วิธีนี้ใช้งานได้ แต่ทันทีที่หน้าเว็บเริ่มใหญ่ขึ้น คุณต้องตามหาทุกอิลิเมนต์ อัปเดตมันในจังหวะที่ถูกต้อง และห้ามลืมสักตัวเลย... มันกลายเป็นสิ่งที่จัดการไม่ไหวอย่างรวดเร็ว React เสนอแนวคิดที่ต่างออกไป: แบ่งส่วนติดต่อผู้ใช้ออกเป็น คอมโพเนนต์ คอมโพเนนต์ คือฟังก์ชัน JavaScript ที่อธิบายชิ้นส่วนหนึ่งของส่วนติดต่อผู้ใช้ (ปุ่ม การ์ด เมนู) เหมือนตัวต่อเลโก้ คุณนำมาประกอบกันเพื่อสร้างหน้าเว็บทั้งหน้า และ React จะดูแลให้หน้าจออัปเดตอยู่เสมอแทนคุณ
import { createRoot } from "react-dom/client";
function Hello() {
return <h1>Hello!</h1>;
}
const root = createRoot(document.getElementById("root"));
root.render(<Hello />);ฟังก์ชัน Hello คือคอมโพเนนต์: มันคืนค่าสิ่งที่ดูเหมือน HTML ที่เขียนอยู่ภายใน JavaScript โดยตรง ไวยากรณ์แบบนี้เรียกว่า JSX มีสามกฎที่ต้องจำ: คอมโพเนนต์คืนค่า อิลิเมนต์แม่เพียงตัวเดียว; แอตทริบิวต์บางตัวเปลี่ยนชื่อ (class กลายเป็น className); ทุกแท็กต้องถูกปิด (เช่น <img />) JSX มีพลังพิเศษ: วงเล็บปีกกา { } ช่วยให้คุณแทรกค่า JavaScript ใด ๆ ลงในผลลัพธ์ได้
function Welcome() {
const firstName = "Sarah";
return <h2>Welcome, {firstName}!</h2>;
}