ReactJS - Komponen Tak Berstatus: Panduan Pemula

Hai sana, para ahli React masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dalam dunia komponen React, khususnya fokus pada komponen tak berstatus. Jangan khawatir jika Anda baru dalam programming; saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita masuk ke dalamnya!

Apa Itu Komponen di React?

Sebelum kita membahas komponen tak berstatus, mari kita pahami apa itu komponen di React. Bayangkan komponen seperti blok LEGO. Seperti Anda dapat membangun struktur yang kompleks dengan blok LEGO sederhana, Anda dapat menciptakan aplikasi web yang rumit menggunakan komponen React.

Jenis Komponen

Dalam React, kita memiliki dua jenis komponen utama:

1. Komponen Berstatus (Komponen Kelas)
2. Komponen Tak Berstatus (Komponen Fungsional)

Hari ini, kita akan fokus pada komponen tak berstatus, tapi mari kita singkat sekali tentang komponen berstatus untuk memahami perbedaannya.

Komponen Berstatus: Overview Singkat

Komponen berstatus, juga dikenal sebagai komponen kelas, seperti pisau瑞士军刀 di React. Mereka bisa melakukan banyak hal, termasuk mengelola status mereka sendiri. Ini adalah contoh sederhana:

import React, { Component } from 'react';

class Greeting extends Component {
constructor(props) {
super(props);
this.state = { name: 'World' };
}

render() {
return <h1>Hello, {this.state.name}!</h1>;
}
}

Dalam contoh ini, Greeting adalah komponen berstatus yang mengelola status namenya sendiri. Tetapi kadang-kadang, kita tidak memerlukan semua kekuatan ini, dan itu adalah tempat komponen tak berstatus masuk!

Komponen Tak Berstatus: Kesederhanaan di Atas Segalanya

Komponen tak berstatus, juga disebut komponen fungsional, seperti pekerja efisien di React. Mereka melakukan satu pekerjaan dan melakukannya dengan baik: merender UI berdasarkan props yang mereka terima. Mari kita lihat contoh:

const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};

Apakah itu bagus? Komponen ini melakukan pekerjaan yang sama seperti komponen kelas kita sebelumnya tapi dengan sangat sedikit kode. Itu seperti perbedaan antara menggunakan palu besi dan palu biasa untuk menggantung kerangka gambar - kadang-kadang, yang lebih sederhana adalah yang lebih baik!

Mengapa Menggunakan Komponen Tak Berstatus?

1. Kesederhanaan: Mereka lebih mudah dibaca dan ditulis.
2. Kinerja: Mereka sedikit lebih cepat karena React tidak perlu mengatur manajemen status.
3. Testabilitas: Dengan lebih sedikit komponen bergerak, mereka lebih mudah untuk diuji.
4. Reusabilitas: Mereka lebih fokus, membuat mereka lebih mudah untuk digunakan ulang.

Membuat Komponen Tak Berstatus Pertama Anda

Mari kita buat komponen tak berstatus sederhana untuk pratinjau postingan blog:

const BlogPostPreview = ({ title, excerpt, author }) => {
return (
<div className="blog-post-preview">
<h2>{title}</h2>
<p>{excerpt}</p>
<span>By {author}</span>
</div>
);
};

Ini adalah apa yang terjadi:

• Kita mendefinisikan fungsi BlogPostPreview.
• Itu menerima objek sebagai argumen, yang kita segera urutkan untuk mendapatkan title, excerpt, dan author.
• Fungsi ini mengembalikan JSX, yang menjelaskan apa yang harus komponen render.

Untuk menggunakan komponen ini:

const App = () => {
return (
<div>
<BlogPostPreview
title="React is Awesome!"
excerpt="Learn why React is taking the web development world by storm."
author="Jane Doe"
/>
</div>
);
};

Props: Darah Komponen Tak Berstatus

Props (singkatan dari properties) adalah cara kita mensampaikan data ke komponen tak berstatus. Mereka seperti bahan yang Anda berikan kepada koki - komponen mengambil props ini dan "membuat" mereka menjadi UI yang lezat!

Mari kita buat contoh yang lebih kompleks: kartu profil pengguna.

const ProfileCard = ({ name, job, avatar, socialLinks }) => {
return (
<div className="profile-card">
<img src={avatar} alt={`${name}'s avatar`} />
<h2>{name}</h2>
<p>{job}</p>
<div className="social-links">
{socialLinks.map((link, index) => (
<a key={index} href={link.url}>
{link.platform}
</a>
))}
</div>
</div>
);
};

Disini, kita menggunakan props yang lebih kompleks, termasuk array dari tautan sosial. Mari kita rincikan ini:

• Kita urutkan name, job, avatar, dan socialLinks dari props.
• Kita gunakan nilai ini untuk mengisi JSX kita.
• Untuk socialLinks, kita gunakan fungsi map untuk membuat tautan untuk setiap platform sosial.

Untuk menggunakan komponen ini:

const App = () => {
const socialLinks = [
{ platform: 'Twitter', url: 'https://twitter.com/johndoe' },
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/johndoe' }
];

return (
<ProfileCard
name="John Doe"
job="React Developer"
avatar="https://example.com/avatar.jpg"
socialLinks={socialLinks}
/>
);
};

Praktik Terbaik untuk Komponen Tak Berstatus

Berikut adalah beberapa tips untuk membuat komponen tak berstatus Anda bercahaya:

1. Kepada mereka fokus: Setiap komponen harus melakukan satu hal dengan baik.
2. Gunakan prop-types: Meskipun belum dicakup dalam panduan ini, prop-types membantu menangkap bug dengan memeriksa jenis props.
3. Gunakan default props: Sediakan nilai default untuk props saat hal itu masuk akal.
4. Urutkan props: Ini membuat kode Anda lebih bersih dan mudah dibaca.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dalam dunia komponen tak berstatus React. Ingat, seperti belajar keterampilan baru, latihan membuat sempurna. Cobalah membuat komponen tak berstatus Anda sendiri, eksperimen dengan props yang berbeda, dan terutama, bersenang-senang coding!

Dalam les berikutnya, kita akan masuk lebih dalam tentang bagaimana menggunakan komponen ini untuk membangun aplikasi dunia nyata. Sampai saat itu, selamat coding!

Credits: Image by storyset