0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

Kuasai ReactJS untuk membangun antarmuka pengguna yang dinamis dengan ReactJS Academy.

🤖 Bertenaga AI📚 88 kursus👥 100.000+ pelajar⭐ Rating 4,9
Ringkasan Kursus

Bangun Antarmuka Nyata dengan React

React adalah library JavaScript yang mendefinisikan bagaimana sebagian besar UI production dibangun saat ini — dari single-page apps dan situs Next.js hingga aplikasi mobile dan desktop lintas platform. Track ini mencakup disiplin lengkap: arsitektur komponen, manajemen state, pengambilan data, performa, testing, dan deployment. Semuanya didasarkan pada cara React benar-benar bekerja — reconciler, fiber model, semantik hooks — bukan hanya surface API-nya.

Apa yang Akan Anda Pelajari

Anda akan mulai dengan JSX, props, state, dan controlled components, kemudian lanjut ke useEffect, useRef, dan useReducer. Kursus praktis mencakup routing dengan React Router v6, penanganan form dengan React Hook Form, server state dengan React Query dan SWR, global state dengan Redux Toolkit, Zustand, dan Jotai. Anda akan bekerja dengan TypeScript di React, menulis integration dan E2E tests, membangun design systems dengan Storybook, menangani UI real-time melalui WebSockets, dan mengirim API type-safe dengan tRPC. Path juga mencakup Next.js App Router, server components, server actions, dan autentikasi dengan NextAuth.js.

Learning Path

Sembilan puluh lima kursus berjalan dari A1 hingga C1. Kursus A1 dan A2 membangun fondasi React, JSX rendering, CSS animations, local storage persistence, dan dark mode. Kursus B1 membangun kepercayaan diri dengan context patterns, i18n, React Spring, Framer Motion, drag-and-drop dengan dnd-kit, dan complex data tables dengan TanStack Table. Kursus B2 mengatasi rendering dan memoization, Suspense, code splitting, React Native untuk React developers, deployment ke Vercel dan AWS, dan Electron untuk aplikasi desktop. Level C1 selesai dengan topik lanjutan: Micro-Frontend Architecture, SSR and Hydration Deep Dive, Module Federation, Islands Architecture with Astro, WebAssembly integration, Edge Rendering with Cloudflare Workers, dan OpenTelemetry for frontend observability.

Cara Kerjanya

Setiap kursus terbagi menjadi pelajaran singkat dan terfokus yang Anda selesaikan di editor kode built-in dengan feedback real-time. Tutor AI tersedia kapan pun Anda terjebak pada suatu konsep atau test yang gagal. Anda dapat menyelesaikan track secara berurutan atau langsung ke level yang sesuai dengan pengalaman Anda saat ini.

Mulai Belajar →

Cara Kamu Belajar

🎯
Pelajaran Interaktif
Latihan koding langsung dengan umpan balik real-time
🤖
AI Tutor
Dapatkan bantuan instan dari AI kami saat kamu stuck
💻
Editor Bawaan
Tulis dan jalankan kode langsung di browser kamu
🏆
Sertifikat
Raih sertifikat saat kamu menyelesaikan kursus
Kurikulum

88 Kursus

Setiap kursus di jalur belajar React Academy.

01

Memulai React: Konsep & Penyiapan

A13 pelajaran

Mulai dengan dasar React: komponen, UI deklaratif, dan cara diffing memperbarui DOM secara efisien. Kemudian siapkan proyek (misalnya Vite)…

02

Dasar-Dasar JSX & Rendering

A13 pelajaranPRO

Pelajari aturan JSX: ekspresi dan atribut, mengembalikan fragmen, merender daftar dengan key, kondisi sederhana, dan pilihan penataan gaya…

03

React DevTools dan Penelusuran Galat

A24 pelajaranPRO

Kuasai ekstensi peramban React DevTools untuk memeriksa hierarki komponen, membuat profil render, dan menelusuri galat status serta props s…

04

Animasi dan Transisi CSS di React

A24 pelajaranPRO

Buat animasi masuk, keluar, dan perubahan keadaan yang mulus di React menggunakan transisi dan bingkai kunci CSS — tanpa memerlukan pustaka…

05

Mengangkat State dan Solusi Penerusan Prop

