Pengenalan kepada Pendekatan Berasaskan Komponen dalam React

Katakan kita mempunyai sebuah laman web. Pada laman web ini, kita boleh mengenal pasti beberapa blok: header, kandungan, sidebar, footer dan sebagainya. Setiap blok boleh dibahagikan kepada sub-blok yang lebih kecil. Sebagai contoh, dalam header biasanya kita boleh membezakan logo, menu, blok kenalan dan sebagainya.

Dalam React, setiap blok sedemikian dipanggil komponen. Setiap komponen boleh mengandungi komponen yang lebih kecil, dan komponen tersebut pula boleh mengandungi komponen yang lebih kecil lagi dan seterusnya.

Setiap komponen dalam React sepadan dengan modul ES6, yang terletak di dalam folder src. Nama fail modul ditulis dengan huruf besar dan hendaklah sepadan dengan fungsi yang terdapat dalam kod modul tersebut.

Sebagai contoh, fail bernama App.js hendaklah mengandungi fungsi App di dalamnya:

import React from 'react';

function App() {
	// kod komponen
}

export default App;

Salah satu komponen mestilah utama - iaitu komponen yang mana komponen-komponen lain ditambahkan kepadanya. Dalam React, secara lalai, komponen ini akan menjadi komponen App. Kepada komponen inilah komponen-komponen lain akan disambungkan. Bagaimana ini dilakukan - kita akan bincangkan selanjutnya dalam tutorial ini.