Lesson 1
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.
Lesson 2
Kuis: Belum dikerjakanPrasyarat & 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.
Lesson 3
Kuis: Belum dikerjakanProyek 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.
Lesson 4
Kuis: Belum dikerjakanJSX: 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.
Lesson 5
Kuis: Belum dikerjakanKomponen 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.
Lesson 6
Kuis: Belum dikerjakanProps 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.
Lesson 7
Kuis: Belum dikerjakanState 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.
Lesson 8
Kuis: Belum dikerjakanEvent 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.
Lesson 9
Kuis: Belum dikerjakanConditional 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 &&.
Lesson 10
Kuis: Belum dikerjakanMerender 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.
Lesson 11
Kuis: Belum dikerjakanForm & Input di React
Pelajari cara membuat form interaktif di ReactJS dan mengelola nilai input field menggunakan konsep 'Controlled Components' dengan state dan event handler.
Lesson 12
Kuis: Belum dikerjakanHook `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.
Lesson 13
Kuis: Belum dikerjakanBerbagi 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.
Lesson 14
Kuis: Belum dikerjakanHooks 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.
Lesson 15
Kuis: Belum dikerjakanStyling 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.
Lesson 16
Kuis: Belum dikerjakanRouting 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.
Lesson 17
Kuis: Belum dikerjakanProyek 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.
Lesson 18
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.
Module ini digunakan dalam 1 course. Progress, quiz akhir, dan sertifikat dikelola melalui course terkait.