Join our newsletter!

Enter your email to receive our latest newsletter.

Don't worry, we don't spam

A Febrian H

By A Febrian H

React.js# javascript# komponen

2 bulan yang lalu

Dasar-Dasar Komponen di React.js: Membuat dan Mengelola Komponen

Komponen adalah dasar dari pengembangan aplikasi di React.js. Mereka adalah blok pembangun yang memungkinkan kita untuk membuat antarmuka pengguna (UI) yang kompleks dengan membaginya menjadi bagian-bagian kecil yang dapat digunakan kembali. Berikut adalah tutorial dasar tentang cara membuat dan mengelola komponen di React.

1. Pengertian Komponen

Komponen di React adalah fungsi atau kelas JavaScript yang mengembalikan elemen React (sering kali berupa elemen HTML). Ada dua jenis komponen di React:

  • Komponen Fungsional (Functional Component): Dibuat menggunakan fungsi JavaScript biasa.
  • Komponen Berbasis Kelas (Class Component): Dibuat dengan menggunakan kelas (class), meskipun saat ini lebih jarang digunakan.

2. Membuat Komponen Fungsional Sederhana

Komponen fungsional adalah cara termudah dan paling umum untuk membuat komponen di React. Contoh sederhana:

import React from 'react';

function Welcome() {
return <h1>Halo, selamat datang di React!</h1>;
}

export default Welcome;


Untuk menggunakan komponen ini, cukup impor dan masukkan ke dalam komponen utama atau App.js seperti berikut:

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

function App() {
return (
<div>
<Welcome />
</div>
);
}

export default App;

3. Menggunakan Props pada Komponen

Props (singkatan dari "properties") adalah cara untuk mengirimkan data ke komponen anak. Contohnya:

function Welcome(props) {
return <h1>Halo, {props.name}!</h1>;
}
 
// Menggunakan props di App.js
function App() {
return (
<div>
<Welcome name="John" />
</div>
);
}
 

Dalam contoh ini, Welcome menerima name sebagai prop, lalu menampilkan pesan berdasarkan nilai name tersebut.

4. Menggunakan State dalam Komponen

State adalah objek yang menyimpan data dinamis dari komponen. Contoh penggunaan state dengan useState:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Nilai saat ini: {count}</p>
<button onClick={() => setCount(count + 1)}>Tambah</button>
</div>
);
}


Setiap kali tombol ditekan, fungsi setCount akan mengubah nilai count, dan UI akan diperbarui secara otomatis.

5. Mengelola Komponen dengan Struktur yang Lebih Kompleks

Kita dapat membuat hierarki komponen dengan mengelompokkan beberapa komponen bersama. Misalnya, jika kita ingin membuat aplikasi todo sederhana, kita bisa membuat komponen TodoList, TodoItem, dan AddTodo:

// TodoList.js
import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
<TodoItem key={todo.id} todo={todo} />
))}
</ul>
);
}

export default TodoList;


Komponen TodoList menerima daftar todos melalui props dan me-render setiap TodoItem berdasarkan data tersebut.

6. Menggunakan Lifecycle (Siklus Hidup) pada Komponen

Untuk melakukan tindakan pada waktu tertentu dalam siklus hidup komponen, seperti saat komponen pertama kali dimuat atau saat dihapus, kita bisa menggunakan useEffect:

import React, { useEffect, useState } from 'react';

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);

return () => clearInterval(interval);
}, []);

return <p>Waktu berlalu: {seconds} detik</p>;
}


Dalam contoh ini, useEffect dijalankan sekali ketika komponen dimuat, dan clearInterval membersihkan interval ketika komponen tidak lagi digunakan.


Related Articles

Merubah Import size phpmyadmin pada MAMP Server

Ferryanto

phpmyadmin

Merubah Import size phpmyadmin pada MAMP Server

Secara default maksimal ukuran file yang bisa di upload saat import db di phpmyadmin adalah 2MB. Jika anda memerlukan untuk merubah ( dikarenakan ingi...

Read More
faq

Ferryanto

faq# kebutuhan aplikasi# cara membuat aplikasi

faq

1. Bagaimana sih alur pengembangan sebuah aplikasi ?Tahap pertama tentu saja analisa kebutuhan dan tujuan yang ingin dicapai dengan aplikasi tersebut,...

Read More
Mendaftarkan device token di Firebase menggunakan Kotlin

M Nawwaf Q

firebase# kotlin# android# fcm# google

Mendaftarkan device token di Firebase menggunakan Kotlin

Untuk mendaftarkan device token di Firebase menggunakan Kotlin, Anda dapat mengikuti langkah-langkah berikut. Ini biasanya dilakukan ketika Anda ingin...

Read More
pemahaman tentang cara menggunakan query dan aggregation framework di MongoDB

M Nawwaf Q

mongodb# nosql

pemahaman tentang cara menggunakan query dan aggregation framework di MongoDB

Dalam pengembangan aplikasi, pemahaman tentang cara menggunakan query dan aggregation framework di MongoDB sangat penting. Dengan query yang tepat, da...

Read More