Dasar ReactJS untuk Pemula
Pelajari ReactJS dari nol! Bangun komponen UI interaktif dan mulai perjalanan menjadi React Developer.
Mulai Belajar Modul Ini
Panduan & Referensi
Belajar Dasar ReactJS untuk Pemula melalui serangkaian panduan dan referensi yang lengkap serta contoh contoh yang bisa langsung diikuti oleh pemula.
Apa Itu ReactJS?
Selamat datang di dunia ReactJS! Pahami apa itu React, mengapa menjadi library JavaScript yang sangat populer, dan konsep inti seperti komponen, UI deklaratif, serta Virtual DOM.
Prasyarat & Ekosistem React
Persiapan sebelum terjun ke ReactJS! Pahami konsep-konsep JavaScript (ES6+) yang penting dan kenalan singkat dengan Node.js serta package manager (npm/yarn) yang jadi tulang punggung development React modern.
Proyek React Pertama (Vite)
Langkah demi langkah membuat aplikasi ReactJS pertama Anda menggunakan Vite, build tool modern yang super cepat. Lihat struktur folder dasarnya dan jalankan development server.
JSX: HTML di JavaScript
Kenalan sama JSX (JavaScript XML), ekstensi sintaks JavaScript yang memungkinkan Anda menulis struktur mirip HTML langsung di dalam kode React. Pahami aturan dan manfaatnya.
Komponen React
Pahami konsep inti React! Pelajari apa itu komponen, mengapa mereka penting untuk membangun UI yang modular dan reusable, dan cara membuat Functional Component sederhana.
Props di React
Pelajari bagaimana cara mengirim data dari komponen parent ke komponen child di ReactJS menggunakan props (properties). Pahami bagaimana props bersifat read-only dan cara mengaksesnya.
State di React (useState)
Pelajari tentang state sebagai data internal komponen React yang bisa berubah dan memicu re-render. Pahami cara menggunakan hook `useState` untuk mengelola state di Functional Components.
Event Handling di React
Bikin komponen React-mu interaktif! Pelajari cara menangani berbagai event pengguna (seperti klik tombol, input form) menggunakan sintaks event handler di JSX dan fungsi JavaScript.
Conditional Rendering di React
Bikin UI React-mu lebih dinamis! Pelajari berbagai cara untuk menampilkan atau menyembunyikan elemen atau komponen JSX berdasarkan kondisi tertentu menggunakan if, operator ternary, dan operator logika &&.
Merender List & Keys di React
Pelajari cara efisien untuk menampilkan kumpulan data (array) sebagai list elemen JSX di React menggunakan metode `.map()`, dan pahami mengapa atribut `key` unik sangat penting untuk performa dan stabilitas.
Form & Input di React
Pelajari cara membuat form interaktif di ReactJS dan mengelola nilai input field menggunakan konsep 'Controlled Components' dengan state dan event handler.
Hook `useEffect` di React
Pelajari cara menggunakan hook `useEffect` di ReactJS untuk menjalankan 'efek samping' (side effects) seperti mengambil data dari API, langganan, atau memanipulasi DOM secara manual setelah komponen di-render.
Berbagi State di React (Lifting Up)
Bagaimana cara membuat beberapa komponen anak bisa mengakses dan mengubah data yang sama? Pelajari pola 'Lifting State Up' di ReactJS, di mana state dipindahkan ke parent bersama terdekat.
Hooks React Lainnya (useContext, useRef)
Selain useState dan useEffect, kenalan singkat dengan React Hooks lain yang berguna: `useContext` untuk menghindari prop drilling dan `useRef` untuk akses DOM langsung atau nilai mutable.
Styling Komponen React
Bikin komponen React-mu makin kece! Pelajari berbagai cara populer untuk memberi style pada komponen, mulai dari import file CSS biasa, CSS Modules untuk scoping lokal, hingga CSS-in-JS dan utility-first framework seperti Tailwind CSS.
Routing di React (React Router)
Pahami konsep dasar client-side routing untuk Single Page Application (SPA) di ReactJS dan kenalan singkat dengan library populer React Router untuk navigasi antar 'halaman' tanpa reload.
Proyek Mini ReactJS
Waktunya ngoding proyek React pertamamu! Aplikasikan semua konsep seperti komponen, props, state, event handling, dan list rendering untuk membangun aplikasi To-Do List interaktif dari awal.
Penutup ReactJS & Lanjutan
Kamu berhasil! Rangkuman perjalanan belajar ReactJS dari dasar, motivasi untuk terus berlatih membangun komponen, dan arahan ke topik serta ekosistem React yang lebih lanjut.