Penggunaan Komponen dalam React
Setiap komponen yang diimport sepadan dengan
tag JSXnya sendiri. Sebagai contoh, kita mempunyai komponen
Product, oleh itu ia sepadan dengan
tag berikut:
<Product />
Nama tag komponen mesti ditulis dengan huruf besar, supaya React dapat membezakan panggilan komponen daripada penggunaan tag HTML.
Jadi, mari kita gunakan komponen Product
di dalam komponen App
dengan menulis tag yang sepadan:
import React from 'react';
import Product from './Product';
function App() {
return <div>
<Product />
</div>;
}
export default App;
Hasilnya, selepas proses rendering, yang berikut akan terhasil:
<div>
<p>
product
</p>
</div>
Buatkan komponen User, yang akan
memaparkan data pengguna. Buat masa ini, biarkan
komponen ini hanya memaparkan sebarang teks.
Gunakan komponen ini dalam komponen App.