การตั้งค่าโครงการ: Vite โครงร่างและเซิร์ฟเวอร์พัฒนา
สร้างแอป React ด้วย Vite (หรือเครื่องมือที่คล้ายกัน) ทำความเข้าใจโครงสร้างโฟลเดอร์พื้นฐาน เรียกใช้เซิร์ฟเวอร์พัฒนา และตรวจสอบการเรนเดอร์ด้วยคอมโพเนนต์ขนาดเล็ก
การตั้งค่าโครงการ: Vite โครงร่างและเซิร์ฟเวอร์พัฒนา เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
ภาพรวมการตั้งค่า
เป้าหมาย: สร้างโครงการได้อย่างรวดเร็ว เรียนรู้โครงสร้างโฟลเดอร์ และเรียกใช้เซิร์ฟเวอร์พัฒนาพร้อมการโหลดใหม่ทันที
- การสร้างโครงร่างโครงการด้วย Vite หรือเครื่องมือที่คล้ายกัน
- ตำแหน่งที่เก็บไฟล์
- เริ่มต้นและตรวจสอบแอป
ข้อกำหนดเบื้องต้น
ข้อกำหนดเบื้องต้น:
- ติดตั้ง Node.js LTS และ npm แล้ว
- เข้าถึงเทอร์มินัลได้
- การใช้งาน CLI พื้นฐาน (cd, ls)
สร้างโครงร่างด้วย Vite
สร้างโครงการด้วยเครื่องมือที่รวดเร็ว:
- สร้างโครงร่าง (เช่น npm create vite@latest)
- เลือก React (JavaScript)
- ติดตั้งส่วนพึ่งพา (npm install)
ส่วนสำคัญของโฟลเดอร์
โครงสร้าง (โดยทั่วไป):
- index.html: มี
div#root - src/main.jsx: สร้าง root และเรนเดอร์ App
- src/App.jsx: คอมโพเนนต์ของคุณ
เรียกใช้เซิร์ฟเวอร์พัฒนา
เซิร์ฟเวอร์พัฒนา:
- เริ่มต้นด้วย npm run dev
- เปิด URL ในเครื่อง
- แก้ไข App.jsx แล้วการเปลี่ยนแปลงจะแสดงทันที (การโหลดใหม่ทันที)
ตรวจสอบการเรนเดอร์
เรนเดอร์ App ขนาดเล็กเพื่อยืนยันว่าการตั้งค่าทำงาน จากนั้นแก้ข้อความเพื่อดูการโหลดใหม่ทันที
<div id="root"></div>
ไฟล์จุดติดตั้ง
สรุป
สรุป: สร้างโครงร่างด้วย Vite เรียนรู้ว่า index.html, main.jsx และ App.jsx อยู่ที่ใด เรียกใช้เซิร์ฟเวอร์พัฒนา และตรวจสอบการเรนเดอร์ด้วยคอมโพเนนต์ขนาดเล็ก
คำถามที่พบบ่อย
บทเรียน “การตั้งค่าโครงการ: Vite โครงร่างและเซิร์ฟเวอร์พัฒนา” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งค่าโครงการ: Vite โครงร่างและเซิร์ฟเวอร์พัฒนา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่าโครงการ: Vite โครงร่างและเซิร์ฟเวอร์พัฒนา”
สร้างแอป React ด้วย Vite (หรือเครื่องมือที่คล้ายกัน) ทำความเข้าใจโครงสร้างโฟลเดอร์พื้นฐาน เรียกใช้เซิร์ฟเวอร์พัฒนา และตรวจสอบการเรนเดอร์ด้วยคอมโพเนนต์ขนาดเล็ก คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “การตั้งค่าโครงการ: Vite โครงร่างและเซิร์ฟเวอร์พัฒนา” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เริ่มต้น React: แนวคิดและการตั้งค่า
- การตั้งค่าโครงการ: Vite โครงร่างและเซิร์ฟเวอร์พัฒนา
- คอมโพเนนต์แรกและการเรนเดอร์