ReactJS - Susun Atur Dalam Komponen

Hai, para pengembang React yang bersemangat! Saya sangat senang untuk memandu Anda melalui dunia yang menarik dari komponen susun atur di ReactJS. Sebagai orang yang telah mengajar ilmu komputer selama tahun tahun, saya telah melihat banyak siswa yang terangsang saat mereka mengerti konsep ini. Jadi, mari kita mulai perjalanan ini bersama, ya?

Mengerti Komponen Susun Atur

Sebelum kita masuk ke kode, mari bicarakan apa itu komponen susun atur dan mengapa mereka penting. Bayangkan Anda membangun sebuah rumah. Susun atur adalah seperti rancangan - itu menentukan di mana semua halangan berada. Dalam React, komponen susun atur mempunyai tujuan yang sama. Mereka membantu mengatur aplikasi Anda dan membuatnya lebih terorganisir dan mudah untuk dipelihara.

Mengapa Menggunakan Komponen Susun Atur?

1. Keserasian: Mereka memastikan penampilan yang seragam di seluruh aplikasi Anda.
2. Reusabilitas: Anda dapat menggunakan susun atur yang sama di beberapa tempat.
3. Pemisahan Kewenangan: Mereka menjaga struktur Anda terpisah dari konten.

Sekarang, mari kita lihat contoh untuk melihat bagaimana ini bekerja dalam praktek.

Contoh Komponen Susun Atur

Pertama, kita akan membuat komponen susun atur sederhana yang termasuk header dan footer, dengan ruang untuk konten di antaranya.

import React from 'react';

const Layout = ({ children }) => {
return (
<div className="layout">
<header>
<h1>Aplikasi Menakjubkan Saya</h1>
</header>
<main>{children}</main>
<footer>
<p>&copy; 2023 Aplikasi Menakjubkan Saya</p>
</footer>
</div>
);
};

export default Layout;

mari kitauraikan ini:

1. Kita mengimpor React (hal ini selalu diperlukan dalam komponen React).
2. Kita menentukan komponen fungsional yang disebut Layout.
3. Itu mengambil prop children, yang adalah prop khusus di React yang berisi konten yang dilewatkan antara tag pembuka dan penutup komponen.
4. Komponen ini mengembalikan JSX (sintaksis React untuk menjelaskan UI) yang termasuk header, area konten utama, dan footer.
5. Kita gunakan {children} di seksi utama untuk menampilkan apa pun konten yang dilewatkan ke komponen ini.

Sekarang, mari kita lihat bagaimana kita dapat menggunakan komponen susun atur ini:

import React from 'react';
import Layout from './Layout';

const HomePage = () => {
return (
<Layout>
<h2>Selamat Datang di Aplikasi Menakjubkan Saya!</h2>
<pIni adalah konten halaman utama.</p>
</Layout>
);
};

export default HomePage;

Dalam contoh ini, komponen HomePage menggunakan komponen Layout. Konten antara tag <Layout> menjadi prop children dalam komponen Layout.

Berbagi Logika Dalam Komponen: Render Props

Sekarang kita mengerti komponen susun atur dasar, mari kita maju satu langkah dengan konsep yang disebut "render props". Ini adalah teknik yang kuat untuk berbagi kode antara komponen React.

Apa Itu Render Props?

Render props adalah teknik di mana komponen menerima fungsi sebagai prop dan menggunakan fungsi ini untuk merender sesuatu. Itu seperti memberikan komponen "resep" untuk apa yang harus dirender.

mari kita lihat contoh:

import React, { useState } from 'react';

const ToggleComponent = ({ render }) => {
const [isOn, setIsOn] = useState(false);

const toggle = () => setIsOn(!isOn);

return render(isOn, toggle);
};

const App = () => {
return (
<div>
<ToggleComponent
render={(isOn, toggle) => (
<div>
<button onClick={toggle}>{isOn ? 'Matikan' : 'Nyalakan'}</button>
<p>S witch {isOn ? 'nyala' : 'mati'}.</p>
</div>
)}
/>
</div>
);
};

export default App;

mari kitauraikan ini:

1. Kita membuat ToggleComponent yang mengelola state sendiri (isOn) dan menyediakan fungsi toggle.
2. instead of rendering its own UI, it calls the render prop function, passing isOn and toggle as arguments.
3. Dalam komponen App, kita menggunakan ToggleComponent dan menyediakan fungsi sebagai prop render.
4. Fungsi ini menerima isOn dan toggle dan mengembalikan UI yang sesungguhnya yang kita ingin render.

Keindahan pendekatan ini adalah ToggleComponent dapat digunakan kembali dengan UI yang berbeda. Kita bisa menggunakannya untuk saklar cahaya, modal, atau apa pun yang memerlukan fungsi on/off!

Tabel Metode

Berikut adalah tabel yang menggabungkan metode kunci yang kita diskusikan:

Metode	Deskripsi	Contoh
useState	Sebuah React Hook yang memungkinkan Anda menambahkan state ke komponen fungsional	const [isOn, setIsOn] = useState(false);
children	Sebuah prop khusus yang memungkinkan Anda mengirimkan komponen sebagai data ke komponen lain	<Layout>{/* komponen anak */}</Layout>
Render Props	Teknik untuk berbagi kode antara komponen React menggunakan prop yang nilainya adalah fungsi	<ToggleComponent render={(isOn, toggle) => (/* ... */)} />

Ingat, latihan membuat sempurna! Cobalah membuat komponen susun atur Anda sendiri dan eksperimen dengan render props. Anda akan terkejut betapa cepat Anda dapat membuat komponen yang fleksibel dan dapat digunakan kembali.

Dalam kesimpulan, komponen susun atur dan render props adalah alat kuat di dalam kotak alat React Anda. Mereka memungkinkan Anda untuk membuat kode yang lebih terorganisir, dapat digunakan kembali, dan fleksibel. Sebagai Anda terus mengembangkan perjalanan React Anda, Anda akan menemukan banyak cara untuk menerapkan konsep ini untuk menciptakan antarmuka pengguna yang menakjubkan. Selamat coding!

Credits: Image by storyset