Home » Javascript » Komponen Di ReactJS: Penjelasan dan Contoh Cara Menggunakan

Komponen Di ReactJS: Penjelasan dan Contoh Cara Menggunakan

by syifaul fuadi
by syifaul fuadi

Komponen adalah bit kode yang independen dan dapat digunakan kembali. Komponen melayani tujuan yang sama seperti fungsi JavaScript, tetapi bekerja secara terpisah dan mengembalikan HTML melalui fungsi render.

Komponen datang dalam dua jenis, komponen Kelas dan komponen Fungsi, dalam tutorial ini kita akan berkonsentrasi pada komponen Kelas.

Membuat Sebuah Class Component

Saat membuat komponen React, nama komponen harus dimulai dengan huruf besar.

Komponen harus menyertakan pernyataan extends React.Component, pernyataan ini membuat pewarisan ke React.Component, dan memberikan akses komponen Anda ke fungsi React.Component.

Komponen ini juga membutuhkan metode render (), metode ini mengembalikan sebuah HTML.

Contoh :

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Sekarang aplikasi React Anda memiliki komponen bernama Car, yang mengembalikan elemen. Untuk menggunakan komponen ini dalam aplikasi Anda, gunakan sintaks yang mirip seperti HTML biasa:

Contoh (Buat dua file untuk index.js dan index.html ):

Index.js

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

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

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

  </body>
</html>

Dan hasilnya sebagai berikut :

Membuat Sebuah Function Component

Berikut adalah contoh yang sama seperti di atas, tetapi dibuat menggunakan komponen Fungsi.

Komponen Fungsi juga mengembalikan HTML, dan berperilaku hampir sama dengan komponen Kelas, tetapi komponen Kelas memiliki beberapa tambahan, dan akan lebih disukai dalam tutorial ini.

Contoh Syntex :

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

Sekali lagi aplikasi React Anda memiliki komponen Car.

Mengacu pada komponen Car sebagai HTML biasa (kecuali di React, komponen harus dimulai dengan huruf besar):

Contoh Tampilan komponen Mobil di elemen “root”:

Index.js

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

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

ReactDOM.render(<Car />, document.getElementById('root'));

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

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

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Component Constructor

Jika ada fungsi Constructor() dalam komponen Anda, fungsi ini akan dipanggil saat komponen dimulai.

Fungsi konstruktor adalah tempat Anda memulai properti komponen.

Di React, properti komponen harus disimpan dalam objek yang disebut state.

Anda akan mempelajari lebih lanjut tentang status nanti dalam tutorial ini.

Fungsi konstruktor juga tempat Anda menghormati pewarisan komponen induk dengan menyertakan pernyataan super (), yang mengeksekusi fungsi Construktor komponen induk, dan komponen Anda memiliki akses ke semua fungsi komponen induk (React.Component).

Contoh :

Membuat fungsi Construktor di komponen Car, dan tambahkan properti color:

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

Gunakan properti warna dalam fungsi render ():

Contoh :

Index.js

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

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

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

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

Props

Cara lain untuk menangani properti komponen adalah dengan menggunakan props.

Properti seperti argumen fungsi, dan Anda mengirimkannya ke dalam komponen sebagai atribut.

Anda akan mempelajari lebih lanjut tentang properti di bab berikutnya.

Contoh :
Gunakan atribut untuk meneruskan warna ke komponen Car, dan menggunakannya dalam fungsi render ():

Index.js

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

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

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

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

KOMPONEN DALAM KOMPONEN

Kita bisa merujuk ke komponen di dalam komponen lain:

Contoh :

Index.js

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

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

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

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

KOMPONEN DIDALAM FILE

React adalah tentang menggunakan kembali kode, dan mungkin juga untuk memasukkan beberapa komponen Anda ke dalam file terpisah.

Untuk melakukan itu, buat file baru dengan ekstensi file .js dan masukkan kode di dalamnya:

Perhatikan bahwa file harus dimulai dengan mengimpor React (seperti sebelumnya), dan harus diakhiri dengan pernyataan export default Car ;.

Syntax:
Ini adalah file baru, kami menamakannya “App.js”:

App.js

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

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  
 
}
}

export default Car;

Untuk dapat menggunakan komponen Car, Anda harus mengimpor file di aplikasi Anda.

Contoh :
Sekarang kita mengimpor file “App.js” dalam aplikasi, dan kita dapat menggunakan komponen Car seolah-olah itu dibuat di sini.

App.js

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

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;

/*
Notice that you now have three files in your project:
"App.js", "index.js", and "index.html".
*/

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

ReactDOM.render(<Car />, document.getElementById('root'));

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

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

  </body>
</html>

Dan hasilnya adalah sebagai berikut :

You may also like