Pengantar Pendekatan Komponen di React

Misalkan kita memiliki sebuah situs web. Di situs web ini kita dapat mengidentifikasi beberapa blok: header, konten, sidebar, footer, dan sebagainya. Setiap blok dapat dibagi menjadi sub-blok yang lebih kecil. Contohnya di header biasanya dapat diidentifikasi logo, menu, blok kontak, dan sebagainya.

Di React, setiap blok seperti ini disebut komponen. Setiap komponen dapat berisi komponen yang lebih kecil, yang pada gilirannya berisi komponen yang lebih kecil lagi, dan seterusnya.

Setiap komponen di React sesuai dengan modul ES6, yang terletak di folder src. Nama file modul ditulis dengan huruf kapital dan harus sesuai dengan fungsi yang terletak dalam kode modul tersebut.

Contohnya, file dengan nama App.js harus berisi fungsi App di dalamnya:

import React from 'react';

function App() {
	// kode komponen
}

export default App;

Salah satu komponen harus menjadi komponen utama - komponen yang menjadi tempat komponen-komponen lain ditambahkan. Di React, secara default komponen tersebut adalah komponen App. Ke komponen inilah komponen-komponen lain akan terhubung. Bagaimana cara melakukannya - akan kita bahas lebih lanjut dalam tutorial ini.