Panduan & Referensi
Kasus penggunaan dunia nyata untuk membantu Anda memulai dengan Dasar ReactJS untuk Pemula.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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 &&.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.
Panduan
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.