Tutorial: Membuat Komponen atau Function di React JS dan Cara Memanggilnya
Muhammad Hanif
Posted on January 6, 2024
Dalam tutorial ini, kita akan belajar cara membuat komponen atau function di React JS, serta cara ekspor dan impor nya. Berikut adalah langkah-langkahnya:
- Buka proyek React JS yang sudah ada atau buat proyek baru.
- Buat file baru dengan ekstensi
.js
untuk menyimpan komponen atau function yang akan kita buat. - 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;
- 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
.
- 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.
💖 💪 🙅 🚩
Muhammad Hanif
Posted on January 6, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
githubcopilot AI Innovations at Microsoft Ignite 2024 What You Need to Know (Part 2)
November 29, 2024