A24 pelajaranPRO

Bagikan state di antara komponen saudara dengan mengangkatnya, dan pahami kapan penerusan prop menjadi masalah yang perlu diatasi.

06

Penyimpanan Lokal dan Persistensi Keadaan

A24 pelajaranPRO

Pertahankan keadaan React setelah halaman dimuat ulang menggunakan localStorage, tangani sinkronisasi antartab, dan pilih API penyimpanan p…

07

Mode Gelap dengan React

A24 pelajaranPRO

Bangun sistem mode gelap yang kuat menggunakan properti kustom CSS, konteks React, dan kueri media prefers-color-scheme—sekaligus mencegah…

08

Props & Komposisi

A23 pelajaranPRO

Teruskan data dengan props , tetapkan nilai default sederhana melalui destructuring, susun UI dengan children , dan utamakan komposisi dari…

09

Dasar-Dasar State & Peristiwa

A23 pelajaranPRO

Kuasai useState dan penanganan peristiwa: perbarui state dengan benar, tangani onClick/onChange, dan persiapkan masukan terkontrol.

10

Formulir & Validasi (Pengantar)

A23 pelajaranPRO

Pelajari cara membuat formulir terkontrol dengan banyak masukan, menerapkan validasi dasar, dan menangani pengiriman formulir dengan lancar…

11

Dasar-Dasar Perutean

A23 pelajaranPRO

Pahami perutean di sisi klien: cara SPA mengganti tampilan tanpa memuat ulang halaman sepenuhnya, jalur dan parameter dasar, serta keadaan…

12

useRef & DOM

A23 pelajaranPRO

Kuasai useRef : pertahankan nilai di antara render tanpa memicu render ulang, akses simpul DOM, dan kelola pengatur waktu dengan aman.

13

Linting & Konvensi

A23 pelajaranPRO

Jaga kode tetap rapi dengan aturan ESLint + React dan format otomatis dengan Prettier . Tambahkan skrip dan perbaiki masalah dengan cepat.

14

Komponen Terkontrol vs Tidak Terkontrol

A22 pelajaranPRO

Kuasai masukan terkontrol dan tidak terkontrol: kapan memilih masing-masing, pola ref sederhana, dan nilai bawaan yang aman.

15

React Strict Mode dan Praktik Terbaik

B14 pelajaranPRO

Pelajari fungsi StrictMode, peringatan yang ditampilkannya, serta konvensi penulisan kode yang membuat aplikasi React lebih mudah dipelihar…

16

Portal dan Modal dalam React

B14 pelajaranPRO

Render konten di luar hierarki DOM induk menggunakan React Portals untuk membangun modal, tooltip, dan lapisan hamparan.

17

API Children React dan Pola Slot

B14 pelajaranPRO

Bekerjalah dengan props.children, utilitas React.Children, dan terapkan API komponen berbasis slot yang fleksibel.

18

Komponen Tak Terkontrol dan Pengunggahan Berkas

B14 pelajaranPRO

Gunakan masukan tak terkontrol dengan useRef, baca nilai masukan berkas, dan tangani alur kerja pengunggahan berkas dalam React.

19

Pola Context React dan Kinerja

B14 pelajaranPRO

Rancang penyedia Context yang meminimalkan render ulang dengan memoization, pemisahan context, dan pola selector.

20

Internasionalisasi (i18n) dalam React

B14 pelajaranPRO

Tambahkan dukungan multibahasa ke aplikasi React menggunakan react-i18next, kelola berkas terjemahan, dan tangani pergantian lokal.

21

API Browser di React

B14 pelajaranPRO

Integrasikan API browser yang kuat—Clipboard, Geolocation, Notifications, dan IntersectionObserver—ke dalam komponen React dengan pembersih…

22

Debouncing dan Throttling di React

B14 pelajaranPRO

Cegah perenderan ulang dan panggilan API yang berlebihan dengan menerapkan pola debounce dan throttle sebagai hook React yang dapat digunak…

23

Pelengkapan Otomatis Formulir dan Pencarian Type-Ahead

B14 pelajaranPRO

Bangun komponen pelengkapan otomatis dan type-ahead yang aksesibel serta dapat dinavigasi dengan papan ketik dari awal menggunakan status d…

