Tutorial ReactJS #3 : Components di React

Dalam pengembangan aplikasi web dengan menggunakan React, “Components” adalah unit dasar yang digunakan untuk membangun antarmuka pengguna (UI). Komponen dalam React adalah bagian-bagian dari antarmuka yang dapat dipecah menjadi bagian-bagian yang lebih kecil dan lebih mudah dikelola. Setiap komponen dapat memiliki perilaku, tampilan, dan data yang terkait.

Komponen adalah bagian terpenting dari aplikasi React, karena aplikasi react sendiri terusun dari komponen-komponen. Komponen di Reactjs ada beberapa macam, ada yang disebut dengan stateful component dan stateless component, ada juga function components dan class components, ada Dumb Components dan Smart Components.

Daftar Isi

Pengertian Components

Komponen adalah bagian-bagian yang menyusun aplikasi React. Reactjs bekerja dengan Virtual DOM, di dalam Virtual DOM ini kita harus membuat komponen untuk memberitahu React tentang apa saja yang harus ditampilkan (render) ke Real DOM (HTML). Karena itu setiap komponen di React pasti akan menghasilkan HTML.

Coba perhatikan di method render(), di sana pasti akan ada kode JSX yang akan di-render menjadi HTML.

Ini mungkin terdengar ribet buat yang terbiasa dengan framework lama seperti JQuery. Mau bikin ini itu, harus bikin komponennya dulu.

Komponen di React sendiri bersifat reuseable, artinya bisa digunakan kembali. Di luar sana ada banyak komponen React yang siap pakai dan akan memudahkan kita dalam membuat aplikasi.

Bedanya komponen dengan elemen, yaitu elemen adalah bagian-bagian (elemen HTML) yang menyusun komponen, biasanya kita buat dengan JSX.

Secara umum, ada tiga bagian yang biasanya ada di dalam komponen :

Bagian Data (State, Props, Variabel)
Bagian method atau fungsi
Bagaian method render() (wajib ada jika menggunakan class).

Cara Membuat Component di Reactjs

Komponen di Reactjs dapat kita buat dengan dua cara, yaitu menggunakan fungsi dan kedua menggunakan class. Komponen yang dibuat dengan fungsi disebut juga dengan function components dan yang menggunakan class disebut class components.

Berikut ini cara membuat function components :

Berikut adalah langkah-langkah untuk membuat sebuah function components pada ReactJS:

Buat Proyek Baru (Opsional), jika belum memiliki proyek React yang ada, kita dapat membuatnya dengan perintah berikut menggunakan create-react-app nama-app, misal :
```
create-react-app belajar-react
```
Ganti “nama-app” dengan nama yang kita inginkan.
Buat folder baru, buat folder baru misal dengan nama components divdalam folder src .

Buat File .js, buat file JavaScript baru dengan nama komponen yang ingin kita buat, misalnya “Function-component.js“, dan isi dengan sintak :

// membuat komponen dengan fungsi 
function Header() 
{ 
    return ( 
        <div> 
            <h1>Tutorial Reactjs untuk Pemula</h1> 
            <h2>Panduan step-by-step belajar Reactjs</h2> 
        </div> 
    ); 
} 

// eksport komponen  
export default Header;

Gunakan Komponen, di komponen lain atau dalam file utama seperti “App.js“, impor komponen yang telah kita buat dan gunakan di dalam JSX dan ubah sintak file App.js menjadi seperti berikut :
```
import './App.css';
import Header from './components/Function-component';

function App() {
  return (
    <div className="App">
      <Header/>
    </div>
  );
}

export default App;
```
Jalankan Aplikasi, jalankan aplikasi React dengan menjalankan perintah :
```
npm start
```
pastikan kita berada di direktori proyek yang sedang kita buat.

Hasilnya :

Sedangkan untuk class component, cara membuatnya harus melakukan extends dari class React.Component.

Berikut adalah langkah-langkah untuk membuat sebuah class components pada ReactJS:

Buat Proyek Baru (Opsional), jika belum memiliki proyek React yang ada, kita dapat membuatnya dengan perintah berikut menggunakan create-react-app nama-app, misal :
```
create-react-app belajar-react
```
Ganti “nama-app” dengan nama yang kita inginkan. Jika sudah ada proyek yang kita buat, kita tinggal lanjutkan saja.

Buat File .js, buat file JavaScript baru dengan nama komponen yang ingin kita buat, misalnya “Class-component.js” di dalam folder components, dan isi dengan sintak :

import React from 'react'; 

// membuat komponen dengan class 
class Header extends React.Component { 
  render(){ 
    return ( 
      <div> 
        <h1>Tutorial Reactjs untuk Pemula</h1> 
        <h2>Panduan step-by-step belajar Reactjs</h2> 
        <p>Membuat komponen dengan class</p> </div> 
    ); 
  } 
} 

