Belajar React : Mengenal React Component

React component memungkinkan kita untuk membuat dan membagi UI ke berberapa bagian. Setiap component dapat digunakan berulang kali tanpa harus mendeklarasikan dan menulis ulang elemen – elemen di setiap kali ingin membuat elemen. Sebagai contoh gambar dibawah ini, gabungan div, title, dan paragraph dapat membuat sebuah komponen Article yang dapat kita gunakan disetiap kali ingin Article ingin dimunculkan.

Konsep dari component di react sama seperti function di javascript dimana kita mengirimkan input berupa props dan component akan mengeluarkan output berdasarkan props yang dikirim.

Nanti kita akan membuat contoh dari props di artikel berikutnya !

Cara membuat React Component

Ada dua cara untuk membuat component, yaitu menggunakan Class Component dan Functional Component. Di tutorial sebelumnya kita telah membuat proyek baru, jadi kita akan menggunakanya untuk tutorial kali ini! Buat sebuah folder baru di dalam folder src, beri nama components. Lalu tambahkan sebuah file .js baru dan beri nama ImageFeed.js

Ada dua cara untuk membuat component ImageFeed;

Functional Component

Functional component adalah function javascript biasa yang menerima 1(satu) input berupa props.

import React from "react";

export default function ImageFeed(props) {
  return (
    <div>
      <img src={props.image} />
      <p>{props.description}</p>
    </div>
  );
}

Class Component

Kamu juga bisa menggunakan ES6 Class untuk mendefinisikan sebuah react component.

import React, { Component } from "react";

export default class ImageFeed extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <img src={this.props.image} />
        <p>{this.props.description}</p>
      </div>
    );
  }
}

Dalam pandangan react, kedua component diatas adalah benar dan menghasilkan component yang sama. Lalu apa bedanya? kita akan mempelajari perbedaan di tutorial selanjutnya.

Pastikan untuk mengekspor (ES6 export) component untuk bisa digunakan di bagian lain dari aplikasi!

Menggunakan Component

Sebelumnya kita hanya menggunakan React elements yang merepresentasikan tag – tag pada DOM seperti <h1>, <h2>, <p> dan lain – lain.

<p>Deskripsi Foto</p>

Sama seperti element, component juga digunakan seperti kita memanggil sebuah tag pada DOM. Sebagai contoh, buka file App.js di root proyek kamu dan copy script dibawah.

import "./App.css";
import ImageFeed from "./components/ImageFeed";

function App() {
  return (
    <div className="App">
      <ImageFeed
        image={
          "https://images.unsplash.com/photo-1624300162353-4638839fbfc9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
        }
        description={"Donut"}
      />
    </div>
  );
}

export default App;

Jalankan aplikasi dengan npm start lalu lihat apa yang terjadi dengan aplikasi React-mu.

Menggunakan kembali Component

Fungsi utama dari component adalah kamu bisa menggunakan ulang component – component dengan satu kali deklarasi. Disini kita akan menggunakan component ImageFeed berulang kali untuk membuat sebuah kumpulan gambar dan deskripsinya seperti di Instagram.

import "./App.css";
import ImageFeed from "./components/ImageFeed";

function App() {
  return (
    <div className="App">
      <ImageFeed
        image={
          "https://images.unsplash.com/photo-1624300162353-4638839fbfc9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
        }
        description={"Donut"}
      />
      <ImageFeed
        image={
          "https://images.unsplash.com/photo-1630257956817-0734ff3846dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
        }
        description={"Potongan Pizza"}
      />
      <ImageFeed
        image={
          "https://images.unsplash.com/photo-1630257956817-0734ff3846dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
        }
        description={"Pizza"}
      />
    </div>
  );
}

export default App;

Kita menggunakan 3 buah component ImageFeed dan mengirimkan masing – masing 3 props image dan description yang berbeda – beda untuk membuat sebuah tampilan feed gambar dengan deskripsi. Hasilnya dapat dilihat dibawah ini:

Kesimpulan

Mari kita rekap ulang apa yang telah kita lakukan di tutorial kali ini:

• Kita belajar dua cara membuat komponen di React, Class dan functional component
• Kita belajar bagaimana menggunakan component
• Kita belajar bagaimana menggunakan ulang component