Tutorial: Membuat Komponen atau Function di React JS dan Cara Memanggilnya

Dalam tutorial ini, kita akan belajar cara membuat komponen atau function di React JS, serta cara ekspor dan impor nya. Berikut adalah langkah-langkahnya:

1. Buka proyek React JS yang sudah ada atau buat proyek baru.
2. Buat file baru dengan ekstensi .js untuk menyimpan komponen atau function yang akan kita buat.
3. Di dalam file tersebut, tulis kode untuk mendefinisikan komponen atau function.

Misalnya, kita akan membuat komponen Header dengan kode sebagai berikut:

import React from 'react';

function Header() {
  return (
    <header>
      <h1>Ini adalah Header</h1>
    </header>
  );
}

export default Header;

1. Setelah kita mendefinisikan komponen atau function, kita dapat meng-ekspor nya menggunakan pernyataan export.

Misalnya, pada contoh di atas, kita menggunakan export default Header; untuk meng-ekspor komponen Header.

1. Setelah kita meng-ekspor komponen atau function, kita dapat meng-impor nya di file lain menggunakan pernyataan import.

Misalnya, jika kita ingin meng-impor komponen Header di komponen utama, kita dapat melakukan hal berikut:

import React from 'react';
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
      <p>Ini adalah konten utama</p>
    </div>
  );
}

export default App;

Dengan demikian, kita telah berhasil membuat komponen atau function di React JS, serta memahami cara ekspor dan impor nya.