React

1. 1

   Apa itu React?

   Selamat datang. Kalau kamu belum pernah menulis satu baris JavaScript pun dan belum yakin apa itu "framework", kamu ada di tempat yang tepat. Di...

   What React isComponents as functionsVirtual DOM intuitionRendering JSXCreating a Vite app
   25 mnt
2. 2

   JSX dan Components

   Di pelajaran sebelumnya kamu melihat sebuah komponen mengembalikan sesuatu yang mirip HTML: return <h1>Hello, React</h1>;. Itu semestinya terasa agak...

   JSX syntax rulesSingle root elementClassName vs classEmbedding expressions with {}Defining componentsComposing components
   30 mnt
3. 3

   Props

   Semua komponen yang kamu tulis sejauh ini isinya masih dipatok mati. Greeting selalu menyapa nama yang sama, Card selalu menampilkan teks yang sama....

   Passing props as attributesReceiving props objectDestructuring props in signatureDefault valuesThinking about prop shapes
   30 mnt
4. 4

   State dengan useState

   Setiap komponen yang kamu tulis sejauh ini menghasilkan output yang sama untuk props yang sama, setiap kali tanpa kecuali. Itu tidak masalah untuk...

   UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern
   35 mnt
5. 5

   Menangani Peristiwa

   Komponen yang hanya me-render berdasarkan props dan state tidak interaktif dengan sendirinya, harus ada yang menyadari ketika pengguna mengklik...

   OnClick handlerOnChange basicsPassing functions vs calling themEvent objectPassing handlers as props
   30 mnt
6. 6

   Rendering Bersyarat dan Daftar

   Hampir setiap layar yang pernah kamu pakai menampilkan satu hal alih-alih hal lain tergantung suatu kondisi: banner "kamu punya pesan baru" yang...

   && for show/hideTernary for either/orMapping arrays to JSXThe key propWhy keys need to be stable
   30 mnt
7. 7

   Formulir dan Controlled Inputs

   Ketik satu huruf ke dalam <input> HTML biasa dan browser langsung mengurusnya sendiri: elemen DOM-nya diam-diam mencatat apa yang kamu ketik, dan...

   Controlled input patternValue and onChange togetherMulti-field form stateOnSubmit and preventDefaultGathering form data
   35 mnt
8. 8

   Effects dengan useEffect

   Sejauh ini tugas sebuah komponen adalah melihat props dan state yang dipegangnya lalu menjawab satu pertanyaan: apa yang harus ada di layar sekarang....

   What counts as a side effectUseEffect signatureDependency arrayRunning on mount onlyCleanup functionSubscribe/unsubscribe pattern
   40 mnt
9. 9

   Pengambilan Data

   Hampir tidak ada aplikasi nyata yang cukup hanya menampilkan data yang sudah ada di layar pengguna. Pada satu titik, sebuah komponen perlu meminta...

   Fetch inside useEffectLoading/error/data statesAbortController cleanupPreventing setState after unmountMention TanStack Query as a next step
   40 mnt
10. 10

    Komposisi Component

    Kamu sudah membuat sebuah card dengan garis tepi dan bayangan, dan tampilannya bagus. Sekarang kamu butuh card yang sama mengelilingi sebuah foto,...

    Children propWrapping componentsPassing JSX as propsLifting state upThinking in component trees
    35 mnt
11. 11

    Context dan useContext

    Aplikasimu punya tombol pengalih dark mode. Tombolnya ada di panel settings, tapi yang perlu tahu nilainya adalah sebuah button delapan komponen ke...

    CreateContextContext.ProviderUseContextWhen context is the right toolContext vs prop drilling tradeoffs
    35 mnt
12. 12

    useReducer

    Sebuah form checkout awalnya sederhana. Ada sebuah nilai, jadi kamu tambahkan useState. Lalu ia butuh pesan error, jadi tambah lagi satu useState....

    When to reach for useReducerReducer function shapeAction objectsDispatchCombining useReducer with useContext
    35 mnt
13. 13

    Hook Kustom

    Kamu menulis sebuah drawer yang bisa dibuka dan ditutup. Tiga baris useState dan satu handler yang membalik boolean. Lalu hal yang sama untuk...

    Extracting stateful logic into a functionUse prefix conventionUseToggle exampleUseLocalStorage exampleHooks rules
    35 mnt
14. 14

    Performa dan Memoization

    Aplikasimu punya tabel berisi dua ribu baris dengan kotak pencarian di atasnya. Tiap ketukan tombol terasa berat: kamu mengetik, dan setengah detik...

    React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing
    35 mnt
15. 15

    Perutean dengan React Router

    Semua yang kamu bangun sejauh ini tinggal di satu alamat. Halamannya cuma satu, dan apa pun yang ingin kamu tunjukkan ke user, kamu tampilkan atau...

    Installing react-router-domBrowserRouterRoutes and RouteLink for navigationUseParamsUseNavigate
    40 mnt
16. 16

    Menguji Components React

    Kamu mengubah satu baris di sebuah komponen bersama lalu menghabiskan dua puluh menit mengklik-klik seluruh aplikasi untuk memastikan tidak ada yang...

    Vitest + React Testing Library setupRender and screenGetByRole queriesUserEvent for interactionsWriting one good button test
    40 mnt
17. 17

    Capstone: Aplikasi Todo

    Setiap pelajaran sejauh ini menyodorkan satu ide sekaligus dengan contoh kecil di sekelilingnya. Aplikasi nyata tidak begitu. Di aplikasi nyata,...

    Combining state, lists, controlled inputsCustom hook for localStorage persistenceSmall routing setupPutting it together
    60 mnt

Setiap pelajaran, kuis, dan balasan tutor tampil dalam bahasamu. Tutor AI menjawab dalam bahasa yang kamu pakai.

See how hiring teams interview engineers on React, in production-like environments.