24

Mengelola Formulir dengan React Hook Form

B14 pelajaranPRO

Bangun formulir React yang berkinerja baik dan fleksibel menggunakan React Hook Form: pendaftaran, validasi, tampilan galat, dan integrasi…

25

Pengelolaan State dengan Zustand

B14 pelajaranPRO

Gunakan Zustand untuk mengelola state global dalam aplikasi React: penyimpanan, tindakan, selector, persistensi, dan integrasi devtools.

26

Pola Lanjutan React Router v6

B14 pelajaranPRO

Jelajahi lebih dari sekadar rute dasar dengan tata letak bertingkat, loader, tindakan, rute terlindungi, dan pengelolaan state parameter pe…

27

TypeScript dengan React: Pemberian Tipe Komponen dan Hook

B14 pelajaranPRO

Tambahkan TypeScript ke proyek React: beri tipe pada props, peristiwa, hook, context, dan komponen generik dengan percaya diri.

28

TanStack Table: Tabel Data Kompleks

B14 pelajaranPRO

Bangun tabel data siap produksi dengan pengurutan, penyaringan, penomoran halaman, dan pemilihan baris menggunakan arsitektur headless TanS…

29

Jotai: Pengelolaan Status Atomik

B14 pelajaranPRO

Kelola status React dengan model atomik minimal Jotai—atom yang dapat dikomposisikan, menurunkan nilai, menangani proses asinkron, dan teri…

30

SWR: Pengambilan Data oleh Vercel

B14 pelajaranPRO

Gunakan strategi stale-while-revalidate SWR untuk pengambilan data yang cepat dan andal dengan validasi ulang, mutasi, dan dukungan offline…

31

dnd-kit: Seret dan Lepas yang Aksesibel

B14 pelajaranPRO

Bangun antarmuka React yang aksesibel dan ramah sentuhan untuk interaksi seret dan lepas dengan dnd-kit—termasuk daftar yang dapat diurutka…

32

React Spring: Animasi Berbasis Fisika

B14 pelajaranPRO

Buat animasi React yang mengalir dan berbasis fisika pegas menggunakan react-spring—dari transisi nilai sederhana hingga interaksi kompleks…

33

Peristiwa Server-Sent dan Polling di React

B14 pelajaranPRO

Implementasikan umpan data waktu nyata di React menggunakan Server-Sent Events dan strategi polling—serta pahami perbandingannya dengan Web…

34

Pendalaman useEffect

B13 pelajaranPRO

Pahami useEffect : kapan fungsi ini dijalankan dibandingkan dengan render, cara array dependensi mengendalikannya, dan cara menulis pembers…

35

Pola Pengambilan Data

B13 pelajaranPRO

Rancang UI data yang tangguh: tangani keadaan memuat , kesalahan , kosong , dan berhasil dengan umpan balik yang jelas serta kerangka ringa…

36

Context & useReducer

B13 pelajaranPRO

Bagikan state di antara komponen yang berjauhan dengan Context agar tidak perlu meneruskan prop berulang kali; siapkan Provider dan baca ni…

37

Hook Kustom

B13 pelajaranPRO

Ekstrak logika yang dapat digunakan kembali ke dalam hook kustom : tentukan parameter yang jelas, kembalikan nilai/tindakan yang stabil, da…

38

Dasar-Dasar Aksesibilitas

B13 pelajaranPRO

Bangun UI yang inklusif: gunakan semantik yang benar, label dan peran yang jelas, serta kelola fokus papan ketik untuk navigasi yang lancar.

39

Animasi dengan Framer Motion

B14 pelajaranPRO

Tambahkan animasi dan transisi yang mulus ke aplikasi React dengan Framer Motion: komponen motion, varian, gestur, dan animasi tata letak.

40

Batas Kesalahan & Ketangguhan

B13 pelajaranPRO

Tangkap kesalahan saat render dengan Error Boundaries, tampilkan fallback yang aman, dan jaga bagian aplikasi lainnya tetap responsif.

41

TypeScript dengan React (Opsional)

B13 pelajaranPRO

Tambahkan tipe ringan ke komponen React. Mulailah dengan prop, lalu ekstrak generik yang dapat digunakan kembali agar kode UI tetap aman da…

42

