Menu

Langkah 2: Kartu dengan Props

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 40 dari 42.

Tantangan

Mudah

Buat card yang dapat digunakan kembali.

Definisikan ProfileCard yang menerima props name dan bio, lalu merender struktur yang sama seperti pada langkah 1 (div card, id="profile-name", id="profile-bio") dengan nilai props tersebut.
Di App, render satu ProfileCard dengan name Grace Hopper dan bio Invented the compiler.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Semua pelajaran di Dasar-Dasar

1Mengenal React

Apa Itu React?Komponen Pertamamu Aturan Satu Induk JSX Bukan HTML Rangkuman: Mengenal React

4Props

Apa Itu Props?Meneruskan Props Dua Props Komponen yang Sama, Data Baru Prop Children Ringkasan: Props

7Kondisi & List

Render dengan ternary Tampilkan dengan &&Render sebuah list Key itu penting Filter, lalu map Ulasan: Kondisi & List

2Ekspresi JSX

Kurung Kurawal Matematika dalam Kurung Kurawal Kurung Kurawal dalam Atribut Memanggil Fungsi di JSX Ulasan: Ekspresi JSX

5State dan Event

Apa Itu State?Penghitung Klik Menghitung dengan Langkah Beralih dengan State State Independen Ringkasan: State dan Event

8Proyek: Kartu Profil

Langkah 1: Struktur KartuLangkah 2: Kartu dengan PropsLangkah 3: Tombol Suka Langkah 4: Toggle Ikuti

3Komponen

Blok Penyusun Komponen Keduamu Gunakan Kembali Komponen Susun Halaman Rangkuman: Komponen

6Formulir & input

Input Terkontrol Tampilkan Kembali Input Penghitung Karakter Tombol Hapus Rangkuman: Formulir & input