Komponen dan Alat Harian - ReactJS

Selamat datang ke Hari 4 cabaran "30 Hari ReactJS"! Hari ini, kita akan meneroka Komponen dan Prop—bahan binaan mana-mana aplikasi React. Memahami konsep ini akan membolehkan anda memecahkan UI anda kepada bahagian yang boleh diguna semula dan bebas.

Apakah Komponen?

Komponen dalam React adalah seperti bahan dalam resipi. Sama seperti anda menggabungkan bahan-bahan yang berbeza untuk mencipta hidangan, anda menggabungkan komponen untuk membina aplikasi React. Komponen ialah fungsi atau kelas JavaScript yang menerima input secara pilihan (dikenali sebagai prop) dan mengembalikan elemen React yang menerangkan perkara yang sepatutnya dipaparkan pada skrin.

Terdapat dua jenis komponen utama dalam React:

Komponen Fungsian: Ini adalah fungsi JavaScript yang mengembalikan JSX. Ia lebih ringkas dan mudah dibaca.

Komponen Kelas: Ini ialah kelas ES6 yang dilanjutkan daripada React.Component. Ia mempunyai lebih banyak ciri seperti kaedah keadaan dan kitaran hayat tetapi kurang biasa dalam pembangunan React moden.

Contoh: Komponen Butang

Mari kita buat komponen butang mudah:

function Button() {
  return (
    <button>Click me!</button>
  );
}

Komponen Butang ini ialah komponen berfungsi yang mengembalikan elemen butang dengan teks "Klik saya!".

Mengapa Komponen Penting

Komponen membolehkan anda memecahkan UI anda kepada bahagian yang lebih kecil dan boleh diurus. Ini menjadikan kod anda lebih teratur dan lebih mudah untuk diselenggara. Bayangkan cuba memasak hidangan yang kompleks tanpa memecahkannya menjadi beberapa langkah. Ia akan menjadi huru-hara! Begitu juga, membina UI tanpa komponen boleh menjadi sangat menggembirakan.

Contoh Kehidupan Sebenar: Blok Lego
Fikirkan komponen seperti blok Lego. Setiap blok (komponen) ialah sekeping aplikasi anda, dan anda boleh menggabungkannya untuk mencipta sesuatu yang lebih besar. Sama seperti blok Lego, komponen boleh digunakan semula di bahagian lain aplikasi anda.

Apakah Props?
Props (singkatan untuk "properties") ialah cara anda menghantar data dari satu komponen ke komponen yang lain. Ia serupa dengan argumen fungsi dan boleh digunakan untuk menyesuaikan komponen.

Sebagai contoh, katakan kita ingin mencipta komponen Butang yang boleh memaparkan teks berbeza berdasarkan prop yang diterima:

function Button(props) {
  return (
    <button>{props.label}</button>
  );
}

Kini, apabila anda menggunakan komponen Butang, anda boleh memasukkan prop label untuk menyesuaikan teksnya:

function App() {
  return (
    <div>
      <Button label="Submit" />
      <Button label="Cancel" />
    </div>
  );
}

Di sini, komponen Butang digunakan dua kali, tetapi dengan label berbeza: "Serah" dan "Batal".

Kepentingan Props

Prop menjadikan komponen anda lebih fleksibel dan boleh digunakan semula. Daripada nilai pengekodan keras dalam komponen anda, anda boleh menghantar data dinamik melalui prop, membolehkan anda menggunakan komponen yang sama dalam konteks yang berbeza.

Menyediakan Komponen dan Alat Peraga dengan Vite

Memandangkan kami menggunakan Vite untuk persekitaran pembangunan kami, menyediakan komponen dan prop adalah mudah. Jika anda telah mengikuti, projek Vite anda telah dikonfigurasikan. Anda boleh mula mencipta komponen dalam fail berasingan dan mengimportnya ke dalam aplikasi utama anda.

Berikut ialah cara anda boleh menstruktur projek anda:

1. Cipta Komponen Baharu: Cipta fail baharu, Button.jsx, dalam folder src anda dan tentukan komponen Button anda di sana.
2. Gunakan Komponen dalam Apl Anda: Dalam fail App.jsx anda, import komponen Button dan gunakannya dengan prop yang berbeza.

Menyatukan Semuanya

Komponen dan prop adalah nadi seni bina berasaskan komponen React. Dengan memecahkan UI anda kepada komponen yang lebih kecil dan menghantar data antara mereka menggunakan prop, anda boleh membina aplikasi berskala dan boleh diselenggara.

Esok, kami akan menyelami Kaedah Keadaan dan Kitaran Hayat, yang akan membolehkan komponen anda mengurus data dinamik dan bertindak balas terhadap perubahan dari semasa ke semasa.

Atas ialah kandungan terperinci Komponen dan Alat Harian - ReactJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!