Interaksi JSX dengan Komponen

 Materi ini cocok untuk pemula karna dalam react Komponen adalah blok bangunan utama. JSX digunakan untuk menulis dan menyusun komponen, serta untuk mengirim data dan event antar komponen.

JSX Memenugkinkan kita menyiapkan komponent di dalam komponent lain, mengirim data melalui props, menangani interaksi dan event

Struktur Dasar Komponen dan JSX

Komponen SelamatDatang dipanggil di dalam JSX App seperti memanggil tag HTML.

Mengirim Data Ke Komponen Dengan props

1. Komponen Anak

Berikut Contoh Komponen Anak

2. Komponen Induk

Berikut Contoh Untuk Komponen Induk

Props adalah object yang berisi data yang dikirim dari komponen induk ke anak

Interaksi : Event Hendler di Komponen

Komponen dengan Button dan Event 

Di panggil di App

JSX bisa menyisipkan funsi javascript seperti onClick ={handleClick} untuk menangani event.

Komponen Bersarang

JSX juga bisa menampilkan banyak komponen secara bersarang :

Praktik Gabungan

Berikut Contoh Sederhana

Kesimpulan

Interaksi                                                Penjelasan

Menisipkan Komponen                        Menggunakan  <NamaKomponen />

Props                                                    Mengirim data dari induk ke anak

Event Hendler   (onClick dll)              Mengirim data dari induk ke anak

JSX Bersarang                                     Menyusun UI dari banyak komponen kecil

Poin-Point 

• Membuat Komponen Sederhana

• Props dan Penggunaannya dalam JSX

• State dan Perubahannya di JSX