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

4 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

Openstore Ubuntu Touch

M Nawwaf Q

android# ubuntu# ubuntutouch# openstore

Openstore Ubuntu Touch

OpenStore adalah store app yang dirancang khusus untuk sistem operasi Ubuntu Touch. OpenStore merupakan store app resmi untuk perangkat yang menjalank...

Read More
Panduan untuk menggunakan MySQL Connector di Python

Ferryanto

Python

Panduan untuk menggunakan MySQL Connector di Python

mysql-connector-python adalah library resmi yang dikembangkan oleh MySQL untuk menghubungkan aplikasi Python dengan database MySQL. Anda dapat mengelo...

Read More
Install Flutter di Mac OS Monterey menggunakan Homebrew

Ferryanto

homebrew# flutter# terminal# android# ios

Install Flutter di Mac OS Monterey menggunakan Homebrew

Kali ini kita akan membahasas instalasi Flutter pada mac OS Monterey menggunakan Homebrew. Silahkan gunakan snippet dibawah ini:a. Instalasi Homebrew,...

Read More
Laravel Tutorial Integrasi API Google analytic dengan Laravel

Ferryanto

tutorial laravel# laravel tutorial# laravel surabaya# laravel developer# laravel api# google analityc

Laravel Tutorial Integrasi API Google analytic dengan Laravel

google analytic merupakan tool tambahan yang sangat berguna untuk webmaster. agar lebih mudah bagi webmaster (tidak membuka banyak dashboard ) maka de...

Read More