Sebelumnya

Berikutnya

Memperkenalkan alat peraga

Selesai

React komponen dirancang untuk menjadi unit yang dapat digunakan kembali. Untuk mengaktifkan penggunaan kembali, komponen memungkinkan data diteruskan ke dalamnya melalui properti atau props.

props adalah nilai baca-saja yang tersedia untuk satu instans komponen. Mereka dapat diatur secara terprogram atau dengan sintaks yang sama dengan yang Anda gunakan saat mengatur atribut untuk elemen HTML. Tidak seperti HTML normal, props tidak terbatas pada string atau nilai primitif; dapat menjadi objek atau array yang kompleks. props tersedia sebagai properti dari this dalam komponen. props dapat berisi properti sebanyak yang dibutuhkan komponen Anda, dan mampu menyimpan objek atau jenis data lainnya.

Skenario

Untuk membuat komponen dapat digunakan kembali, Anda biasanya meneruskan data yang akan ditampilkan sebagai alat peraga. Di sini, Anda akan membuat komponen bernama RecipeTitle untuk menampilkan judul resep, yang akan diteruskan sebagai properti.

Membuat komponen

1. Buka folder starter di Visual Studio Code, seperti yang disorot dalam gambaran umum.

2. Di dalam Visual Studio Code, buka src/RecipeTitle.jsx.

3. Setelah baris, tambahkan kode berikut // TODO: Create RecipeTitle component:

   // TODO: Create RecipeTitle component
   function RecipeTitle(props) {
       return (
           <section>
               <h2>{ props.title }</h2>
           </section>
       )
   };
   
   export default RecipeTitle;
   

Jelajahi kode

RecipeTitleterlihat mirip dengan komponen React dasar, dengan dua pembaruan utama.

Pertama, ia menerima parameter bernama props. Ini akan secara otomatis berisi semua atribut atau properti yang diteruskan ke komponen saat digunakan.

Kedua, Anda dapat menggunakan nilai yang terkandung dalam props seperti parameter normal apa pun. Anda mencari satu nilai bernama title, yang Anda tampilkan di dalam h2 elemen.

Menggunakan komponen

Sekarang mari kita perbarui App.jsx untuk menggunakan RecipeTitle komponen baru dengan title properti.

1. Buka App.jsx

2. Tambahkan kode berikut di bawah baris yang membaca TODO: Add import for RecipeTitle untuk mengimpor komponen yang baru dibuat RecipeTitle:

   // TODO: Add import for RecipeTitle
   import RecipeTitle from './RecipeTitle'
   

3. Tambahkan kode berikut di bawah baris yang berbunyi TODO: Add recipe object untuk membuat objek untuk resep kami:

   // TODO: Add recipe object
   const recipe = {
       title: 'Mashed potatoes',
       feedback: {
           rating: 4.8,
           reviews: 20
       },
       ingredients: [
           { name: '3 potatoes, cut into 1/2" pieces', prepared: false },
           { name: '4 Tbsp butter', prepared: false },
           { name: '1/8 cup heavy cream', prepared: false },
           { name: 'Salt', prepared: true },
           { name: 'Pepper', prepared: true },
       ],
   };
   

   Catatan

   Selama latihan dalam modul ini, Anda akan menggunakan seluruh recipe objek. Untuk saat ini, fokus Anda adalah pada title.

4. Setelah baris, tambahkan kode berikut TODO: Add RecipeTitle component:

   {/* TODO: Add RecipeTitle component */}
   <RecipeTitle title={ recipe.title } />
   

Jelajahi kode

Mulailah dengan membuat objek untuk mewakili resep yang ingin Anda tampilkan, dan tambahkan title properti ke dalamnya. Kemudian gunakan RecipeTitle komponen dengan cara yang sama Anda akan menggunakan elemen HTML atau komponen React lainnya. Perbedaan utamanya adalah Anda mengatur title atribut menjadi nilai recipe.title. Dengan menggunakan handlebar ({ }), Anda dapat membaca nilai secara dinamis.

Catatan

Jika nilai yang ingin Anda gunakan title telah menjadi string harfiah, Anda dapat mengatur properti dengan menggunakan sintaks title='Recipe title.

Tampilkan halaman

1. Simpan semua file.
2. Kembali ke browser Anda dan segarkan. Anda sekarang akan melihat judul Mashed Potatoes yang ditampilkan di halaman.

Lanjutkan