กลับไปหน้าหลัก
บทที่ 1: เริ่มต้นกับ Material-UI
ทำความรู้จักกับ Material-UI และเริ่มสร้าง UI ที่สวยงามสำหรับมือใหม่! 🎨
Material-UI v7
Material Design 3
Component Library
Fast Development
🤔 Material-UI คืออะไร? (อธิบายแบบง่ายๆ)
ลองนึกภาพว่าคุณเป็น นักสร้างบ้าน:
• 🧱 React: เหมือนวัสดุก่อสร้าง (อิฐ ซีเมนต์ เหล็ก)
• 🏠 Material-UI: เหมือนส่วนประกอบสำเร็จรูป (ประตู หน้าต่าง ห้องน้ำ)
• 📐 Material Design: แบบแปลนที่ Google ออกแบบให้
• ✨ ผลลัพธ์: สร้างบ้านสวยเร็วกว่า และมีมาตรฐานเดียวกัน
🎯 เมื่อเรียนจบบทนี้ คุณจะสามารถ:
- เข้าใจ Material-UI พื้นฐาน
Component Library, Material Design, Theme
- ติดตั้งและตั้งค่า MUI
ในโปรเจค Next.js อย่างถูกต้อง
- ใช้ Component พื้นฐาน
Button, Typography, Card
- เข้าใจ Material Design
หลักการออกแบบและปรัชญา
- ThemeProvider & CssBaseline
ตั้งค่าเริ่มต้นสำหรับ MUI
- เขียนโค้ดโปรเจคแรก
หน้าเว็บง่ายๆ ด้วย MUI
🤔 Material-UI (MUI) คืออะไร?
Material-UI (MUI) เป็น React Component Library ที่ใหญ่ที่สุดและได้รับความนิยมสูงสุด ที่ใช้หลักการ Material Design จาก Google ในการออกแบบ Component ต่างๆ
✨ ข้อดีของ Material-UI
🚀 ความเร็วในการพัฒนา
Component สำเร็จรูป ไม่ต้องสร้าง CSS เอง ประหยัดเวลาได้มาก
50+ Components
No CSS needed
🎨 ความสวยงามตามมาตรฐาน
ใช้หลักการ Material Design ทำให้ UI ดูทันสมัย เหมือนแอป Google
Material Design 3
Google Standard