ReactJS - Menggunakan Komponen Baru

Pengenalan

Halo sana, para pengembang React masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan yang menarik ke dunia komponen React. Sebagai orang yang telah mengajar ilmu komputer selama tahun tahun, saya bisa katakan bahwa memahami komponen adalah seperti belajar membangun dengan LEGO - sekali Anda mengenalinya, Anda bisa menciptakan hal-hal yang menakjubkan!

Apa Itu Komponen React?

Sebelum kita membanjir ke dalam penggunaan komponen, mari kita pahami apa itu komponen. PERTIKAHKAN 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 tutorial 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 (sintaksis seperti HTML)
• JSX mewakili apa yang akan ditampilkan di layar

Menggunakan Komponen Baru yang Anda Buat

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 saat kita membuat mereka dinamis menggunakan props. Props adalah seperti parameter untuk komponen Anda.

Ayo modifikasi Greeting komponen 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 menarik? Kita telah menciptakan komponen yang dapat menyapa orang-orang berbeda!

Komponen Dengan Banyak Props

Ayo maju satu langkah lebih jauh dan buat komponen yang lebih kompleks. Kita akan membuat UserCard komponen 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=" Pengembang" />
<UserCard name="Bob" age={35} occupation="Desainer" />
</div>
);
}

Penyusunan Komponen

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

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

Sekarang komponen App kita dapat menggunakan UserList:

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

Metode Komponen

Komponen juga dapat memiliki metode mereka sendiri. Ayo tambahkan metode ke UserCard komponen untuk 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 pembuatan komponen sederhana, penggunaan props, penyusunan komponen, dan bahkan menambahkan metode ke komponen.

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

Berikut adalah tabel referensi cepat komponen yang kita buat:

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

Terus coding, terus belajar, dan yang paling penting, bersenang-senang dengan React!

Credits: Image by storyset