//eksport komponen 
export default Header;

Gunakan Komponen, di komponen lain atau dalam file utama seperti “App.js“, impor komponen yang telah kita buat dan gunakan di dalam JSX dan ubah sintak file App.js menjadi seperti berikut :
```
import './App.css';
import Header from './components/Class-component';

function App() {
  return (
    <div className="App">
      <Header/>
    </div>
  );
}

export default App;
```
Jalankan Aplikasi, jalankan aplikasi React dengan menjalankan perintah :
```
npm start
```
pastikan kita berada di direktori proyek yang sedang kita buat.

Hasilnya :

Kedua komponen di atas sebenarnya sama, bedanya di cara pembuatannya saja. Komponen pertama dibuat menggunakan fungsi dan komponen kedua menggunakan class.

Di Reactjs versi 16 ke bawah, komponen yang dibuat dengan fungsi tidak akan bisa menggunakan state tapi bisa menerima props.

Pada Reactjs versi 16.8 ke atas, kita sudah bisa menggunakan state dan component life cycle pada function component berkat State Hook .

Konstruktor untuk Komponen

Konstruktor adalah fungsi atau method khusus pada class yang akan dieksekusi saat objek dibuat atau komponen digunakan.

Konstruktor biasanya digunakan untuk melakukan inisialisasi komponen. Konstruktor hanya ada pada komponen yang dibuat dengan class.

Konstruktur dibuat dengan fungsi constructor(). Di dalam konstruktor, kita bisa mendefinisikan nilai awal untuk variabel maupun state.

Pemanggilan fungsi super() di dalam konstruktor akan mengeksekusi konstruktor dari induk class, yakni React.Component, tujuannya agar kita bisa mengakses semua method yang ada di class induk.

State dan Props pada Komponen Reactjs

State dan props adalah objek khusus yang menyimpan data untuk komponen. Kedua objek ini memiliki cara kerja yang berbeda. State adalah objek yang digunakan untuk menyimpan data di dalam komponen, sedangkan props adalah objek yang digunakan untuk menyimpan data yang diterima dari luar komponen.

Data yang disimpan di dalam state bisa kita ubah-ubah, sedangkan data yang disimpan di dalam props tidak bisa diubah karena sifatnya read-only.

Cara Membuat State

State dibuat di dalam konstruktor dan nilainya dapat langsung diisi di sana.

Berikut adalah langkah-langkah untuk membuat sebuah class components pada ReactJS:

Buat Proyek Baru (Opsional), jika belum memiliki proyek React yang ada, kita dapat membuatnya dengan perintah berikut menggunakan create-react-app nama-app, misal :
```
create-react-app belajar-react
```
Ganti “nama-app” dengan nama yang kita inginkan. Jika sudah ada proyek yang kita buat, kita tinggal lanjutkan saja.

Buat File .js, buat file JavaScript baru dengan nama komponen yang ingin kita buat, misalnya “State.js” di dalam folder components, dan isi dengan sintak :

//Import react
import React from 'react';

class Header extends React.Component {
    constructor() {
        super();
        
        // membuat objek state
        this.state = {
            title: "Belajar Reactjs",
            subTitle: "Panduan step-by-step Reactjs untuk pemula"
        };
    }
    
    render() {
        return (
            <div>
                <h1>{this.state.title}</h1>
                <h2>{this.state.subTitle}</h2>
            </div>
        );
    }
    
}

//eksport komponen
export default Header;

Gunakan Komponen, di komponen lain atau dalam file utama seperti “App.js“, impor komponen yang telah kita buat dan gunakan di dalam JSX dan ubah sintak file App.js menjadi seperti berikut :
```
import './App.css';
import Header from './components/State';

function App() {
  return (
    <div className="App">
      <Header/>
    </div>
  );
}

export default App;
```
Jalankan Aplikasi, jalankan aplikasi React dengan menjalankan perintah :
```
npm start
```
pastikan kita berada di direktori proyek yang sedang kita buat.

Hasilnya:

Perhatikan kode di atas, kita bisa mengambil nilai dari state dengan cara seperti ini :

<h1>{this.state.title}</h1>
<h2>{this.state.subTitle}</h2>

Elemen ini akan di-render ulang jika nilai state berubah. Ini juga disebut reactive, React akan selalu melakukan update tampilan komponennya dengan mengikuti data pada state. React hanya akan melakukan update pada bagian yang berubah saja.

Untuk mengubah nilai pada state, kita bisa menggunakan method setState().

Contoh :

//Import react
import React from 'react';

class Header extends React.Component {
    constructor() {
        super();

        // membuat objek state
        this.state = {
            title: "Belajar Reactjs",
            subTitle: "Panduan step-by-step Reactjs untuk pemula"
        };
    }
    
