Belajar React: Kursus Code
Belajar React: Kursus Code — Pelajari pemrograman React dengan menulis JSX dan menjalankannya di ponsel
Belajar React: Kursus Code adalah aplikasi iOS dan Android yang gratis untuk memulai, yang mengajarkan pemrograman React kepada pemula dengan sedikit pengetahuan HTML, CSS, atau JavaScript, serta developer yang beralih dari framework lain. Tulis JSX di editor kode, ketuk Run, dan lihat komponen Anda dirender dalam pratinjau langsung di dalam aplikasi. 88 kursus dan 324 pelajaran membawa Anda dari komponen pertama hingga hooks dan pengelolaan state, lalu ke Next.js, dengan 20 proyek terpandu di sepanjang perjalanan.
- Harga
- Gratis, upgrade Pro
- Platform
- iOS dan Android
- Bahasa
- 22
- Rating usia
- 4+
- Versi
- 82.6.1
- Memerlukan
- iOS 15.1 atau lebih baru
- App Store
- 3.8 ★ (4)
Komponen Anda dirender di ponsel, bukan di server.
Runtime, ReactDOM, dan Babel sudah dibundel ke dalam aplikasi, sehingga JSX yang Anda tulis dikompilasi dan ditampilkan di perangkat. Anda dapat mengetuk tombol yang baru saja dibuat, mengetik di formulir, dan melihat UI merespons—itulah siklus umpan balik yang membuat hooks mulai mudah dipahami.
Apa itu
Belajar React: Kursus Code adalah kursus React gratis untuk memulai di iOS dan Android dengan 88 kursus dan 324 pelajaran interaktif, mulai dari baris pertama JSX hingga hooks, pengelolaan state, React 19, dan Next.js App Router. Editor bawaan mengompilasi kode Anda di perangkat dan merender komponen dalam pratinjau langsung, sementara 20 proyek terpandu memeriksa setiap langkah sebelum Anda melanjutkan. Aplikasi pembelajaran ini berdiri sendiri dan tidak berafiliasi dengan Meta atau Vercel.
Di dalam aplikasi
Tampilannya
Kursusnya
Materi yang dibahas dalam kursus React
88 kursus yang diambil dari daftar milik aplikasi, diurutkan mengikuti alur yang biasanya digunakan saat pertama kali mempelajari React.
React Kickoff, JSX, serta Props & Composition
Komponen, UI deklaratif, dan cara React memperbarui DOM, lalu aturan JSX, merender list, serta meneruskan data dengan props.
State, Events, Forms, dan useRef
useState dan penanganan event, form terkontrol dengan validasi, serta useRef untuk nilai dan akses DOM yang tidak memicu render.
useEffect, Data Fetching, dan Custom Hooks
Kapan effects dijalankan, array dependensi, status loading dan error untuk panggilan API, serta cara mengekstrak logika yang dapat digunakan kembali ke dalam hooks buatan sendiri.
Context, Redux Toolkit, dan Zustand
Berbagi state tanpa prop drilling menggunakan Context dan useReducer, lalu Redux Toolkit dengan RTK Query, Zustand, dan Jotai untuk aplikasi yang lebih besar.
Routing, React Query, dan Forms dalam Skala Besar
Routing sisi klien dan pola React Router, state server dengan TanStack Query dan SWR, React Hook Form, serta UI optimistis.
Performance, Testing, dan TypeScript
Rendering dan memoisation, code splitting, list tervirtualisasi, testing dengan React Testing Library, serta pemberian tipe pada komponen dan hooks.
React 19, Server Components, dan Next.js
Server Components dan Actions, SSR dan hydration, lalu Next.js App Router dengan data fetching, caching, dan authentication.
Cara kerjanya
Cara kerja pelajaran
Pelajaran dimulai dengan konsep singkat yang langsung diikuti kode untuk Anda tulis dan jalankan, sehingga konsep dan hasilnya tampil di layar yang sama.
Baca satu konsep
Buka kursus dari jalur pembelajaran dan baca pelajaran singkat, misalnya tentang cara kerja pembaruan state atau alasan list memerlukan keys. Ikhtisar kursus menandai pelajaran mana yang gratis, sehingga Anda dapat melihat formatnya sebelum berkomitmen.
Tulis JSX dan ketuk Run
Ketik komponen di editor kode dan jalankan. Pratinjau langsung merender komponen Anda di dalam aplikasi, sehingga Anda dapat mengeklik tombol, mengetik di field, dan melihat apa yang dilakukan kode tersebut.
Periksa, lalu kembangkan
Kuis, misi coding, dan proyek terpandu memastikan konsepnya benar-benar dipahami, sementara AI mentor menjelaskan hook atau error yang tidak dapat Anda pahami. Bug Hunt dan UI Match memberi Anda latihan kedua untuk konsep tersebut.
Apa saja isinya
Yang tersedia di aplikasi
88
Kursus, 324 pelajaran
Mulai dari JSX, props, dan state hingga custom hooks, formulir, Context, dan Redux Toolkit, lalu Server Components, SSR, dan Next.js App Router, dikelompokkan dari A1 hingga C1.
Live
Editor dengan pratinjau langsung
Editor kode yang dibuat untuk JSX, dengan komponen dirender di dalam aplikasi. Proyek multi-file memungkinkan Anda mengimpor satu komponen ke komponen lainnya, seperti cara aplikasi nyata dibangun.
20
Proyek terpandu
Buat tombol like, kartu profil, kalkulator tip, game kuis, keranjang belanja, dan banyak lagi, selangkah demi selangkah. Setiap langkah memeriksa apakah komponen benar-benar berfungsi.
Lab
Hooks Lab dan knob props
Saksikan setiap perubahan state dan render ulang saat terjadi, lalu ubah prop dengan slider untuk melihat komponen diperbarui. Profiler render dan linimasa state tersedia sebagai bagian dari Pro.
30
Misi coding
Misi tingkat mudah, sedang, dan sulit tentang hooks, rendering, formulir, context, dan performa, ditambah UI Match, Bug Hunt, dan Component Recall dengan pengulangan bersela.
AI
AI mentor
Mintalah penjelasan, biarkan AI meninjau kode Anda dan menyarankan perbaikan, atau buat pelajaran khusus tentang topik apa pun. Mentor dan ujian sertifikat tersedia sebagai bagian dari Pro.
Latar belakang
Apa yang sebenarnya perlu Anda pahami untuk menulis React, dan dalam urutan seperti apa?
React adalah library JavaScript untuk membangun antarmuka pengguna dari komponen-komponen kecil yang dapat digunakan kembali dan menggambar ulang dirinya saat datanya berubah. Kebanyakan pemula tidak terhenti pada sintaks, melainkan pada model di baliknya: apa itu render, apa yang termasuk state, dan kapan effects berjalan. Mempelajari konsep-konsep tersebut secara berurutan, dengan sesuatu di layar untuk menguji setiap konsep, lebih cepat daripada membaca semuanya sekaligus.
Komponen dan propsunit yang dapat digunakan kembali
Komponen adalah fungsi yang mengembalikan bagian dari antarmuka, sedangkan props adalah input yang diterimanya dari parent. Karena data mengalir ke bawah melalui props, Anda dapat membaca sebuah komponen dan memperkirakan apa yang akan digambarnya.
Stateyang berubah seiring waktu
State adalah data yang diingat komponen di antara render, seperti teks dalam suatu field atau apakah menu sedang terbuka. Memperbarui state menjadwalkan render baru, yang merupakan satu-satunya mekanisme di balik hampir setiap layar interaktif.
Hooks dan effectsbagian yang membuat pemula buntu
Hooks seperti useState, useRef, dan useReducer memungkinkan komponen menyimpan state dan mengakses DOM. useEffect menjalankan kode setelah render, dan dependency array yang salah adalah sumber paling umum dari loop dan nilai yang kedaluwarsa.
Rendering dan rendering ulangmengapa aplikasi terasa lambat
Komponen melakukan render ulang saat state atau props-nya berubah, begitu pula komponen-komponen di dalamnya. Mengetahui apa yang memicu render adalah awal dari setiap perbaikan performa, mulai dari memoisation hingga code splitting.
Kesesuaian
Untuk siapa — dan bukan untuk siapa
Cocok untuk Anda jika Anda
- Mengetahui sedikit HTML, CSS, atau JavaScript dan ingin memulai React dengan benar
- Merupakan developer dari framework lain yang perlu beralih ke React dengan cepat
- Belajar paling baik saat hasilnya muncul di layar begitu kode dijalankan
- Sedang membangun portofolio proyek-proyek kecil dan ingin mengikuti langkah-langkah terpandu
- Sedang mempersiapkan diri untuk interview frontend dan ingin berlatih dengan pertanyaan
Bukan alat yang tepat untuk Anda jika Anda
- Belum pernah melihat JavaScript, karena kursus ini mengasumsikan kamu sudah sedikit mengenalnya
- Ingin membangun dan melakukan deploy proyek lengkap, yang tetap memerlukan laptop
- Mengharapkan semuanya gratis, padahal kursus pertama gratis dan Pro membuka akses ke sisanya
- Menginginkan kursus resmi dari tim React, padahal aplikasi ini dikembangkan secara independen
Pertanyaan
Pertanyaan yang sering diajukan
Bisakah belajar pemrograman React di ponsel?
Ide dasar, komponen, props, state, dan hooks dapat dipelajari di ponsel jika kamu bisa menjalankan apa yang kamu tulis. Belajar React: Kursus Code menyertakan ReactDOM dan Babel, sehingga JSX kamu dirender dalam pratinjau langsung di perangkat. Laptop mulai berguna saat kamu membangun dan melakukan deploy proyek yang lebih besar.
Apakah perlu menguasai JavaScript sebelum belajar React?
Sedikit pengetahuan akan membantu. Belajar React: Kursus Code ditujukan bagi orang yang mengetahui sebagian HTML, CSS, atau JavaScript, seperti variabel, fungsi, dan array. Jika kamu belum pernah menulis JavaScript, pelajari itu terlebih dahulu karena pelajaran React mengasumsikan kamu bisa membacanya.
Apa perbedaan antara props dan state?
Props adalah input yang diterima komponen dari parent-nya dan seharusnya tidak berubah, sedangkan state adalah data yang dimiliki komponen dan diperbarui seiring waktu. Di Belajar React: Kursus Code, kamu bisa melihatnya di Hooks Lab, yang menampilkan setiap perubahan state dan render ulang, serta knobs props yang memungkinkan kamu mengubah prop dengan slider.
Apakah aplikasi ini mengajarkan hooks seperti useEffect?
Ya. Belajar React: Kursus Code membahas useState, useEffect, useRef, useReducer, custom hooks, dan useLayoutEffect. Pelajaran terpisah membahas kapan effects dijalankan, array dependensi, dan kesalahan umum, dengan mode Bug Hunt untuk menemukan bug pada komponen yang rusak.
Apakah React sama dengan React Native, dan apakah aplikasi ini mengajarkan keduanya?
Tidak. React adalah library untuk membangun antarmuka pengguna, sedangkan React Native menggunakan konsep yang sama untuk membangun aplikasi mobile. Belajar React: Kursus Code mengajarkan React untuk web terlebih dahulu, dan kursus fundamental React Native membantu developer web menerapkan keterampilan tersebut ke mobile.
Apakah Belajar React: Kursus Code membahas Next.js dan React 19?
Ya. Kursus-kursusnya membahas fitur React 19 dan Server Components, SSR dan hydration, streaming, serta Next.js App Router dengan data fetching, caching, dan authentication. Tersedia juga kursus fundamental React Native untuk developer web.
Proyek seperti apa yang bisa saya bangun?
Tersedia 20 proyek terpandu yang dibangun selangkah demi selangkah: tombol like, kartu profil, kalkulator tip, permainan kuis, stopwatch, form pendaftaran, keranjang belanja, carousel gambar, list berpaginasi, dan aplikasi todo. Setiap langkah memeriksa apakah komponen kamu berfungsi sebelum kamu melanjutkan.
Apakah Belajar React: Kursus Code gratis?
Aplikasi ini gratis untuk diunduh. Versi gratis mencakup kursus pertama, satu proyek terpandu, dua coding mission, code editor dengan pratinjau langsung, Hooks Lab, knobs props, Bug Hunt, dan tiga pemeriksaan UI Match per hari, serta menampilkan iklan. Pro membuka semua kursus, proyek, dan mission, mentor AI, render profiler, ujian sertifikat, serta menghapus iklan.
Apakah tersedia sertifikat atau persiapan interview?
Lulus ujian akhir akan mendapatkan sertifikat yang dapat dibagikan, dan fitur ini merupakan bagian dari Pro. Untuk interview, tersedia 50 pertanyaan interview, kuis berisi 50 pertanyaan, dan cheat sheet untuk berlatih konsep-konsep utama.
Apakah kode dijalankan di server?
Tidak. Runtime disertakan di dalam aplikasi, sehingga kode kamu dikompilasi dan dirender di perangkat. Karena itu, kamu bisa mengetuk tombol yang kamu buat dan melihat UI merespons langsung di dalam pratinjau.
Bahasa dan platform apa saja yang didukung?
Belajar React: Kursus Code berjalan di iOS dan Android serta tersedia dalam 22 bahasa. Aplikasi ini memiliki rating 4+ dan memerlukan iOS 15.1 atau versi lebih baru di iPhone.
Mulai
Render komponen pertama Anda hari ini
Gratis untuk memulai di iOS dan Android, dalam 22 bahasa.
Lainnya dari CoddyKit
Tersedia di iOS dan Android.