Search by

    Terakhir diperbaharui: Oct 24, 2020

    Component

    React Element

    Bagian terkecil dari sebuah React App disebut dengan element.

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

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

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

    Contoh:

    index.html

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

    index.js

    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.

    website component

    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.

    stackblitz template

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

    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

    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

    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:

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

    Huruf pertama dari nama component harus kapital.

    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:

    component connection

    root parent child component

    Hierarki untuk Single Page Component (satu component satu file)

    single page component

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

    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.

    container

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

    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