Membina Komponen React: Daripada JSX kepada Kod Sedia-Produksi
Komponen React adalah asas kepada aplikasi web moden. Ia menukarkan antara muka yang kompleks kepada bahagian-bahagian kecil yang mudah diurus.
React mendominasi industri. 57% pembangun JavaScript menggunakannya sebagai perpustakaan utama mereka. Ia mencapai lebih 20 juta muat turun mingguan di NPM.
Sebuah komponen ialah satu fungsi yang mengembalikan JSX. JSX kelihatan seperti HTML tetapi berada di dalam JavaScript anda. Ia membolehkan anda membina elemen tersuai yang boleh digunakan semula di mana-mana sahaja.
Setiap komponen profesional mempunyai empat bahagian:
• Props: Data yang dihantar daripada induk (parent) kepada anak (child). Ini menjadikan komponen lebih fleksibel.
• State: Data yang berubah mengikut masa. Kemas kini pada state akan mencetuskan perubahan UI.
• Hooks: Fungsi seperti useState dan useEffect yang memberikan logik kepada komponen.
• Pernyataan Return: Bahagian yang menentukan apa yang dipaparkan pada skrin.
React moden menggunakan komponen fungsi (function components) berbanding kelas (classes). Komponen fungsi menggunakan kurang kod dan lebih mudah untuk diselenggara.
Untuk membina kod sedia-produksi, ikut peraturan ini:
• Tanggungjawab Tunggal (Single Responsibility): Setiap komponen harus melakukan satu perkara sahaja. Komponen UserProfile sepatutnya hanya memaparkan data pengguna.
• Gunakan TypeScript: TSX membantu anda mengesan ralat sebelum anda menjalankan kod anda. 90% pembangun frontend menggunakannya.
• Amalkan Komposisi (Composition): Bina antara muka yang besar dengan menggabungkan komponen-komponen kecil. Jangan bina satu komponen gergasi yang berserabut.
• Elakkan Prop Drilling: Jangan hantar data melalui sepuluh lapisan komponen. Gunakan Context atau pengurusan state sebagai ganti.
• Jangan Sesekali Mengubah (Mutate) Props: Anggap props sebagai baca-sahaja (read-only).
Membina dengan komponen membantu anda melakukan penskalaan (scale). Kerangka kerja seperti Next.js, Remix, dan React Native semuanya bergantung kepada prinsip yang sama ini.
Bermula secara kecil-kecilan. Fikir secara modular. Bina untuk kegunaan semula.
Sumber: https://dev.to/julianneagu/building-react-components-from-jsx-to-production-ready-code-3chf