React Element

Bagian terkecil dari sebuah React App disebut dengan element.

React element adalah javascript object yang mewakili apa yang ingin ditampilkan di layar.

Copy
1const element = <h1>Hi Dino</h1>;

Untuk menampilkan React Element di DOM kita gunakan ReactDOM.render().

Contoh:

index.html

Copy
1<div id="root"></div>

index.js

Copy
1const element = <h1>Hi Dino</h1>;
2ReactDOM.render(element, document.getElementById('root'));

Code di atas akan menampilkan tulisan 'Hi Dino' pada halaman browser.

React Component

Jika sebuah React App dianalogikan sebagai rumah maka React Component adalah bagian-bagian yang menyusun rumah tersebut.

Sebuah rumah umumnya terdiri dari bagian-bagian seperti kamar, dapur, ruang tamu atau halaman. 

Sedangkan pada sebuah React App, component dapat berupa Header, Page, Footer, Button dll.

Analogi ini mungkin sudah pernah ditemui bagi mereka yang sudah pernah belajar React.

Namun jika kita lihat dokumentasi React di reactjs.org, konsep Component pada React mirip dengan konsep Function pada javascript.

• Output dari function dapat berupa value atau function lain, sedangkan output dari component adalah React Element
• Baik function atau component dapat ditempatkan dimana saja di source code dan dapat digunakan berkali-kali (reusable)

Sehingga bisa dikatakan bahwa sebuah React App tersusun dari banyak component sebagaimana JavaScript App tersusun dari banyak function.

Membuat component

Sekarang mari kita lihat React App yang sudah dibuat menggunakan template di Stackblitz, bagi yang belum silahkan lihat kembali bagian Environment Setup.

Kita fokus pada file App.js, di dalam file App.js terdapat sebuah component dengan nama App.

Copy
1export default function App() {
2  return (
3    <div>
4      <h1>Hello StackBlitz!</h1>
5      <p>Start editing to see some magic happen :)</p>
6    </div>
7  );
8}

Kita akan menambahkan component lain di dalam App.js. Ada dua cara membuat component di React.

1. Menggunakan JavaScript Function

App.js

Copy
1// new component
2const User = () => {
3  return (
4    <div>
5      <h1>My Name is Brachio</h1>
6    </div>
7  );
8};
9
10export default function App() {
11  return (
12    <div>
13      <h1>Hello Devsaurus</h1>
14      <User />
15    </div>
16  );
17}

Component yang dibuat menggunakan Function disebut dengan React Function Component.

2. Menggunakan ES6 Class

Copy
1// new component
2class User extends Component {
3  render() {
4    return (
5      <div>
6        <h1>My Name is Brachio</h1>
7      </div>
8    );
9  }
10}
11
12class App extends Component {
13  render() {
14    return (
15      <div>
16        <h1>Hello Devsaurus</h1>
17        <User />
18      </div>
19    );
20  }
21}
22
23export default App;

Component yang dibuat menggunakan class disebut dengan React Class Component.

Kita boleh memilih salah satu diantara kedua cara di atas.

Mengkombinasikan antara React Class Component dengan React Function Component dalam satu project bukanlah ide yang bagus. 

Kecuali dalam kondisi tertentu seperti memanfaatkan React hooks di project React yang sudah lama (sebagian besar component ditulis dalam ES6 class).

Nama dari component harus diawali dengan huruf kapital.

Kita tidak bisa memberi nama component seperti ini:

Copy
1const app = () => {
2...
3}

Huruf pertama dari nama component harus kapital.

Copy
1const App = () => {
2...
3}

Hanya ada satu root component

Perlu diperhatikan dalam satu React App hanya boleh ada satu root component, dalam root component tersebut kita bisa membuat lebih banyak component.

Istilah yang biasa dipakai untuk menjelaskan hubungan antara satu component dengan component yang lain, adalah parent, child dan sibling.

Lebih jelasnya lihat hierarki dan bagan berikut ini:

Hierarki untuk Single Page Component (satu component satu file)

Untuk menyesuaikan hierarki di atas kita akan tambah beberapa component lagi di App.js.

Copy
1const ChildOne = () => {
2  return (
3    <div>
4      <h3>This is Child</h3>
5    </div>
6  );
7};
8
9const ChildTwo = () => {
10  return (
11    <div>
12      <h3>This is Child</h3>
13    </div>
14  );
15};
16
17const ParentOne = () => {
18  return (
19    <div>
20      <h2>This is Parent-1</h2>
21      <ChildOne />
22      <ChildTwo />
23    </div>
24  );
25};
26
27const ParentTwo = () => {
28  return (
29    <div>
30      <h2>This is Parent-2</h2>
31    </div>
32  );
33};
34
35export default function App() {
36  return (
37    <div>
38      <h1>This is Root Component</h1>
39      <ParentOne />
40      <ParentTwo />
41    </div>
42  );
43}

• component App adalah root component
• component ParentOne & ParentTwo adalah parent component
• component ChildOne & ChildTwo adalah child component
• component ParentOne adalah sibling untuk ParentTwo dan sebaliknya

Satu component hanya menghasilkan satu element

Karena component mirip dengan function pada JavaScript, maka output dari satu component adalah satu React element.

Oleh karena itu, pada App.js di atas harus ditambahkan sebuah container element atau enclosing tag untuk menggabungkan (wrap) beberapa component.

Dan tidak bisa ditulis tanpa container / enclosing tag seperti ini:

Copy
1export default function App() {
2  return (
3      <h1>This is Root Component</h1>
4      <ParentOne />
5      <ParentTwo />
6  );
7}

Kita akan lebih banyak menggunakan React Function Component untuk membuat component, karena lebih simple dan berkaitan erat dengan konsep hooks pada React