ReactJS - Menggunakan Komponen Baru

Pengenalan

Hai sana, para pengembang React masa depan! Saya sangat gembira menjadi panduanmu dalam perjalanan menarik ini ke dunia komponen React. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun tahun, saya bisa katakan bahwa memahami komponen adalah seperti belajar membangun dengan LEGO - sekali Anda mendapatinya, Anda dapat menciptakan hal yang menakjubkan!

Apa Itu Komponen React?

Sebelum kita membanjir ke dalam penggunaan komponen, mari kita memahami apa itu komponen. Pensejukkan komponen sebagai blok bangunan yang dapat digunakan kembali untuk antarmuka pengguna Anda. Seperti halnya Anda dapat menggunakan blok LEGO yang sama di berbagai bagian kreatif Anda, Anda dapat menggunakan komponen React yang sama di berbagai bagian aplikasi Anda.

Jenis Komponen

React memiliki dua jenis utama komponen:

1. Function Components
2. Class Components

Untuk panduan ini, kita akan fokus pada function components, karena mereka lebih sederhana dan lebih modern.

Membuat Komponen Pertama Anda

Ayo mulai dengan membuat komponen sederhana. Kita akan membuat komponen "Greeting" yang menampilkan pesan selamat datang.

function Greeting() {
return <h1>Hallo, pelajar React!</h1>;
}

Ini mungkin terlihat sederhana, tapi ada banyak hal yang terjadi di sini:

• Kita mendefinisikan sebuah fungsi yang disebut Greeting
• Fungsi ini mengembalikan JSX (sinataks yang mirip HTML)
• JSX mewakili apa yang akan ditampilkan di layar

Menggunakan Komponen Baru Anda

Sekarang kita memiliki komponen Greeting, mari gunakanannya dalam aplikasi kita!

function App() {
return (
<div>
<Greeting />
<p>Selamat datang di tutorial React kami!</p>
</div>
);
}

Ini adalah apa yang terjadi:

• Kita memiliki komponen App (komponen utama aplikasi kita)
• Di dalam App, kita menggunakan komponen Greeting
• Kita menggunakan komponen seperti kita menggunakan tag HTML

Ketika Anda menjalankan kode ini, Anda akan melihat "Hallo, pelajar React!" diikuti oleh "Selamat datang di tutorial React kami!"

Komponen Dengan Props

Komponen menjadi sangat kuat ketika kita membuat mereka dinamis menggunakan props. Props adalah seperti parameter bagi komponen Anda.

mari modifikasi komponen Greeting untuk menerima nama:

function Greeting(props) {
return <h1>Hallo, {props.name}!</h1>;
}

Sekarang, kita dapat menggunakannya seperti ini:

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}

Ini akan menampilkan:

Hallo, Alice!
Hallo, Bob!

Apakah itu menakjubkan? Kita telah menciptakan komponen yang dapat menyapa orang-orang berbeda!

Komponen Dengan Banyak Props

mari langkah lebih jauh dan buat komponen yang lebih kompleks. Kita akan membuat komponen UserCard yang menampilkan informasi pengguna.

function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Umur: {props.age}</p>
<p>Pekerjaan: {props.occupation}</p>
</div>
);
}

Sekarang kita dapat menggunakannya seperti ini:

function App() {
return (
<div>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
</div>
);
}

Penyusunan Komponen

Salah satu fitur yang paling kuat dari React adalah kemampuan menyusun komponen. mari buat komponen UserList yang menggunakan beberapa komponen UserCard:

function UserList() {
return (
<div>
<h1>Daftar Pengguna</h1>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
<UserCard name="Charlie" age={42} occupation="Manager" />
</div>
);
}

Sekarang komponen App kita hanya perlu menggunakan UserList:

function App() {
return (
<div>
<Greeting name="Pelajar React" />
<UserList />
</div>
);
}

Metode Komponen

Komponen juga dapat memiliki metode mereka sendiri. mari tambahkan metode ke komponen UserCard yang menghitung tahun kelahiran:

function UserCard(props) {
const calculateBirthYear = () => {
const currentYear = new Date().getFullYear();
return currentYear - props.age;
};

return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Umur: {props.age}</p>
<p>Tahun Kelahiran: {calculateBirthYear()}</p>
<p>Pekerjaan: {props.occupation}</p>
</div>
);
}

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia komponen React. Kita telah menutupi membuat komponen sederhana, menggunakan props, menyusun komponen, dan bahkan menambahkan metode ke komponen.

Ingat, latihan membuat sempurna. Cobalah membuat komponen Anda sendiri, eksperimen dengan props berbeda, dan lihat apa yang Anda bisa bangun. Sebelum Anda tahu, Anda akan dapat membangun UI yang kompleks dengan mudah!

Berikut adalah tabel referensi cepat dari komponen yang kita buat:

Nama Komponen	Props	Deskripsi
Greeting	name	Menampilkan pesan salam
UserCard	name, age, occupation	Menampilkan informasi pengguna
UserList	None	Menampilkan daftar komponen UserCard

Terus coding, terus belajar, dan terutama, bersenang-senang dengan React!

Credits: Image by storyset