Belajar & Praktik React

Pelajari React dengan menulis kodenya. Tutorial React JavaScript ini membawa Anda dari baris pertama JSX hingga hooks, manajemen state, dan aplikasi lengkap, dengan setiap komponen yang Anda tulis dirender langsung di ponsel melalui pratinjau langsung.

88 kursus dan 324 pelajaran interaktif, level A1 hingga C1. Baca konsep singkat, ketik kode nyata, ketuk Jalankan, dan lihat hasilnya. Tidak perlu laptop atau penyiapan.

TULIS KODE DI PONSEL

• Editor kode yang dibuat untuk JSX, dengan pratinjau langsung yang merender komponen Anda di dalam aplikasi

• Runtime (ReactDOM dan Babel) sudah disertakan di dalam aplikasi, sehingga kode Anda berjalan di perangkat, bukan di server

• Proyek multi-file: impor satu komponen ke komponen lain, seperti cara aplikasi nyata dibuat

• Ketuk tombol yang dirender, ketik ke formulir, dan lihat UI merespons

LAB

• Hooks Lab: lihat setiap perubahan state dan setiap render ulang saat terjadi

• Kenop props: ubah prop dengan slider dan lihat komponen diperbarui

• Profiler render dan linimasa state (Pro): cari tahu komponen mana yang dirender ulang dan alasannya, lalu telusuri kembali state Anda

LANGKAH DEMI LANGKAH, DARI PEMULA HINGGA LANJUT

• Dasar: JSX, komponen, props, state, event, list dan key, render kondisional

• Hooks: useState, useEffect, useRef, useReducer, hooks kustom, useLayoutEffect, dan lainnya

• Formulir dan validasi, React Hook Form, input terkontrol dan tidak terkontrol

• Manajemen state: Context, Redux Toolkit dan RTK Query, Zustand dan Jotai

• React Router, pengambilan data, TanStack Query, SWR, dan UI optimistis

• TypeScript, pengujian, Storybook, aksesibilitas, dan keamanan

• Performa: memoization, pemisahan kode, Suspense, transisi, list tervirtualisasi

• React 19 dan Server Components, SSR dan hidrasi, streaming

• Next.js App Router, pengambilan data, dan autentikasi

• Dasar-dasar React Native untuk pengembang web

• Deployment, micro-frontend, dan module federation

BANGUN PROYEK NYATA

20 proyek terpandu, satu langkah kecil setiap kali: tombol suka, kartu profil, kalkulator tip, game kuis, stopwatch, formulir pendaftaran, keranjang belanja, carousel gambar, list dengan pagination, aplikasi todo, dan lainnya. Setiap langkah memeriksa apakah komponen Anda benar-benar berfungsi sebelum Anda melanjutkan.

BERLATIH HINGGA MELEKAT

• 30 misi coding (mudah, sedang, dan sulit) tentang hooks, rendering, formulir, context, dan performa

• UI Match: bangun ulang komponen target dan dapatkan skor untuk struktur, gaya, dan teks

• Bug Hunt: temukan dan perbaiki bug pada komponen yang rusak

• Component Recall: ketik kembali bagian yang hilang ke dalam kode yang sudah berhasil Anda buat, dengan pengulangan berjarak

• Kuis dengan 50 pertanyaan, 50 pertanyaan wawancara, dan lembar contekan

• Tantangan harian, streak, XP, dan papan peringkat

MENTOR AI (PRO)

Bingung dengan hook atau error? Tanyakan kepada mentor AI untuk mendapatkan penjelasan yang jelas, minta AI meninjau kode Anda dan menyarankan perbaikan, atau buat pelajaran kustom tentang topik apa pun.

SERTIFIKAT (PRO)

Lulus ujian akhir dan dapatkan sertifikat yang bisa Anda bagikan.

GRATIS DAN PRO

Gratis: kursus pertama, satu proyek terpandu, 2 misi coding, editor kode dengan pratinjau langsung, Hooks Lab, kenop props, Bug Hunt, dan 3 pemeriksaan UI Match per hari. Versi gratis menampilkan iklan.

Pro: semua 88 kursus, semua proyek dan misi, mentor AI, profiler render dan linimasa state, ujian sertifikat, serta tanpa iklan.

Aplikasi ini tersedia dalam 22 bahasa.

React adalah merek dagang Meta Platforms, Inc. Next.js adalah merek dagang Vercel, Inc. Ini adalah aplikasi pembelajaran independen, tidak berafiliasi dengan atau didukung oleh Meta atau Vercel.

Kebijakan Privasi: https://www.coddykit.com/terms/privacy-policy