Website interaktif untuk belajar React dari dasar. Cocok untuk pemula yang baru pertama kali masuk dunia React!
- 📚 Bahan Bacaan Lengkap - Penjelasan konsep React yang mudah dipahami
- 💻 Contoh Kode - Setiap konsep dilengkapi dengan contoh kode yang jelas
- 🎮 Playground Interaktif - Coba langsung fitur-fitur React dengan demo live
- 🧩 8 Topik Utama:
- 📚 Pengenalan React
- ⚛️ JSX (JavaScript XML)
- 🧩 Components
- 📦 Props
- 🔄 State
- 🎯 Events
- 🔀 Conditional Rendering
- 📋 Lists & Keys
Pastikan Anda sudah menginstall:
- Node.js (versi 16 atau lebih baru)
- npm atau yarn
- Install dependencies:
npm install- Jalankan development server:
npm run dev- Buka browser dan akses:
http://localhost:3000
day1/
├── src/
│ ├── components/
│ │ ├── Introduction.jsx # Pengenalan React
│ │ ├── JSX.jsx # Belajar JSX
│ │ ├── Components.jsx # Belajar Components
│ │ ├── Props.jsx # Belajar Props
│ │ ├── State.jsx # Belajar State
│ │ ├── Events.jsx # Belajar Events
│ │ ├── Conditional.jsx # Conditional Rendering
│ │ ├── Lists.jsx # Lists & Keys
│ │ └── Section.css # Styling untuk sections
│ ├── App.jsx # Komponen utama
│ ├── App.css # Styling utama
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── index.html
├── package.json
├── vite.config.js
└── README.md
- Mulai dari Pengenalan - Baca section "Pengenalan" untuk memahami dasar React
- Ikuti Urutan - Pelajari setiap topik secara berurutan
- Coba Sendiri - Gunakan playground di setiap section untuk bereksperimen
- Modifikasi Kode - Coba ubah contoh kode untuk memahami lebih dalam
- Praktikkan - Buat proyek kecil sendiri setelah memahami setiap konsep
- Jangan terburu-buru! Pahami setiap konsep sebelum lanjut
- Coba modifikasi setiap contoh yang diberikan
- Baca kode dengan teliti dan pahami alur eksekusinya
- Praktikkan dengan membuat proyek kecil sendiri
- Jangan takut membuat kesalahan - itu bagian dari belajar!
- React 18 - Library untuk membangun UI
- Vite - Build tool yang cepat
- CSS3 - Styling dengan gradient dan modern design
npm run dev- Menjalankan development servernpm run build- Build untuk productionnpm run preview- Preview build production
- ✨ Modern gradient design
- 📱 Responsive (mobile-friendly)
- 🎯 Interactive playgrounds
- 💻 Code examples dengan syntax highlighting
- 🎮 Live demos yang bisa dicoba langsung
- Apa itu React?
- Mengapa belajar React?
- Konsep dasar React
- Sintaks JSX
- Menyisipkan JavaScript di JSX
- Aturan-aturan JSX
- Functional Components
- Membuat dan menggunakan component
- Component reusability
- Mengirim data dengan props
- Default props
- Types of props
- useState Hook
- Mengelola state
- State dengan object dan array
- Event handlers
- Mouse events
- Form events
- Keyboard events
- if/else
- Ternary operator
- Logical && operator
- Rendering lists dengan map()
- Keys dan pentingnya
- Interactive lists
Feel free to improve this playground! Setiap saran dan kontribusi sangat diterima.
MIT License - Feel free to use this project for learning!
Selamat Belajar React! 🚀
Jika ada pertanyaan atau butuh bantuan, jangan ragu untuk bertanya!