React · pelajaran 1
JSX, komponen, dan props
Berkas-berkas proyek
Lihat panel berkas di kiri editor. Ini susunan proyek React yang umum (mirip proyek Vite):
| berkas | tugas |
|---|---|
main.tsx | titik mulai (▶): memasang React ke <div id="root"> di halaman |
App.tsx | komponen paling atas, menyusun komponen lain |
components/Kartu.tsx | satu komponen yang bisa dipakai berulang |
styles.css | gaya tampilan |
Berkas terhubung lewat import dan export. Kartu.tsx menulis export default function Kartu, lalu App.tsx mengambilnya dengan import Kartu from './components/Kartu'. Buka tab Berkas di bawah pratinjau untuk melihat pohon impornya.
JSX bukan HTML
<Kartu nama="Ayu" /> terlihat seperti HTML, padahal itu JavaScript. Pilih App.tsx, buka tab Berkas → Hasil kompilasi. Setiap tag berubah menjadi panggilan fungsi:
_jsx(Kartu, { nama: "Ayu", jurusan: "Informatika" })Huruf besar di awal (Kartu) berarti komponen buatanmu. Huruf kecil (div, p) berarti elemen HTML biasa.
Props: data dari induk
Komponen adalah fungsi. Props adalah argumennya: objek berisi semua atribut yang ditulis di tag. Kartu membacanya dengan { nama, jurusan }, lalu menaruhnya di JSX dengan kurung kurawal: {nama}.
Buka tab Komponen. Pohon itu menunjukkan App berisi Kartu. Klik Kartu untuk melihat props yang diterimanya.
Coba
- Ubah
jurusanAyu. Pratinjau langsung berubah. - Tulis
{nama.toUpperCase()}di Kartu: di dalam kurung kurawal boleh ekspresi JavaScript apa saja. - Hapus
export defaultdari Kartu dan lihat pesan errornya.
Misi
Tampilkan tiga <Kartu> di App.tsx, masing-masing dengan nama dan jurusan berbeda. Tekan Cek misi.
Selanjutnya: State dan binding · Semua pelajaran