Lewati ke konten utama
pelatihan
.org
Belajar. Praktik. Berkembang.
Kategori
ID
Masuk
Daftar
Menu
Kurikulum React: 3 Bab, 45 Lesson — pelatihan.org
Beranda
/
Katalog
/
React
/
Kurikulum
Kurikulum
Kurikulum React
Belajar React online lewat 45 lesson terstruktur, contoh kode, dan 225 soal kuis.
45 lesson
3 bab
225 soal
Ringkasan dan poin kunci bisa dilihat gratis. Materi lengkap, contoh kode, dan kuis memerlukan langganan.
01
React Tutorial
36 lesson
01
React Home
Halaman ini menjadi pintu masuk materi React, mulai dari menampilkan elemen pertama hingga Hooks dan routing. React adalah pustaka JavaScript untuk membangun antarmuka pengguna…
02
React Intro
React adalah pustaka JavaScript open source yang dikembangkan Meta (dahulu Facebook) untuk membangun antarmuka berbasis komponen. React bekerja secara deklaratif: kamu…
03
React Get Started
Untuk mulai menulis React, kamu memerlukan Node.js beserta npm sebagai package manager-nya. Cara paling mudah adalah membuat proyek baru dengan tool seperti Vite, lalu…
04
React First App
Proyek React hasil generator berisi file-file penting seperti index.js sebagai titik masuk dan App.js sebagai komponen utama. Titik masuk aplikasi merender komponen App ke elemen…
05
React Render HTML
Untuk menampilkan JSX ke layar, React menyediakan API createRoot dari paket react-dom/client. Kamu membuat root dari elemen DOM yang sudah ada, lalu memanggil method render…
06
React Upgrade
Saat versi React terbaru rilis, proyekmu bisa diperbarui dengan mengubah versi pada package.json lalu menjalankan npm install. Pastikan paket react dan react-dom selalu memiliki…
07
React ES6
React banyak memanfaatkan fitur JavaScript modern dari standar ECMAScript 2015 atau ES6. Fitur seperti const dan let, arrow function, template literal, destructuring, serta modul…
08
React JSX Intro
JSX adalah singkatan dari JavaScript XML, yaitu sintaks yang memungkinkan kamu menulis markup mirip HTML langsung di dalam kode JavaScript. Berkas berisi JSX dikompilasi oleh…
09
React JSX Expressions
Di dalam JSX kamu bisa menaruh ekspresi JavaScript dengan membungkusnya dalam kurung kurawal. Ekspresi dapat berupa variabel, perhitungan, pemanggilan fungsi, atau array yang…
10
React JSX Attributes
Atribut pada elemen JSX mirip HTML, tetapi beberapa nama harus diubah agar valid di JavaScript, misalnya class menjadi className dan for menjadi htmlFor. Atribut style menerima…
11
React JSX If Statements
JSX tidak mendukung sintaks if di dalam kurung kurawal, sehingga logika percabangan harus ditulis dengan cara lain. Pilihan yang umum adalah operator ternary, operator && untuk…
12
React Components
Komponen React adalah fungsi JavaScript yang mengembalikan markup JSX dan bisa dipakai ulang di banyak tempat. Kamu cukup menulis fungsi dengan nama berawalan huruf besar lalu…
13
React Class
Selain fungsi, komponen React bisa ditulis sebagai class yang extends React.Component. Class component menyimpan data internal pada objek state dan mengaksesnya lewat this.state,…
14
React Props
Props adalah cara meneruskan data dari komponen induk ke komponen anak, mirip atribut pada HTML. Props bersifat read-only, artinya komponen tidak boleh mengubah props yang…
15
React Props Destructuring
Destructuring memungkinkan kamu mengambil properti props langsung di parameter fungsi sehingga kode lebih ringkas. Daripada menulis props.name berkali-kali, cukup tulis function…
16
React Props Children
Props children berisi elemen atau teks yang diletakkan di antara tag pembuka dan penutup komponen. Pola ini berguna untuk membuat komponen pembungkus seperti Card atau Modal yang…
17
React Events
React menyediakan event handler berupa atribut camelCase seperti onClick dan onChange yang menerima fungsi JavaScript. Pada komponen fungsional, kamu cukup meneruskan fungsi atau…
18
React Conditionals
Conditional rendering membuat komponen menampilkan tampilan berbeda sesuai kondisi tertentu. Pola yang umum digunakan adalah if atau else di luar JSX, operator ternary, serta…
19
React Lists
Daftar berupa array dirender menjadi sekumpulan elemen dengan metode map. Setiap elemen yang dihasilkan sebaiknya memiliki properti key berupa nilai unik agar React bisa melacak…
20
React Forms
Form di React umumnya ditulis sebagai controlled component, di mana nilai setiap input disimpan pada state dan selalu disinkronkan lewat onChange. Dengan begitu, React menjadi…
21
React Forms Submit
Form HTML secara bawaan me-refresh halaman saat disubmit, sehingga React memakai event onSubmit yang memanggil e.preventDefault(). Setelah pencegahan itu, data dari state dapat…
22
React Textarea
Elemen textarea di React mengikuti pola controlled component yang sama, yaitu atribut value diikat ke state dan diubah lewat onChange. Berbeda dengan HTML, konten awal textarea…
23
React Select
Dropdown select pada React juga dikendalikan lewat atribut value pada tag select, bukan atribut selected pada tiap option. Nilai yang dipilih disimpan ke state melalui onChange…
24
React Multiple Inputs
Saat form memiliki banyak input, kamu tidak perlu membuat state terpisah untuk tiap kolom. Cukup satu objek state dengan properti sesuai nama input, lalu satu handler umum…
25
React Checkbox
Checkbox pada React merepresentasikan status boolean, sehingga atribut utamanya adalah checked dan perubahannya lewat onChange. Nilai checkbox diambil dari properti…
26
React Radio
Radio button dipakai untuk memilih satu opsi dari beberapa pilihan. Semua radio dalam satu grup harus memiliki atribut name yang sama, sedangkan nilai tiap opsi dibedakan lewat…
27
React Portals
React Portal memungkinkan komponen merender anak-anaknya ke elemen DOM di luar hierarki induknya, misalnya modal yang ditempel ke body dokumen. Fitur ini berguna untuk elemen…
28
React Suspense
React.Suspense menampilkan fallback sementara ketika komponen di dalamnya belum siap, misalnya saat berkas sedang dimuat. Kamu membungkus bagian tersebut dengan Suspense lalu…
29
React CSS Styling
React mendukung beberapa cara memberi gaya, mulai dari CSS eksternal yang diimpor ke berkas JavaScript hingga style inline berupa objek JavaScript. CSS eksternal cocok untuk gaya…
30
React CSS Modules
CSS Modules memungkinkan kamu menulis berkas CSS biasa yang otomatis diberi nama unik agar kelasnya tidak bentrok antar komponen. Kamu mengimpor berkas berekstensi .module.css…
31
React CSS-in-JS
CSS-in-JS menulis gaya langsung di dalam JavaScript melalui library seperti styled-components. Kamu membuat komponen styled.div yang sudah membawa gaya bawaannya, sehingga gaya…
32
React Router
React Router adalah library routing sisi klien yang memetakan URL ke komponen React tanpa memuat ulang halaman. Kamu memasang BrowserRouter di root lalu mendeklarasikan rute…
33
React Transitions
React Transition Group membantu menambahkan animasi masuk, keluar, dan pindah pada elemen React. Komponen CSSTransition menambahkan kelas CSS sesuai status enter atau exit, lalu…
34
React Forward Ref
forwardRef memungkinkan komponen meneruskan ref yang diterima penggunanya ke elemen DOM di dalamnya. Ini berguna saat komponen pembungkus seperti input kustom perlu mengekspos…
35
React HOC
Higher-Order Component adalah fungsi yang menerima satu komponen lalu mengembalikan komponen baru dengan perilaku tambahan, mirip pola higher-order function di JavaScript. HOC…
36
React Sass
React mendukung Sass dengan menambahkan paket sass lalu mengimpor berkas berekstensi .scss ke dalam komponen. Sass membawa fitur seperti variabel $, nesting, mixin, dan partial…
02
React Hooks
9 lesson
01
What is Hooks?
Hooks adalah fungsi bawaan React yang memungkinkan komponen fungsional memakai state dan siklus hidup tanpa menulis class. useState, useEffect, dan useContext adalah contoh yang…
02
React useState
useState memungkinkan komponen fungsional menyimpan data yang bertahan antar render. Kamu mendeklarasikan pasangan berupa nilai state dan fungsi setter, lalu memanggil setter…
03
React useEffect
useEffect menjalankan efek samping setelah komponen dirender ke DOM, seperti mengambil data, berlangganan event, atau mengubah judul halaman. Daftar dependency menentukan apakah…
04
React useContext
useContext membaca nilai dari React Context tanpa harus menulis komponen Consumer yang berlapis. Kamu membuat context dengan createContext, membungkus bagian aplikasi dengan…
05
React useRef
useRef mengembalikan objek mutable yang bertahan selama komponen hidup tanpa menyebabkan render ulang saat isinya diubah. Objek .current sangat berguna untuk menyimpan referensi…
06
React useReducer
useReducer adalah alternatif useState untuk state yang lebih kompleks, terdiri atas state dan fungsi dispatch. dispatch mengirim action ke reducer murni yang menghitung state…
07
React useCallback
useCallback meng-memoisasi fungsi agar tidak dibuat ulang pada setiap render, selama dependensinya tidak berubah. Ini penting saat fungsi diteruskan ke komponen anak yang…
08
React useMemo
useMemo mengembalikan nilai hasil perhitungan yang sudah di-memoisasi sehingga hanya dihitung ulang saat dependensinya berubah. Cocok untuk proses mahal seperti menyaring ribuan…
09
React Custom Hooks
Custom Hook adalah fungsi JavaScript biasa berawalan use yang memanggil Hooks lain di dalamnya, sehingga logika berulang bisa dipakai ulang di banyak komponen. Sebuah custom Hook…