Struktur Proyek & Konvensi

B13 pelajaranPRO

Atur aplikasi React: folder yang mengutamakan fitur, primitif UI kecil vs komponen komposit, hook dan pengujian yang ditempatkan bersama, s…

43

Daftar tervirtualisasi dengan react-window

B24 pelajaranPRO

Tampilkan ribuan item daftar tanpa penurunan kinerja dengan menggunakan react-window untuk memvirtualisasi keluaran DOM — hanya merender ba…

44

Pola Asinkron dalam React: Promise dan Konkruensi

B24 pelajaranPRO

Tangani operasi asinkron secara idiomatis dalam React dengan useEffect, useTransition, useDeferredValue, dan Suspense.

45

Pola React: Render Props dan HOC

B24 pelajaranPRO

Pahami render props dan komponen tingkat tinggi sebagai pola klasik penggunaan ulang kode sebelum keduanya digantikan oleh hooks.

46

useLayoutEffect vs useEffect

B24 pelajaranPRO

Pahami perbedaan halus tetapi penting antara useEffect dan useLayoutEffect—kapan masing-masing dijalankan relatif terhadap commit DOM—dan g…

47

Redux Toolkit dan RTK Query

B24 pelajaranPRO

Kelola state aplikasi yang kompleks dengan slice Redux Toolkit, thunk, dan RTK Query untuk caching state server serta sinkronisasi.

48

Komponen Server dan Fitur React 19

B24 pelajaranPRO

Pahami Komponen Server React, hook use(), Actions, dan API React 19 lainnya yang mengubah cara aliran data dalam aplikasi.

49

React Query: Pengelolaan State Server

B24 pelajaranPRO

Kelola state server dengan TanStack Query: pengambilan, caching, pengambilan ulang di latar belakang, mutasi, dan penomoran halaman.

50

Pengujian React: Integrasi dan E2E

B24 pelajaranPRO

Tulis pengujian integrasi dengan React Testing Library dan pengujian menyeluruh dengan Playwright untuk memvalidasi alur pengguna nyata.

51

Sistem Desain Komponen dan Storybook

B24 pelajaranPRO

Dokumentasikan, kembangkan, dan uji komponen UI React secara terisolasi menggunakan Storybook dengan cerita CSF3 dan addon.

52

UI Waktu Nyata dengan WebSockets dan React

B24 pelajaranPRO

Bangun antarmuka React yang diperbarui secara langsung menggunakan WebSockets dan pustaka seperti Socket.IO untuk obrolan, notifikasi, dan…

53

tRPC: API Aman Tipe dari Ujung ke Ujung

B24 pelajaranPRO

Bangun API yang sepenuhnya aman tipe tanpa skema atau pembuatan kode menggunakan tRPC—berbagi tipe antara frontend React dan backend Node.j…

54

Apollo Client dan React

B24 pelajaranPRO

Integrasikan GraphQL ke aplikasi React dengan Apollo Client—melakukan kueri, mutasi, caching, dan menjaga UI tetap sinkron dengan data serv…

55

UI Optimistis dan Pola Mutasi

B24 pelajaranPRO

Bangun UI yang cepat dan responsif dengan menampilkan hasil segera sebelum konfirmasi server—disertai pemulihan yang tepat saat gagal dan s…

56

Mempublikasikan Pustaka Komponen React

B24 pelajaranPRO

Kemas dan publikasikan pustaka komponen React yang dapat digunakan ulang ke npm—dengan menangani keluaran ganda ESM/CJS, dependensi peer, t…

57

Rendering & Memoisasi

B23 pelajaranPRO

Pahami fase render dan commit React, kapan komponen diperbarui, dan kapan memoiasi membantu.

58

Transisi & Suspense (Dasar)

B23 pelajaranPRO

Pelajari dasar UI konkuren dengan useTransition : jaga agar pengetikan tetap responsif, tampilkan petunjuk bahwa proses masih berlangsung,…

59

Pemisahan Kode & Strategi Aset

B23 pelajaranPRO

Muat hanya yang diperlukan dengan memisahkan kode untuk layar dan widget. Gunakan React.lazy dan Suspense agar aplikasi terasa lebih cepat…

60

Pengujian Komponen React

B23 pelajaranPRO

