author Ahmad Muhardian

Tutorial Reactjs #3: Segala Hal yang Harus Kamu Ketahui tentang Components di React

Belajar tentang Components di Reactjs

Hi, balik lagi nih di tutorial Reactjs untuk pemula. Ini adalah lanjutan dari tutorial sebelumnya:

Nah, berikutnya kita akan belajar tentang komponen.

Komponen adalah bagian terpenting dari aplikasi React, karena aplikasi react sendiri terusun dari komponen-komponen.

Komponen di Reactjs ada berbapa macam, Ada yang disebut dengan stateful component dan stateless component. Ada juga function components dan class components. Ada Dumb Components dan Smart Components.

Bagi kamu yang baru pertama belajar React, mungkin akan bingung mendengar istilah-istilah ini.

Tapi tenang saja…

Kita akan kupas semuanya di sini. Mulai dari pengertian komponen itu sendiri sampai membuatnya.

Mari kita mulai…

Apa itu Components?

Sebelum membahas perbedaan stateful, stateless components, dan istilah lainnya..

Kita bahas dulu pengertian komponen di Reactjs.

Jadi.. Komponen adalah bagian-bagian yang menyusun aplikasi React.

Komponen di Reactjs

Mengapa React membutuhkan komponen?

Reactjs bekerja dengan Virtual DOM. Nah, 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 saja perhatikan di method render(), di sana pasti akan ada kode JSX yang akan di-render menjadi HTML.

Componen React dari Vritual DOM, di-render ke Real DOM

Ini mungkin terdengar ‘ribet’ buat yang terbiasa dengan framework lama seperti JQuery.

Mau bikin ini itu, harus bikin komponennya dulu. Mengapa gak langsung aja manipulasi DOM-nya seperti JQuery?

Ya, React memang bekerja seperti itu. Tapi, percayalah.. nanti lama-kelamaan akan terbiasa menggunakan komponen dan merasakan manfaatnya.

Komponen di React sendiri bersifat reuseable, artinya bisa digunakan kembali.

Di luar sana ada banyak komponen React yang siap pakai dan akan memudahkan hidup kita dalam membuat aplikasi.

Lalu apa bedanya komponen dengan elemen?

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:

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

Biar tahu lebih jelas, mari kita pelajari cara membuat komponen.

Cara Membuat Component di Reactjs

Komponen di Reactjs dapat kita buat dengan dua cara:

Pertama 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:

Cara membuat function components

Contoh:

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

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

Hasilnya:

Demo Function Component

Live Demo

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

Cara membuat class components

Contoh:

// 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>
    );
  }
}

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

Hasilnya:

Demo Class Component

Live Demo

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

Oh iya, 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, kita sudah bisa menggunakan state dan component life cycle pada function component berkat State Hook.

Kita akan bahas ini nanti…

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.

Berikut ini cara membuat konstruktor:

Contoh Konstruktor

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. 1

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.

Perbedaan State dan Props pada React

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.

Contoh:

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>
    );
  }
}

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

Hasilnya:

Membuat State untuk Komponen

Live Demo

Coba 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.

Render ulang komponen

Oh iya, React hanya akan melakukan update pada bagian yang berubah saja.

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

Contoh:

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 Petani Kode"
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.title}</h1>
        <h2>{this.state.subTitle}</h2>
        <button onClick={this.changeTitle}>Ubah Judul</button>
      </div>
    );
  }
}

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

Hasilnya:

Live Demo

Perhatikan kode di atas!

Pada method changeTitle(), kita menggunakan arrow function. Tujuannya agar kita tidak melakukan binding.

Memangnya kenapa kalau tidak menggunakan arrow function?

Jika kamu 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"
  });
}

Hasilnya akan error 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.

Contoh:

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="dian" content="Hi, Apa kabar?" />
  <Message sender="petanikode" content="Kabar Baik" />
  </div>
);

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

Hasilnya:

Contoh Props

Gampang kan?

Oh iya, jika kita ingin memberikan nilai ke props dalam bentuk variabel. Kita tinggal tulis seperti ini:

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

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

…dan satu hal lagi yang harus diingat:

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

Apa Bedanya Stateful dengan Stateless Component?

Sebenarnya sangat gampang membedakannya:

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: Stateless, Presentation, Dumb.

Stateful Components vs Stateless Components

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:

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="dian" content="Sudah belajar React?" />
				<Message sender="petanikode" content="Ini lagi belajar React" />
				<Message sender="dian" content="OK, selamat belajar" />
			</div>
		);
	}
}

ReactDOM.render(<ChatBox />, document.getElementById("root"));
Kode Lengkap
<!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/[email protected]/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="dian" content="Sudah belajar React?" />
						<Message sender="petanikode" content="Ini lagi belajar React" />
						<Message sender="dian" 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:

Contoh komponen bersarang

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 kamu 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/[email protected]/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.

Mengapa?

Ya, bayangkan saja 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.

Komponen App.js

Sekarang mari kita buat komponen baru. Buatlah file baru bernama Title.js di dalam folder src.

Membuat komponen title

Kemudian isi Title.js dengan kode berikut:

import React from 'react';

class Title extends React.Component {
    constructor(){
        super();
        this.state = {
            title: "Aplikasi React Pertamaku",
            subTitle: "Dibuat dengan 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;

Oke, sekarang kita akan impor komponen ini pada komponen App.js. Silakan ubah kode pada App.js menjadi seperti ini:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Title from './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;

Mari kita lihat hasilnya, silakan jalankan server development untuk React dengan perintah:

yarn start #jika kamu menggunakan yarn
npm run start #jika kamu menggunakan npm

Maka hasilnya:

Aplikasi Reactjs pertama

Keren 🎉

Apa Selanjutnya?

Tutorial ini cukup sampai di sini…

Intinya, kita harus membiasakan diri dengan komponen. Pahami cara membuat dan menggunakannya.

Berikutnya, silakan lanjutkan ke:

Jika ada yang kurang jelas, bisa ditanyakan melalui komentar.

Terima kasih 🙏

  1. W3Schools - React Components ↩︎