Materi
Antarmuka React disusun dari komponen: potongan tampilan yang bisa dipakai ulang, seperti kop nota, kartu menu, atau tombol bayar. Sebuah komponen hanyalah fungsi JavaScript yang mengembalikan markup. Markup itu ditulis dengan JSX, sintaks mirip HTML yang diubah menjadi JavaScript sebelum dijalankan.
function Kop() {
return <h2>Warung Bu Sri</h2>;
}
export default function Nota() {
return (
<div>
<Kop />
<p>Terima kasih sudah berbelanja.</p>
</div>
);
}Dokumentasi React menetapkan dua ciri komponen: namanya diawali huruf kapital dan ia mengembalikan JSX. Huruf kapital itu bukan soal gaya. React membaca <kop /> berhuruf kecil sebagai tag HTML bernama kop, sehingga fungsi kop tidak pernah dipanggil dan isinya tidak tampil.
Bila JSX yang dikembalikan lebih dari satu baris, bungkus dengan tanda kurung dan letakkan kurung bukanya di baris yang sama dengan return. Kata return yang berdiri sendiri di satu baris mengakhiri fungsi saat itu juga, dan baris-baris sesudahnya diabaikan.
export default menandai komponen utama sebuah berkas. Satu berkas hanya boleh punya satu ekspor default, tetapi boleh punya banyak ekspor bernama seperti export function Tombol(). Cara mengimpor mengikuti cara mengekspor: ekspor default diimpor tanpa kurung kurawal, ekspor bernama dengan kurung kurawal.
