Tutorial React dengan Contoh Langsung
Tutorial React 19 gratis: komponen, JSX, props, state, hooks, dan performa. Setiap contoh berjalan di halaman, jadi kamu bisa mengedit kode dan melihat komponen serta console-nya berubah.
Mulai kursusMemulai
- Apa Itu ReactReact adalah library JavaScript untuk membangun antarmuka pengguna dari komponen. Kamu menjelaskan apa yang harus tampil di layar untuk data saat ini, dan React menjaga halaman tetap sesuai saat data itu berubah.
- Install ReactInstall React dengan membuat proyek memakai Vite: periksa Node.js, jalankan satu perintah create, install dependensi, lalu jalankan dev server. Juga membahas file yang dibuat, build untuk production, dan kenapa Create React App sudah deprecated.
- JSXJSX adalah ekstensi sintaks JavaScript yang memungkinkanmu menulis markup mirip HTML di dalam komponen React. Pelajari aturannya: satu elemen root, tag yang ditutup, className, atribut camelCase, kurung kurawal, inline style, komentar, dan hasil kompilasinya.
- KomponenKomponen React adalah fungsi JavaScript yang mengembalikan JSX. Pelajari cara menulis dan memberi nama function component, menyusunnya menjadi tree, memecahnya ke beberapa file, menjaganya tetap murni, dan apa bedanya komponen dengan elemen.
- PropsProps adalah input sebuah komponen React: nilai yang dikirim induk ke komponen anak sebagai atribut JSX. Pelajari cara mengirim props dan memakai destructuring, mengatur nilai default, mengirim fungsi, spread props, dan kenapa props bersifat read only.
- Childrenchildren adalah prop yang menampung apa pun yang kamu tulis di antara tag pembuka dan tag penutup sebuah komponen. Pelajari cara membuat komponen pembungkus dan layout dengannya, mengirim beberapa slot sebagai props bernama, memakai children sebagai fungsi, dan kapan API Children bukan alat yang tepat.
- FragmentFragment React mengelompokkan beberapa elemen menjadi satu nilai kembalian tanpa menambah node ke halaman. Pelajari sintaks pendek <>...</>, kapan kamu butuh <Fragment key>, dan kenapa fragment penting di dalam tabel dan list.
- Conditional RenderingConditional rendering di React hanyalah JavaScript biasa: pernyataan if, ternary, atau && menentukan JSX mana yang dikembalikan komponen. Pelajari setiap polanya, angka 0 nyasar yang bisa dicetak &&, mengembalikan null, dan kenapa menyembunyikan komponen tidak sama dengan tidak merendernya.
- List dan KeyUntuk merender list di React, kamu memanggil map() pada array dan mengembalikan JSX untuk setiap item, lalu memberi setiap item prop key. Pelajari filter lalu map, dari mana key sebaiknya berasal, dan kenapa key dari index array membuat item tertukar saat list berubah.
- EventEvent di React adalah props seperti onClick dan onChange yang menerima fungsi, yang dipanggil React dengan objek event saat pengguna melakukan sesuatu. Pelajari cara mengirim handler alih-alih memanggilnya, mengirim argumen, membaca e.target.value dan e.key, mencegah form memuat ulang halaman, dan menghentikan bubbling.
- StylingKamu memberi style pada komponen React dengan className dan CSS biasa, dengan prop style untuk nilai yang dihitung di JavaScript, dengan CSS Modules untuk nama class yang ber-scope, atau dengan class utility Tailwind. Pelajari masing-masing, class kondisional, dan kapan memakai yang mana.
State dan Formulir
- useStateuseState memberi komponen sebuah nilai yang bertahan melewati render ulang dan setter yang menggambar ulang layar saat nilainya berubah. Pelajari sintaksnya, fungsi updater, object dan array di state, dan mengapa sebuah nilai terlihat usang tepat setelah kamu mengaturnya.
- Memperbarui Array dan ObjectUntuk mengubah array atau object di state React, buat yang baru lalu berikan ke setter. Pelajari cara menambah, menghapus, mengganti, menyisipkan, dan mengurutkan item, memperbarui object bersarang, dan mengapa mutasi state membuat layar tidak berubah.
- FormBuat form di React dengan input terkontrol: field teks, textarea, select, checkbox, dan radio button, satu objek state untuk banyak field, submit dengan onSubmit, menampilkan error validasi, dan form action di React 19.
- Controlled vs UncontrolledInput terkontrol mendapat nilainya dari state React dan hanya berubah lewat onChange. Input tidak terkontrol menyimpan nilainya sendiri di DOM, dan kamu membacanya dengan ref atau FormData. Pelajari perbedaannya, peringatan yang sering muncul, dan kapan memakai masing-masing.
- Lifting State UpLifting state up berarti memindahkan state dari dua komponen ke induk bersama terdekatnya, yang lalu mengirim nilai dan setter-nya kembali ke bawah sebagai props. Pelajari kapan perlu mengangkat state, cara melakukannya dalam tiga langkah, dan kapan state sebaiknya tetap lokal.
- useReduceruseReducer menyimpan state dan memindahkan setiap pembaruan ke satu fungsi reducer: kamu men-dispatch sebuah action, dan reducer mengembalikan state berikutnya. Pelajari sintaksnya, cara menulis reducer yang murni, contoh todo list, inisialisasi lazy, dan kapan memilihnya dibanding useState.
Effect dan Ref
- useEffectuseEffect menjalankan kode setelah React memperbarui layar, sehingga komponen bisa sinkron dengan sesuatu di luar React: timer, subscription, event listener. Pelajari tiga bentuk array dependensi, cleanup, perulangan tanpa akhir, dan kapan kamu sama sekali tidak butuh effect.
- Fetch DataAmbil data di React dengan memulai request di useEffect, menyimpan loading, error, dan data di state, serta mengabaikan respons yang datang setelah input berubah. Membahas async/await di effect, AbortController, race condition, dan kapan sebaiknya memakai library.
- useRefuseRef memberi komponen sebuah kotak, `{ current }`, yang mempertahankan isinya di antara render tanpa memicu render saat kamu mengubahnya. Pakai untuk menjangkau node DOM (fokus, scroll, ukur) atau untuk menyimpan id timer atau nilai apa pun yang tidak ditampilkan di layar.
- forwardRefforwardRef memungkinkan sebuah komponen menerima ref dari induknya dan memasangnya ke node DOM di dalamnya. Di React 19, function component menerima `ref` sebagai prop biasa, jadi kode baru tidak lagi butuh forwardRef. Lihat kedua versi berjalan, ditambah useImperativeHandle dan tipe TypeScript.
- useLayoutEffectuseLayoutEffect bekerja seperti useEffect tapi berjalan tepat setelah React memperbarui DOM dan sebelum browser menggambar layar. Pakai untuk mengukur elemen dan menyesuaikan layout tanpa kedipan yang terlihat, dan tetap pakai useEffect untuk hal lainnya.
Hook dan Context
- React HooksHook adalah fungsi yang namanya diawali use, yang memungkinkan komponen memakai fitur React seperti state, context, ref, atau effect. Lihat semua hook bawaan yang dikelompokkan berdasarkan kegunaannya, dua aturan yang diikuti setiap hook, dan cara menulis hook sendiri.
- useContextuseContext membaca nilai yang disediakan komponen parent, sehingga komponen yang bersarang dalam bisa mendapatkannya tanpa setiap komponen di antaranya meneruskan nilai itu sebagai prop. Pelajari createContext, provider, cara memperbarui context dari child, dan pengaruh context terhadap render ulang.
- Prop DrillingProp drilling adalah mengirim prop melewati komponen yang tidak memakainya, hanya agar komponen di bawahnya bisa memakainya. Lihat dalam contoh yang bisa dijalankan, kenapa ini merepotkan saat aplikasi bertambah besar, dan solusinya sesuai urutan untuk dicoba: komposisi, context, lalu library state.
- Custom HookCustom hook adalah fungsi yang namanya diawali use dan memanggil hook lain, sehingga beberapa komponen bisa memakai ulang logika yang sama yang punya state. Buat useToggle, useLocalStorage, useDebounce, dan useWindowWidth, lalu pelajari kenapa setiap pemanggilan mendapat state sendiri.
- Aturan HookHook punya dua aturan: panggil di tingkat teratas komponen, jangan pernah di dalam kondisi, perulangan, atau fungsi bersarang, dan panggil hanya dari function component atau custom hook. Pelajari mengapa React butuh urutan pemanggilan yang sama di setiap render dan cara memperbaiki error yang muncul saat urutan itu berubah.
- useIduseId mengembalikan id yang unik dan stabil untuk setiap instance komponen, sehingga label, input, dan petunjuk aria-describedby bisa saling menunjuk meskipun komponennya muncul berkali-kali. Pelajari mengapa Math.random dan counter rusak dengan server rendering, dan mengapa useId bukan untuk key daftar.
- useSyncExternalStoreuseSyncExternalStore membuat komponen berlangganan ke data yang berada di luar React, seperti module store kecil atau API browser seperti navigator.onLine, dan merender lagi setiap kali data itu berubah. Pelajari subscribe dan getSnapshot, mengapa snapshot harus di-cache, dan getServerSnapshot.
Rendering dan Performa
- RenderingKomponen React dirender lagi saat state-nya berubah, saat parent-nya dirender, atau saat context yang dibacanya berubah. Pelajari bedanya render dan commit, arti sebenarnya dari virtual DOM, dan cara menghentikan render yang tidak kamu butuhkan.
- useMemouseMemo menyimpan hasil sebuah perhitungan di cache di antara render dan hanya menghitungnya ulang saat dependensinya berubah. Pelajari sintaksnya, cara menjaga object tetap stabil untuk child yang memakai memo, dan kapan useMemo tidak sepadan.
- useCallbackuseCallback mengembalikan fungsi yang sama di antara render sampai dependensinya berubah. Hook ini hanya membantu saat fungsi itu diberikan ke child yang memakai memo atau dipakai sebagai dependensi effect. Pelajari sintaksnya, bedanya dengan useMemo, dan kesalahan yang perlu dihindari.
- React.memomemo membungkus sebuah komponen agar React melewatkan render ulangnya saat props-nya sama secara dangkal dengan sebelumnya. Pelajari kapan memo membantu, kenapa objek dan fungsi baru di props menggagalkannya, dan apa yang tidak dicegahnya.
- useTransitionuseTransition menandai pembaruan state sebagai tidak mendesak, sehingga React bisa menjaga halaman tetap responsif selagi merender bagian yang lambat di latar belakang. Pelajari isPending, startTransition, transition async di React 19, dan mengapa ini bukan debounce.
- useDeferredValueuseDeferredValue memberimu salinan sebuah nilai yang boleh tertinggal saat render berat, sehingga input tetap responsif sementara daftar yang lambat menyusul. Pelajari cara kerjanya, nilai awal di React 19, dan perbandingannya dengan useTransition dan debounce.
- Suspense dan lazySuspense menampilkan fallback selama komponen di dalamnya belum siap, dan React.lazy baru memuat kode sebuah komponen saat komponen itu pertama kali dirender. Pelajari code splitting, boundary bersarang, Suspense dengan use() di React 19, dan cara menangani error.
React 19 dan Lanjutan
- React 19React 19 menambahkan Actions, useActionState, useOptimistic, use, ref sebagai prop, dan metadata dokumen, lalu 19.2 menambahkan Activity dan useEffectEvent. Lihat setiap fitur berjalan, apa saja yang dihapus, dan cara upgrade.
- useActionStateuseActionState membungkus action async, menyimpan nilai terakhir yang dikembalikannya, dan memberi tahu apakah action itu masih berjalan. Pelajari signature-nya, form action, cara mengembalikan error validasi, dan cara memanggilnya di luar formulir.
- useOptimisticuseOptimistic menampilkan hasil yang kamu harapkan selagi action async masih berjalan, lalu kembali ke state asli saat action selesai, sehingga request yang gagal membatalkan dirinya sendiri. Pelajari sintaksnya, bentuk reducer-nya, dan mengapa hook ini harus berjalan di dalam action.
- useuse membaca nilai dari promise atau context saat render. Dengan promise, komponen ditangguhkan sampai datanya tiba dan menampilkan fallback Suspense terdekat. Tidak seperti hook lain, use bisa berjalan di dalam pernyataan if dan perulangan.
- Error BoundaryError boundary adalah komponen yang menangkap error yang dilempar saat merender komponen di dalamnya dan menampilkan fallback alih-alih layar kosong. Pelajari apa yang ditangkapnya, cara menulisnya sebagai class, cara melakukan reset, dan library react-error-boundary.
- PortalcreatePortal merender sebagian komponen ke node DOM lain, seperti document.body, sementara posisinya di tree React tetap sama. Pakai untuk modal, tooltip, dan menu yang harus lolos dari overflow hidden dan tumpukan z-index.
- Strict ModeStrictMode adalah pembungkus khusus development yang merender komponen dua kali, menjalankan setup, cleanup, lalu setup effect saat mount, dan memperingatkan API usang, sehingga render tidak murni dan cleanup yang hilang ketahuan lebih awal. Di production, StrictMode tidak melakukan apa pun.
- Lifecycle KomponenSetiap komponen React mengalami mount (muncul), update (dirender lagi), dan unmount (dihapus). Pelajari bagaimana setiap fase dipetakan ke useEffect, lifecycle method class beserta padanan hook-nya, serta fase render dan commit.
- Class ComponentClass component adalah class JavaScript yang mewarisi React.Component dan mengembalikan JSX dari method render. Pelajari this.props, this.state dan setState, binding event handler, lifecycle method, PureComponent, dan cara mengubah class menjadi function component.
Perbandingan dan Wawancara
- Pertanyaan Interview ReactSekitar 30 pertanyaan interview React dari tingkat pemula hingga lanjutan, masing-masing dengan jawaban singkat yang akan diterima pewawancara dan kode langsung untuk pertanyaan yang lebih mudah dilihat daripada dibaca.
- React vs AngularReact adalah library UI yang kamu padukan dengan tool lain; Angular adalah framework lengkap dengan routing, form, HTTP, dan dependency injection bawaan. Bandingkan komponen yang sama yang ditulis dengan keduanya, berdampingan.
- React vs VueReact dan Vue sama-sama alat JavaScript untuk membangun antarmuka pengguna dari komponen. Keduanya berbeda dalam markup (JSX vs template), cara bereaksi terhadap perubahan (state immutable dan render ulang vs ref reaktif yang bisa diubah), dan seberapa banyak ekosistemnya yang resmi.
- React dengan TypeScriptCara memberi tipe pada aplikasi React dengan TypeScript: props dan children, useState dengan union dan null, useRef untuk elemen DOM, event handler, context, komponen generic, dan props elemen bawaan.
