React

Pengenalan React

Apa itu React, cara instalasi lewat Vite, dan cara menjalankan project pertamamu.

JSX Dasar

Menulis markup mirip HTML langsung di dalam JavaScript lewat JSX.

Komponen & Props

Membuat komponen fungsi dan mengirim data ke dalamnya lewat props.

State dengan useState

Menyimpan dan mengubah data yang berubah-ubah lewat hook useState.

Event Handling di React

Menangani interaksi pengguna lewat onClick, onChange, dan event handler lainnya.

Conditional Rendering

Menampilkan elemen secara kondisional lewat ternary dan operator &&.

Rendering List dengan map()

Menampilkan array data sebagai daftar elemen JSX lewat method map(), dan pentingnya prop key.

useEffect: Side Effect

Menjalankan kode di luar alur render murni React, mis. fetch data atau manipulasi DOM langsung.

Forms & Controlled Components

Mengikat input form ke state React lewat pola value + onChange.

Lifting State Up

Memindahkan state ke komponen induk terdekat supaya bisa dipakai bersama beberapa komponen anak.

Component Composition & children

Menyusun komponen lewat props.children supaya lebih fleksibel dan bisa dipakai ulang.

useRef

Mengakses elemen DOM langsung dan menyimpan nilai yang tidak memicu render ulang.

Custom Hook

Mengekstrak logika stateful yang berulang jadi fungsi hook sendiri, dimulai dengan awalan use.

Context API

Membagikan data ke banyak komponen tanpa passing props manual di tiap level (prop drilling).

useReducer

Mengelola state yang lebih kompleks lewat pola reducer, alternatif dari useState.

Fetching Data

Mengambil data dari API lewat fetch() di dalam useEffect, dengan penanganan loading dan error.

React Router Dasar

Membuat aplikasi Single Page Application (SPA) dengan banyak halaman lewat library react-router-dom.

Memoization: useMemo, useCallback, React.memo

Mengoptimalkan performa dengan mencegah kalkulasi/render ulang yang tidak perlu.

Tugas Akhir

Latihan akhir menggabungkan useState, useEffect, rendering list, dan forms dalam satu aplikasi Todo List.