Components

Metode Bikin Komponen

Berikut adalah cara membuat komponen. Buat file di dalam direktori components, beri nama MyComponent.jsx, kemudian ketikan script berikut:

Komponen Fungsional

MyComponent.jsx

export const MyComponent = () => {
  return (
    <div>
      <h1>Ini adalah komponen fungsional</h1>
      <p>Halo dari MyComponent!</p>
    </div>
  );
};

Buat file di dalam direktori components, beri nama AnotherComponent.jsx, kemudian ketikan script berikut:

Komponen Berbasis Kelas

AnotherComponent.jsx

import { Component } from "react";
 
class AnotherComponent extends Component {
  render() {
    return (
      <div>
        <h1>Ini adalah komponen berbasis kelas</h1>
        <p>Halo dari AnotherComponent!</p>
      </div>
    );
  }
}
 
export default AnotherComponent;

Untuk saat ini kita cukup menggunakan komponen fungsional (regular functions dan arrow functions). Komponen berbasis kelas sebagai pengenalan saja.

Props (Single dan Multiple)

Berikut adalah contoh komponen props dengan single dan multiple:

Komponen Single Prop

const User = ({ nama }) => {
  return (
    <div>
      <h2>Hai, {nama}!</h2>
    </div>
  );
};

Komponen Multiple Props

const Artikel = ({ judul, penulis, tanggal }) => {
  return (
    <div className="artikel">
      <h2>{judul}</h2>
      <p>Oleh: {penulis}</p>
      <p>Tanggal: {tanggal}</p>
    </div>
  );
};

Contoh Penggunaan Komponen

export default function Halaman() {
  return (
    <div>
      <h1>Contoh Penggunaan Komponen dengan Props</h1>
      {/* Penggunaan Komponen Single Prop */}
      <User nama="Vio" />
      <User nama="Via" />
 
      {/* Penggunaan Komponen Multiple Props */}
      <Artikel
        judul="Judul Artikel"
        penulis="Penulis Artikel"
        tanggal="Tanggal Artikel"
      />
    </div>
  );
}

Dalam contoh di atas, terdapat dua komponen: User dengan single prop (nama) dan Artikel dengan multiple props (judul, penulis, dan tanggal). Kemudian, komponen-komponen ini dipanggil di dalam komponen Halaman.

Memanggil/Mengimpor Komponen ke Komponen Lain

Setelah membuat komponen, kamu dapat mengimpor/memanggil dan menggunakannya di halaman atau komponen lain. Buat file di dalam direktori components, beri nama Home.jsx, kemudian ketikan script berikut:

Home.jsx

import MyComponent from "../components/MyComponent";
import AnotherComponent from "../components/AnotherComponent";
 
export const Home = () => {
  return (
    <div>
      <h1>Selamat datang di Devscale Indonesia</h1>
      <MyComponent />
      <AnotherComponent />
    </div>
  );
};

Setup Pages