Belajar React & Berlatih
Belajar React & Berlatih — Pelajari pengaturcaraan React dengan menulis JSX dan menjalankannya pada telefon anda
Belajar React & Berlatih ialah aplikasi iOS dan Android yang percuma untuk bermula, yang mengajar pengaturcaraan React kepada pemula yang mempunyai sedikit pengetahuan HTML, CSS atau JavaScript, serta pembangun yang beralih daripada framework lain. Tulis JSX dalam editor kod, ketik Run dan lihat komponen anda dipaparkan dalam pratonton langsung di dalam aplikasi. 88 kursus dan 324 pelajaran membawa anda daripada komponen pertama, melalui hooks dan pengurusan state, hingga Next.js, dengan 20 projek berpandu sepanjang perjalanan.
- Harga
- Percuma, naik taraf Pro
- Platform
- iOS dan Android
- Bahasa
- 22
- Penarafan umur
- 4+
- Versi
- 82.6.1
- Memerlukan
- iOS 15.1 atau lebih baharu
- App Store
- 3.8 ★ (4)
Komponen anda dipaparkan pada telefon, bukan pada server.
Runtime, ReactDOM dan Babel disertakan dalam aplikasi, jadi JSX yang anda tulis dikompil dan dipaparkan pada peranti. Anda boleh mengetik butang yang baru anda bina, menaip dalam borang dan melihat UI bertindak balas — inilah gelung maklum balas yang menjadikan hooks mula difahami.
Apakah aplikasi ini
Belajar React & Berlatih ialah kursus React yang percuma untuk bermula bagi iOS dan Android, dengan 88 kursus dan 324 pelajaran interaktif, daripada baris pertama JSX hingga hooks, pengurusan state, React 19 dan Next.js App Router. Editor terbina dalam mengompil kod anda pada peranti dan memaparkan komponen dalam pratonton langsung, manakala 20 projek berpandu menyemak setiap langkah sebelum anda meneruskan. Ini ialah aplikasi pembelajaran bebas dan tidak mempunyai hubungan dengan Meta atau Vercel.
Dalam aplikasi
Rupa aplikasi ini
Kursus
Perkara yang diliputi kursus React
88 kursus yang diambil daripada senarai aplikasi sendiri, disusun mengikut urutan yang biasanya digunakan untuk mempelajari React dari awal.
React Kickoff, JSX dan Props & Composition
Komponen, UI deklaratif dan cara React mengemas kini DOM, diikuti peraturan JSX, memaparkan senarai dan menghantar data ke bawah dengan props.
State, Events, Forms dan useRef
useState dan pengendalian acara, borang terkawal dengan pengesahan, serta useRef untuk nilai dan akses DOM yang tidak mencetuskan pemaparan semula.
useEffect, Data Fetching dan Custom Hooks
Masa effects dijalankan, tatasusunan kebergantungan, keadaan pemuatan dan ralat untuk panggilan API, serta mengekstrak logik boleh guna semula ke dalam hooks anda sendiri.
Context, Redux Toolkit dan Zustand
Berkongsi state tanpa prop drilling menggunakan Context dan useReducer, kemudian Redux Toolkit dengan RTK Query, Zustand dan Jotai untuk aplikasi yang lebih besar.
Routing, React Query dan Forms at Scale
Routing sebelah klien dan corak React Router, state pelayan dengan TanStack Query dan SWR, React Hook Form serta UI optimistik.
Performance, Testing dan TypeScript
Pemaparan dan memoisation, pemisahan kod, senarai tervirtual, pengujian dengan React Testing Library, serta menaip komponen dan hooks.
React 19, Server Components dan Next.js
Server Components dan Actions, SSR dan hydration, kemudian Next.js App Router dengan pengambilan data, caching dan pengesahan.
Cara ia berfungsi
Cara pelajaran berfungsi
Satu pelajaran bermula dengan konsep ringkas yang terus diikuti oleh kod yang anda tulis dan jalankan, supaya idea dan hasilnya berada pada skrin yang sama.
Baca satu konsep
Buka kursus daripada laluan pembelajaran dan baca pelajaran ringkas, seperti cara state dikemas kini atau sebab senarai memerlukan keys. Gambaran keseluruhan kursus menandakan pelajaran yang percuma, supaya anda boleh melihat formatnya sebelum membuat keputusan.
Tulis JSX dan ketik Run
Taip komponen dalam editor kod dan jalankannya. Pratonton langsung memaparkan komponen anda di dalam aplikasi, jadi anda boleh mengklik butang, menaip dalam medan dan melihat perkara yang dilakukan oleh kod tersebut.
Semak, kemudian bina di atasnya
Kuiz, misi pengekodan dan projek berpandu mengesahkan bahawa anda benar-benar memahami idea itu, manakala mentor AI menerangkan hook atau ralat yang tidak dapat anda fahami. Bug Hunt dan UI Match memberi peluang kedua untuk mengukuhkan konsep tersebut.
Kandungan
Kandungan aplikasi
88
Kursus, 324 pelajaran
Daripada JSX, props dan state hingga custom hooks, borang, Context dan Redux Toolkit, serta Server Components, SSR dan Next.js App Router, yang disusun daripada A1 hingga C1.
Langsung
Editor dengan pratonton langsung
Editor kod yang direka untuk JSX, dengan komponen dipaparkan di dalam aplikasi. Projek berbilang fail membolehkan anda mengimport satu komponen ke dalam komponen lain, seperti cara aplikasi sebenar dibina.
20
Projek berpandu
Bina butang suka, kad profil, kalkulator tip, permainan kuiz, troli beli-belah dan banyak lagi, satu langkah kecil pada satu-satu masa. Setiap langkah menyemak bahawa komponen itu benar-benar berfungsi.
Makmal
Hooks Lab dan tombol props
Lihat setiap perubahan state dan re-render semasa ia berlaku, serta ubah prop dengan gelangsar untuk melihat komponen dikemas kini. Profiler render dan garis masa state ialah sebahagian daripada Pro.
30
Misi pengekodan
Misi pada tahap mudah, sederhana dan sukar tentang hooks, rendering, borang, context dan prestasi, serta UI Match, Bug Hunt dan Component Recall dengan pengulangan berjarak.
AI
Mentor AI
Minta penjelasan, biarkan AI menyemak kod anda dan mencadangkan pembaikan, atau jana pelajaran tersuai tentang apa-apa topik. Mentor dan peperiksaan sijil ialah sebahagian daripada Pro.
Latar belakang
Apakah yang sebenarnya perlu anda fahami untuk menulis React, dan dalam susunan yang bagaimana?
React ialah library JavaScript untuk membina UI daripada komponen kecil yang boleh digunakan semula dan dilukis semula apabila datanya berubah. Kebanyakan pemula tersekat bukan pada sintaks, tetapi pada model di sebaliknya: apakah itu render, apakah yang dikira sebagai state dan bila effects dijalankan. Mempelajari idea-idea ini mengikut susunan, dengan sesuatu pada skrin untuk menguji setiap satunya, lebih pantas daripada membaca semuanya serentak.
Komponen dan propsunit yang boleh digunakan semula
Komponen ialah fungsi yang mengembalikan sebahagian daripada interface, manakala props ialah input yang diterimanya daripada parent. Oleh sebab data mengalir ke bawah melalui props, anda boleh membaca komponen dan menjangka perkara yang akan dilukisnya.
Stateperkara yang berubah mengikut masa
State ialah data yang diingati oleh komponen antara render, seperti teks dalam medan atau sama ada menu terbuka. Mengemas kini state menjadualkan render baharu, iaitu satu-satunya mekanisme di sebalik hampir setiap skrin interaktif.
Hooks dan effectsbahagian yang membuat pemula tersekat
Hooks seperti useState, useRef dan useReducer membolehkan komponen menyimpan state dan mengakses DOM. useEffect menjalankan kod selepas render, dan dependency array yang salah ialah punca paling biasa bagi loop dan nilai yang lapuk.
Rendering dan rendering semulasebab aplikasi terasa perlahan
Komponen melakukan re-render apabila state atau propsnya berubah, begitu juga komponen yang terkandung di dalamnya. Mengetahui perkara yang mencetuskan render ialah titik permulaan bagi setiap pembaikan prestasi, daripada memoisation hingga code splitting.
Sesuai
Untuk siapa — dan bukan untuk siapa
Sesuai untuk anda jika anda
- Tahu sedikit HTML, CSS atau JavaScript dan mahu memulakan React dengan cara yang betul
- Merupakan pembangun daripada framework lain yang perlu beralih kepada React dengan pantas
- Belajar dengan paling baik apabila hasilnya muncul pada skrin sebaik sahaja kod dijalankan
- Sedang membina portfolio projek kecil dan mahukan langkah berpandu
- Sedang membuat persediaan untuk temu duga frontend dan mahukan soalan untuk berlatih
Bukan alat yang sesuai jika anda
- Tidak pernah melihat JavaScript kerana kursus ini mengandaikan anda mengetahui sedikit tentangnya
- Mahu membina dan menggunakan projek penuh, yang masih memerlukan komputer riba
- Mengharapkan semuanya percuma, sedangkan kursus pertama adalah percuma dan Pro membuka akses kepada selebihnya
- Mahukan kursus rasmi daripada pasukan React, sedangkan ini ialah aplikasi bebas
Soalan
Soalan lazim
Bolehkah anda belajar pengaturcaraan React menggunakan telefon?
Idea teras, komponen, props, state dan hooks boleh dipelajari menggunakan telefon jika anda boleh menjalankan perkara yang anda tulis. Belajar React & Berlatih menyertakan ReactDOM dan Babel, jadi JSX anda dipaparkan dalam pratonton langsung pada peranti. Komputer riba menjadi berguna apabila anda mula membina dan menggunakan projek yang lebih besar.
Perlukah saya mengetahui JavaScript sebelum belajar React?
Sedikit pengetahuan amat membantu. Belajar React & Berlatih disasarkan kepada mereka yang mengetahui sedikit HTML, CSS atau JavaScript, seperti pemboleh ubah, fungsi dan tatasusunan. Jika anda tidak pernah menulis JavaScript, pelajarinya dahulu kerana pelajaran React mengandaikan anda boleh membacanya.
Apakah perbezaan antara props dan state?
Props ialah input yang diterima oleh komponen daripada parent-nya dan tidak sepatutnya berubah, manakala state ialah data yang dimiliki dan dikemas kini oleh komponen dari semasa ke semasa. Dalam Belajar React & Berlatih, anda boleh melihat perkara ini dalam Hooks Lab, yang menunjukkan setiap perubahan state dan pemaparan semula, serta tombol props yang membolehkan anda mengubah prop menggunakan pelungsur.
Adakah aplikasi ini mengajar hooks seperti useEffect?
Ya. Belajar React & Berlatih merangkumi useState, useEffect, useRef, useReducer, custom hooks dan useLayoutEffect. Pelajaran berasingan menerangkan masa effects dijalankan, tatasusunan kebergantungan dan kesilapan lazim, dengan mod Bug Hunt untuk mencari pepijat dalam komponen yang rosak.
Adakah React sama dengan React Native, dan adakah aplikasi ini mengajar kedua-duanya?
Tidak. React ialah library untuk membina antara muka pengguna, manakala React Native menggunakan idea yang sama untuk membina aplikasi mudah alih. Belajar React & Berlatih mengajar React untuk web terlebih dahulu, dan kursus asas React Native membantu pembangun web menggunakan kemahiran tersebut untuk peranti mudah alih.
Adakah Belajar React & Berlatih merangkumi Next.js dan React 19?
Ya. Kursus-kursusnya merangkumi ciri React 19 dan Server Components, SSR dan hydration, streaming, serta Next.js App Router dengan pengambilan data, caching dan pengesahan. Terdapat juga kursus asas React Native untuk pembangun web.
Apakah jenis projek yang boleh saya bina?
Terdapat 20 projek berpandu yang dibina satu langkah kecil pada satu-satu masa: butang suka, kad profil, kalkulator tip, permainan kuiz, jam randik, borang pendaftaran, troli beli-belah, karusel imej, senarai bernombor halaman dan aplikasi todo. Setiap langkah menyemak bahawa komponen anda berfungsi sebelum anda meneruskan.
Adakah Belajar React & Berlatih percuma?
Aplikasi ini percuma untuk dimuat turun. Versi percuma merangkumi kursus pertama, satu projek berpandu, dua misi pengekodan, editor kod dengan pratonton langsung, Hooks Lab, tombol props, Bug Hunt dan tiga semakan UI Match sehari, serta memaparkan iklan. Pro membuka semua kursus, projek dan misi, mentor AI, pemprofil pemaparan, peperiksaan sijil serta membuang iklan.
Adakah terdapat sijil atau persediaan temu duga?
Lulus peperiksaan akhir akan memberikan anda sijil yang boleh dikongsi, dan sijil ini merupakan sebahagian daripada Pro. Untuk temu duga, terdapat 50 soalan temu duga, kuiz 50 soalan dan helaian rujukan ringkas untuk mengulang kaji konsep teras.
Adakah kod dijalankan pada pelayan?
Tidak. Runtime disertakan dalam aplikasi, jadi kod anda disusun dan dipaparkan pada peranti. Sebab itulah anda boleh mengetik butang yang dibina dan melihat UI bertindak balas dalam pratonton.
Apakah bahasa dan platform yang disokong?
Belajar React & Berlatih berjalan pada iOS dan Android serta tersedia dalam 22 bahasa. Aplikasi ini dinilai 4+ dan memerlukan iOS 15.1 atau lebih baharu pada iPhone.
Mulakan
Render komponen pertama anda hari ini
Percuma untuk bermula pada iOS dan Android, dalam 22 bahasa.
Lagi daripada CoddyKit
Tersedia di iOS dan Android.