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

6 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

Bahasa Pemrograman Terpopuler 2021

Ferryanto

Bahasa Pemrograman Terpopuler 2021# java# python# javascript

Bahasa Pemrograman Terpopuler 2021

Pernahkan kamu memikirkan bahasa pemrograman apa saja yang banyak dipakai di seluruh dunia sampai saat ini? Mungkin kamu berfikir bahwa bahasa pemrogr...

Read More
Monolithic vs microservice, pilih yang mana ?

Ferryanto

Monolithic# microservice# ske

Monolithic vs microservice, pilih yang mana ?

Monolithic dan microservice adalah dua pendekatan yang berbeda dalam pengembangan perangkat lunak. Berikut adalah perbedaan antara monolitik dan arsit...

Read More
Apa itu UUID Universally Unique Identifier

Ferryanto

uuid# laravel# str# Universally Unique Identifier

Apa itu UUID Universally Unique Identifier

UUID singkatan dari Universally Unique Identifier adalah sebuah string identifikasi yang digunakan untuk mengidentifikasi secara unik objek atau entit...

Read More
Composer cURL error 60

Ferryanto

laravel# query# wherebetween# data# curl# error60

Composer cURL error 60

Jika anda mengalami cURL error 60 saat memanggil fungsi laravel pada terminal, kemungkinan hal ini disebabkan oleh tidak ditemukan nya local issuer ce...

Read More