Pengenalan kepada Komponen React

Lihatlah mana-mana laman web. Ia terdiri daripada satu set blok bebas: header, sidebar, footer, kandungan. Boleh dikatakan bahawa blok-blok ini adalah komponen dalam erti kata yang difahami dalam React.

Jika kita melihat header yang sama, apa yang boleh dibezakan di dalamnya? Blok dengan logo, blok kenalan, blok dengan menu dan sebagainya. Iaitu, komponen boleh terdiri daripada komponen-komponen kecil lain.

Perkara yang sama berlaku dalam React - laman web dibina daripada satu set komponen, yang seterusnya boleh mengandungi komponen lain.

Dalam React, setiap komponen mewakili modul yang berasingan. Biasanya pembangunan bermula dengan komponen utama App, yang mengandungi komponen-komponen lain di dalamnya.

Mari kita berlatih mencipta komponen baru.

Katakan untuk contoh, kita memerlukan komponen yang memaparkan data produk. Untuk itu, kita perlu dalam folder kerja mencipta fail Product.js dan menambah kod berikut ke dalamnya:

import React from 'react';

function Product() {
	return <p>
		produk
	</p>;
}

export default Product;

Seperti yang anda lihat, buat masa ini komponen kami mengembalikan perenggan dengan teks. Dalam pelajaran seterusnya, kami akan menambah baik kod ini supaya data produk dipulangkan. Tetapi buat masa ini, biarkan sahaja perenggan dengan beberapa teks permulaan.

Sekarang mari kita paparkan komponen yang kami cipta dalam komponen App. Katakan buat masa ini App kami mempunyai kod berikut:

import React from 'react';

function App() {
	return <div>
		teks
	</div>;
}

export default App;

Pertama, kita perlu mengimport komponen produk yang kami cipta:

import React from 'react';
import Product from './Product'; // import produk

function App() {
	return <div>
		teks
	</div>;
}

export default App;

Selepas import sedemikian, dalam komponen App komponen Product boleh digunakan.