ReactJS - Komponen Tak Berahta: Panduan untuk Pemula

Halo teman-teman, sang pewaris React! Hari ini, kita akan memulai perjalanan menarik ke dunia komponen React, khususnya fokus pada komponen tak berahta. Jangan khawatir jika Anda baru belajar pemrograman; saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatunya secara langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda) dan mari kita masuk ke dalam!

Apa Itu Komponen di React?

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

Jenis Komponen

Di React, kita memiliki dua jenis komponen utama:

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

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

Komponen Berahta: Tinjauan Singkat

Komponen berahta, juga dikenal sebagai komponen kelas, mirip seperti pisau Swiss Army di React. Mereka bisa melakukan banyak hal, termasuk mengelola state 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 berahta yang mengelola state namenya sendiri. Tetapi kadang-kadang, kita tidak memerlukan semua kekuatan ini, dan itu adalah saat komponen tak berahta masuk ke dalam!

Komponen Tak Berahta: Kesederhanaan di Tempat Terbaik

Komponen tak berahta, juga disebut komponen fungsional, mirip 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 sebelumnya tapi dengan sangat sedikit kode. Itu seperti perbedaan antara menggunakan palu besi dan palu biasa untuk menggantung bingkai gambar - kadang-kadang, yang sederhana adalah yang terbaik!

Mengapa Menggunakan Komponen Tak Berahta?

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

Membuat Komponen Tak Berahta Pertama Anda

Mari kita buat komponen tak berahta 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 apa yang terjadi:

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

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 Berahta

Props (singkatan dari properties) adalah cara kita menyalurkan data ke komponen tak berahta. Mereka seperti bahan yang Anda berikan kepada koki - komponen mengambil prop 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>
);
};

mari kitauraikan ini:

• Kita destrukturkan name, job, avatar, dan socialLinks dari props.
• Kita gunakan nilai ini untuk mengisi JSX kami.
• 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 Berahta

Berikut adalah beberapa tips untuk membuat komponen tak berahta Anda bersinar:

1. Perhatikan fokus: Setiap komponen harus melakukan satu hal dengan baik.
2. Gunakan prop-types: Meskipun tidak dibahas 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. Destrukturkan props: Itu membuat kode Anda lebih bersih dan mudah dibaca.

Kesimpulan

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

Di les berikutnya, kita akan mendalam lebih tentang cara menggunaan komponen ini untuk membuat aplikasi dunia nyata. Sampai saat itu, semoga Anda senang coding!

Credits: Image by storyset