Langkau ke kandungan
WANCODE
EN

▍Belajar / React

Bina Antara Muka Moden

Belajar React secara praktikal dalam sandbox React sebenar di pelayar: komponen, JSX, props, state, event, senarai, borang dan effect — dan akhiri dengan membina pengurus tugasan.

12 pelajaran diterbitkan 3.6 jamPertengahan

Mula laluan ini

Percuma untuk bermula. Tiada pendaftaran.

  1. 01Berfikir dalam Bentuk ComponentLihat mana-mana antara muka sebagai pokok blok binaan kecil yang bernama — kemudian pecahkan halaman React sebenar kepada component sendiri.
  2. 02Component React Pertama AndaTulis function component yang memulangkan JSX, fahami kenapa nama mesti huruf besar, gabungkan component, dan kongsi antara fail.
  3. 03JSX DiterangkanJSX nampak seperti HTML tetapi ia JavaScript. Belajar ungkapan kurungan kerinting, className, objek style, fragment — dan JSX dikompil menjadi apa.
  4. 04Props: Menghantar Data kepada ComponentJadikan satu component memaparkan data berbeza dengan props: hantar nilai, destructure, tetapkan nilai lalai dan balut kandungan dengan children.
  5. 05State: Component Yang MengingatGuna hook useState untuk memberi component ingatan, fahami re-render, dan elakkan dua bug state klasik: mutasi dan nilai basi.
  6. 06Mengendalikan EventBertindak balas kepada klik dan taipan dalam React: onClick dan onChange, menghantar handler kepada component anak, objek event, dan controlled input pertama anda.
  7. 07Paparan Bersyarat (Conditional Rendering)Paparkan UI berbeza untuk situasi berbeza dengan early return, operator ternary dan && — dan elakkan angka 0 yang terlepas.
  8. 08Senarai dan KeyTukar array menjadi UI dengan map(), fahami kenapa setiap item perlukan key yang stabil, dan lihat apa yang rosak apabila anda guna index.
  9. 09Borang dalam ReactBina borang pendaftaran sebenar: input terkawal, satu objek state untuk banyak medan, onSubmit dengan preventDefault, dan mesej pengesahan yang mesra.
  10. 10Effect dan Perangkap BiasaGuna useEffect untuk menyelaraskan dengan dunia luar React — tajuk tab, pemasa, localStorage — dengan dependency dan cleanup yang betul, dan tahu bila tidak perlu.
  11. 11Komposisi ComponentBina UI daripada kepingan kecil yang boleh diguna semula merentasi fail: balut kandungan dengan children, angkat state yang dikongsi ke atas, dan hantar callback ke bawah.
  12. 12Bina Pengurus TugasanProjek akhir: bina pengurus tugasan lengkap — tambah, tanda, padam, tapis, kira baki dan simpan ke localStorage — menggunakan semua yang dipelajari dalam trek ini.