    changeTitle = () => {
        this.setState({
            title: "Tutorial Reactjs di agussuratna.net"
        });
    }
    
    render() {
        return (
            <div>
                <h1>{this.state.title}</h1>
                <h2>{this.state.subTitle}</h2>
                <button onClick={this.changeTitle}>Ubah Judul</button>
            </div>
        );
    }
}

//Ekport komponen
export default Header;

Hasilnya :

Perhatikan kode di atas, pada method changeTitle(), kita menggunakan arrow function. Tujuannya agar kita tidak melakukan binding.

Jika tidak menggunakan arrow function, maka kita membuat method menggunakan fungsi seperti ini :

changeTitle() {
    this.setState({
        title: "Tutorial Reactjs Petani Kode"
    });
}

Atau seperti ini :

changeTitle = function() {
    this.setState({
        title: "Tutorial Reactjs Petani Kode"
    });
}

Maka hasilnya akan erorr this is undefined, karena this akan menunjuk ke fungsi itu sendiri bukan komponen.

Cara Membuat Props

Props tidak perlu kita buat seperti state, karena ia hanya bertugas untuk menerima data dari luar komponen. Kita tinggal pakai saja.

Berikut adalah langkah-langkah untuk membuat sebuah Props pada ReactJS:

Buat File .js, buat file JavaScript baru dengan nama komponen yang ingin kita buat, misalnya “Props.js” di dalam folder components, dan isi dengan sintak :

//Import react
import React from 'react';
import ReactDOM from 'react-dom';

class Message extends React.Component {
    render(){
        return(
            <div>
                <small>{this.props.sender}:</small>
                <p>{this.props.content}</p>
                <hr/>
            </div>
        );
    }
}
    
// menggunakan komponen
let chat = (
    <div>
        <Message sender="Agus" content="Hi, Apa kabar?" />
        <Message sender="Roni" content="Kabar Baik" />
    </div>
);

//ekspor komponen
export default Message;
    
// render komponen ke RealDOM
ReactDOM.render(chat, document.getElementById("root"));

Gunakan Komponen, di komponen lain atau dalam file utama seperti “App.js“, impor komponen yang telah kita buat dan gunakan di dalam JSX dan ubah sintak file App.js menjadi seperti berikut :

// import logo from './logo.svg';
import './App.css';
import Message from './components/Props';

function App() {
  return (
    <div className="App">
      <Message/>
    </div>
  );
}

export default App;

Jalankan Aplikasi, jalankan aplikasi React dengan menjalankan perintah :
```
npm start
```
pastikan kita berada di direktori proyek yang sedang kita buat.

Hasilnya :

Jika kita ingin memberikan nilai ke props dalam bentuk variabel, kita tinggal tulis seperti ini :

var content = "Hi, apa kabar?";
var sender = "Agus";

let chat = (
    <div>
        <Message sender={sender} content={content} />
    </div>
);

Hal yang harus diingat, nilai props tidak bisa diubah seperti state yang menggunakan fungsi setState(), karena sifat props hanya dapat dibaca saja (read-only).

Perbedaan Stateful dengan Stateless Component

Stateful components adalah komponen yang menggunakan state. Sedangkan Stateless adalah komponen yang tidak menggunakan state.

Stateful components juga dikenal dengan sebutan Container dan Smart components. Stateless juga dikenal dengan sebutan Presentation dan Dumb Components.

Intinya kalau menggunakan state, maka disebut : Sateful, Container, dan Smart. Sedangkan kalau tidak menggunakan state maka disebut : Stateless, Presentation, Dumb.

**Komponen Bersarang (Nested Components)**

Komponen bersifat reuseable atau dapat digunakan kembali. Hal ini akan sering kita temukan dalam komponen bersarang. Komponen bersarang atau Nested Components adalah komponen yang digunakan di dalam komponen.

Contoh :

// membuat komponen Message
class Message extends React.Component {
  render() {
    return (
      <div>
        <small>{this.props.sender}:</small>
        <p>{this.props.content}</p>
        <hr />
      </div>
    );
  }
}

// membuat komponen ChatBox
class ChatBox extends React.Component {
  render() {
    return (
      <div>
        <Message sender="Agus" content="Sudah belajar React?" />
        <Message sender="Roni" content="Ini lagi belajar React" />
        <Message sender="Agus" content="OK, selamat belajar" />
      </div>
    );
  }
}

// render komponen ke RealDOM
ReactDOM.render(<ChatBox />, document.getElementById("root"));

