โปรเจกต์หนังสือ React Fundamentals ออนไลน์สำหรับ Developer สร้างด้วย Astro, Starlight และ Tailwind CSS 4
สถานะปัจจุบัน: เตรียมหลักสูตร Frontend Fundamentals 6 ภาค 24 บท และโครง User Management Web Application แล้ว แต่ยังไม่ได้เริ่มเขียนเนื้อหาแต่ละบท
ผู้อ่านควรมีความรู้ TypeScript, HTML, CSS, พื้นฐาน Browser และ HTTP จากหนังสือ TypeScript for Developers หรือมีความรู้ในระดับเทียบเท่า
- เรียนแบบ Code-along ตั้งแต่สร้างโปรเจกต์ว่าง
- แสดงคำสั่ง path ของไฟล์ โค้ด และผลลัพธ์ที่ต้องตรวจสอบครบทุกขั้น
- ผู้อ่านพิมพ์โค้ดสร้าง User Management Web Application ด้วยตัวเอง
- ไม่พึ่ง starter project ไฟล์ตัวอย่าง หรือ repository ภายนอกเพื่อทำบทเรียนให้จบ
- หน้าแรกและ identity ของหนังสือ React
- หน้าสารบัญ ลำดับบท และ frontmatter ของแต่ละบท
- โครงโปรเจกต์ท้ายเล่ม User Management Web Application
- ระบบ navigation, search และ light/dark theme
- Tailwind CSS 4 และฟอนต์ภาษาไทย
- หน้า 404, sitemap และ social preview
- GitHub Actions สำหรับ deploy ไปยัง GitHub Pages
- Node.js 22.12.0 ขึ้นไป
- npm 9.6.5 ขึ้นไป
npm install
npm run devเว็บไซต์สำหรับพัฒนาจะแสดงที่ http://localhost:4321/
src/content/docs/
├── index.mdx
├── chapters/
│ ├── index.md
│ ├── 01-foundations/
│ ├── 02-components-state/
│ ├── 03-application-flow/
│ ├── 04-api-data/
│ ├── 05-auth-quality/
│ └── 06-capstone/
└── about.md
ไฟล์บททั้งหมดมี frontmatter และลำดับ navigation พร้อมแล้ว สามารถเริ่มเขียนเนื้อหาใต้ frontmatter ของแต่ละไฟล์ได้ทันที
| คำสั่ง | การทำงาน |
|---|---|
npm run dev |
เปิด development server |
npm run check |
ตรวจ type และไฟล์ Astro |
npm run build |
ตรวจโค้ดและสร้าง production build |
npm run preview |
เปิดดู production build |
เมื่อสร้าง repository และ push ไป branch main workflow จะ build และ deploy เว็บไซต์โดยอัตโนมัติ ค่า site และ base จะอ่านจาก GITHUB_REPOSITORY จึงรองรับทั้ง GitHub project site และ user site
สำหรับ custom domain หรือการ build นอก GitHub สามารถกำหนดค่าได้ด้วย:
SITE_URLเช่นhttps://example.comBASE_PATHเช่น/react-web-app-for-developersหรือ/
MIT © Premix Labs