Siapkan pengujian dengan Vitest/Jest dan React Testing Library ; render komponen, lakukan pencarian berdasarkan peran/label, dan jalankan d…

61

Dasar-Dasar App Router Next.js

B24 pelajaranPRO

Bangun aplikasi web full-stack dengan App Router Next.js 14+: perutean berbasis berkas, tata letak, komponen server, dan metadata.

62

Pengambilan Data dan Caching Next.js

B24 pelajaranPRO

Ambil, cache, dan validasi ulang data dalam App Router Next.js menggunakan opsi fetch, unstable_cache, dan validasi ulang sesuai permintaan.

63

Autentikasi dalam Next.js dengan NextAuth.js

B24 pelajaranPRO

Tambahkan autentikasi ke aplikasi Next.js menggunakan Auth.js (NextAuth v5): penyedia OAuth, kredensial, sesi, dan perlindungan rute.

64

Dasar-Dasar React Native untuk Pengembang React

B24 pelajaranPRO

Terapkan pengetahuan React Anda ke perangkat seluler dengan mempelajari primitif React Native, penataan gaya, navigasi, dan API perangkat a…

65

Menerapkan Aplikasi React: Vercel, AWS, dan Docker

B24 pelajaranPRO

Terapkan aplikasi React dan Next.js ke produksi menggunakan Vercel, AWS S3/CloudFront, dan kontainer Docker dengan alur kerja CI/CD.

66

React Server Actions: Formulir dan Mutasi

B24 pelajaranPRO

Gunakan React 19 Server Actions dan tindakan formulir Next.js untuk menangani mutasi di sisi server—menghilangkan rute API untuk pola formu…

67

Keamanan Aplikasi React

B24 pelajaranPRO

Perkuat aplikasi React terhadap XSS, CSRF, dan kerentanan lainnya—dengan panduan praktis tentang Content Security Policy, pengelolaan rahas…

68

Sistem Token Desain untuk React

B24 pelajaranPRO

Bangun sistem token desain yang dapat diskalakan untuk mendukung pustaka komponen React multi-tema—mulai dari definisi token hingga variabe…

69

Electron.js: Aplikasi Desktop dengan React

B24 pelajaranPRO

Bangun aplikasi desktop lintas platform menggunakan Electron dengan frontend React—mencakup komunikasi IPC, API native, dan pengemasan dist…

70

Komponen Majemuk

B23 pelajaranPRO

Bangun komponen majemuk: komponen induk menyediakan context, sedangkan komponen anak menggunakannya untuk API yang fleksibel.

71

Formulir dalam Skala Besar (Vanila atau Pembantu Ringan)

B23 pelajaranPRO

Bangun formulir besar dengan bagian-bagian kecil yang tangguh: array bidang, bagian dinamis, dan alur validasi sederhana.

72

Perutean Lanjutan

B23 pelajaranPRO

Melampaui dasar-dasar: tata letak bertingkat, pemuat rute secara konseptual, dan gagasan prapengambilan sederhana untuk navigasi yang lebih…

73

State Server vs State UI

B23 pelajaranPRO

Pahami apa yang termasuk dalam tembolok server dan apa yang merupakan state UI lokal. Ambil data, segarkan, dan hindari mencampur berbagai…

74

Pola untuk Modal/Toast/Overlay

B23 pelajaranPRO

Buat overlay yang mudah diakses: render dengan portal, pertahankan fokus di dalamnya, dan dukung penutupan cepat dengan Escape/latar belaka…

75

Bangun, Analisis, Rilis

B23 pelajaranPRO

Siapkan aplikasi untuk produksi: build pengembangan vs produksi, peta sumber, variabel lingkungan sederhana, dan pemeriksaan kecil agar dap…

76

useImperativeHandle dan forwardRef

C14 pelajaranPRO

Kuasai API React imperatif — tampilkan nilai instans komponen kustom kepada komponen induk menggunakan forwardRef dan useImperativeHandle d…

77

useSyncExternalStore: Berlangganan ke Penyimpanan Eksternal

C14 pelajaranPRO

Pelajari hook useSyncExternalStore di React 18 — cara yang tepat untuk menyinkronkan komponen React dengan sumber keadaan eksternal seperti…

78

Arsitektur Mikro-Frontend dengan React