Sehingga kode lengkapnya seperti berikut :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Nested Components</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>

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

    <script type="text/babel">
      // membuat komponen Message
      class Message extends React.Component {
        render() {
          return (
            <div>
              <small>{this.props.sender}:</small>
              <p>{this.props.content}</p>
              <hr />
            </div>
          );
        }
      }

      // membuat komponen ChatBox
      class ChatBox extends React.Component {
        render() {
          return (
            <div>
              <Message sender="Agus" content="Sudah belajar React?" />
              <Message sender="Roni" content="Ini lagi belajar React" />
              <Message sender="Agus" content="OK, selamat belajar" />
            </div>
          );
        }
      }

      // render komponen ke RealDOM
      ReactDOM.render(<ChatBox />, document.getElementById("root"));
    </script>
  </body>
</html>

Pada kode tersebut, kita menggunakan komponen <Message/> di dalam komponen <ChatBox/>. Inilah yang disebut dengan komponen bersarang atau komponen di dalam komponen.

Hasilnya akan seperti ini :

Komponen dengan File Terpisah

Komponen dapat kita buat dalam file javascript terpisah. Biasanya satu file berisi satu komponen, ini akan memudahkan kita saat terdapat banyak komponen di dalam aplikasi.

Jika menggunakan React secara langsung di HTML, maka bisa dipisah seperti ini :

Nama file: header.js

function Header() {
    return (
        <div>
            <h1>Tutorial Reactjs untuk Pemula</h1>
            <h2>Panduan step-by-step belajar Reactjs</h2>
        </div>
    );
}

Nama file: index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Function Components</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>

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

    <script src="header.js" type="text/babel"></script>

    <script type="text/babel">
      // render komponen ke RealDOM
      ReactDOM.render(<Header />, document.getElementById("root"));
    </script>
  </body>
</html>

File header.js kita impor ke dalam HTML dengan type text/babel, karena dia merupakan komponen React. Tapi cara ini tidak direkomendasikan, karena kalau ada banyak sekali komponen, nanti browser akan terbebani karena harus men-download semua komponen. Akibatnya aplikasi kita akan menjadi lambat.

Oleh sebab itu, kita dianjurkan menggunakan create-react-app untuk membuat aplikasi yang memiliki banyak komponen dan kompleks.

Sekarang coba lihat kembali proyek yang sudah kita buat dengan create-react-app di tutorial pertama. Tiap komponen pada proyek ini, dipisah dalam satu file javascript. Di sana memang cuma baru ada satu komponen, yakni App.js.

Sekarang kita buat komponen baru bernama Title.js di dalam forlder src/components dan isi dengan kode berikut :

import React from 'react';

class Title extends React.Component {
    constructor(){
        super();
        this.state = {
            title: "Aplikasi React Pertamaku",
            subTitle: "Dibuat dengan penuh semangat!"
        }
    }

    render(){
        return(
            <div>
                <h1>{this.state.title}</h1>
                <p>{this.state.subTitle}</p>
            </div>
        );
    }
}

export default Title;

Saat kita membuat komponen di file terpisah, kita harus mengekspornya agar nanti bisa kita impor.

export default Title;

Selanjutnya kita akan impor komponen ini pada komponen App.js. Silahkan ubah kode pada App.js menjadi seperti ini :

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Title from './components/Title';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Title />
      </header>
    </div>
  );
}

export default App;

Kita jalankan server development untuk React dengan perintah :

yarn start

jika menggunakan yarn.

npm run start

jika menggunakan npm.

Maka hasilnya :

Demikian tutorial tentang Component di React. Selanjutnya kita akan mempelajari tentang Sintaks JSX di React. Semoga bermanfaat, jika ada pertanyaan silahkan tuliskan di kolom komentar.

Referensi :

https://www.petanikode.com/reactjs-komponen/

agussuratna.net

Tutorial ReactJS #3 : Components di React

Pengertian Components

Cara Membuat Component di Reactjs

Konstruktor untuk Komponen

State dan Props pada Komponen Reactjs

Cara Membuat State

Cara Membuat Props

Perbedaan Stateful dengan Stateless Component

**Komponen Bersarang (Nested Components)**

Komponen dengan File Terpisah

1 Trackback / Pingback

Leave a Reply Cancel reply

Pengertian Components

Cara Membuat Component di Reactjs

Konstruktor untuk Komponen

State dan Props pada Komponen Reactjs

Cara Membuat State

Cara Membuat Props

Perbedaan Stateful dengan Stateless Component

Komponen Bersarang (Nested Components)

Komponen dengan File Terpisah

Related Post

Cara Mudah Membuat Popup Cantik Dengan Sweet Alert

Tutorial ReactJS #2 : Memahami Struktur Direktori Project React

Tutorial Node.js #8 : Cara Menggunakan Database MySQL pada Nodejs

1 Trackback / Pingback

Leave a Reply Cancel reply

**Komponen Bersarang (Nested Components)**