Pengantar Komponen React

Perhatikan situs web mana pun. Situs web terdiri dari kumpulan blok independen: header, sidebar, footer, konten. Dapat dikatakan bahwa blok-blok inilah komponen dalam artian yang dimaksud di React.

Jika kita melihat header yang sama, apa yang bisa dibedakan di dalamnya? Blok dengan logo, blok kontak, blok dengan menu, dan sebagainya. Artinya, komponen dapat terdiri dari subkomponen lainnya.

Hal yang sama terjadi di React - situs web dibangun dari kumpulan komponen, yang pada gilirannya dapat berisi komponen lain.

Di React, setiap komponen merupakan modul terpisah. Biasanya pengembangan dimulai dari komponen utama App, yang berisi komponen-komponen lainnya.

Mari kita berlatih membuat komponen baru.

Sebagai contoh, misalkan kita membutuhkan komponen yang menampilkan data produk. Untuk itu, kita perlu membuat file Product.js di folder kerja dan menambahkan kode berikut ke dalamnya:

import React from 'react';

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

export default Product;

Seperti yang Anda lihat, saat ini komponen kita mengembalikan sebuah paragraf dengan teks. Dalam pelajaran berikutnya, kita akan menyempurnakan kode ini agar mengembalikan data produk. Tapi untuk saat ini, biarkan saja paragraf dengan beberapa teks awal.

Sekarang mari kita tampilkan komponen yang telah kita buat di dalam komponen App. Misalkan saat ini App kita memiliki kode berikut:

import React from 'react';

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

export default App;

Pertama-tama, kita perlu mengimpor komponen produk yang telah kita buat:

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

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

export default App;

Setelah impor seperti itu, di dalam komponen App komponen Product dapat digunakan.