C14 pelajaranPRO

Uraikan frontend React besar menjadi mikro-frontend yang diterapkan secara independen menggunakan Module Federation dan single-spa.

79

Pendalaman SSR dan Hydration React

C14 pelajaranPRO

Pahami mekanisme render sisi server, hydration, hydration selektif, dan streaming HTML dengan renderToPipeableStream milik React.

80

Pola TypeScript Lanjutan untuk React

C14 pelajaranPRO

Tingkatkan keterampilan TypeScript React dengan gabungan terdiskriminasi, tipe terpetakan, tipe kondisional, dan API komponen yang aman tip…

81

Kinerja Web: Core Web Vitals dan React

C14 pelajaranPRO

Ukur dan tingkatkan Core Web Vitals (LCP, INP, CLS) dalam aplikasi React dengan alat pembuatan profil, analisis bundel, dan optimasi terara…

82

Monorepo dan Nx untuk Proyek React

C14 pelajaranPRO

Atur berbagai aplikasi React dan pustaka bersama dalam monorepo menggunakan Nx dengan penjadwalan tugas cerdas dan CI berbasis perubahan.

83

Arsitektur Islands dengan Astro dan React

C14 pelajaranPRO

Hindari hydration seluruh halaman dengan mengadopsi Arsitektur Islands—lakukan hydration secara selektif hanya pada komponen React interakt…

84

Integrasi React dan WebAssembly

C14 pelajaranPRO

Integrasikan modul WebAssembly ke aplikasi React untuk tugas yang membutuhkan banyak komputasi—mulai dari modul Rust WASM hingga memori ber…

85

Perenderan Edge: Cloudflare Workers dan React

C14 pelajaranPRO

Sajikan aplikasi React dari edge dengan latensi kurang dari satu milidetik—menggunakan Cloudflare Workers, SSR streaming, dan strategi cach…

86

OpenTelemetry untuk Observabilitas Frontend React

C14 pelajaranPRO

Instrumentasikan aplikasi React dengan OpenTelemetry untuk mengumpulkan trace, mengukur performa pengguna nyata, dan menghubungkan peristiw…

87

Streaming React dan Pemuatan Progresif

C14 pelajaranPRO

Gunakan SSR streaming React 18 dan Suspense untuk mengirimkan HTML ke browser secara bertahap—meningkatkan persepsi performa tanpa menunggu…

88

Module Federation dengan React

C14 pelajaranPRO

Implementasikan Webpack Module Federation untuk membangun dan menerapkan micro frontend React secara mandiri—dengan berbagi dependensi, sta…

FAQ

Pertanyaan yang Sering Diajukan

Apakah kursus React Academy gratis?

Ya. Kamu bisa memulai kursus React Academy secara gratis dan menyelesaikan pelajaran interaktifnya tanpa biaya. Langganan PRO opsional membuka akses ke alat AI tingkat lanjut dan sertifikat yang bisa dibagikan.

Apakah aku perlu pengalaman sebelumnya untuk belajar JSX?

Tidak. Kursus dimulai dari dasar dan secara bertahap bergerak ke topik yang lebih canggih, jadi kamu bisa memulai meski tanpa pengalaman JSX sebelumnya.

Bagaimana cara aku belajar JSX di CoddyKit?

Kamu belajar dengan praktik. Pelajaran interaktif pendek memadukan penjelasan yang jelas dengan latihan koding langsung yang berjalan real-time, dan tutor AI 24/7 memberikan bantuan personal kapan pun kamu stuck.

Apakah aku dapat sertifikat saat menyelesaikan React Academy?

Ya. Pelajar PRO bisa mengikuti ujian dan meraih sertifikat penyelesaian yang bisa dibagikan dengan kode verifikasi untuk kursus React Academy.

Bisakah aku belajar JSX di ponselku?

Ya. CoddyKit tersedia di web dan sebagai aplikasi native iOS dan Android, jadi kamu bisa belajar JSX di perangkat apa pun dan progresmu tersinkronisasi di semuanya.

Mulai React Academy Sekarang

Bergabunglah dengan ribuan pelajar yang menguasai pemrograman dengan pelajaran bertenaga AI.

Mulai Gratis →Jelajahi Semua Kursus