Baik, mari kita lanjutkan pembelajaran **React.js** dengan membahas materi dasar seperti **komponen**, **props**, dan **state**.
### 1. Komponen di React
**Komponen** adalah blok bangunan utama di React. Sebuah aplikasi React biasanya terdiri dari banyak komponen kecil yang masing-masing bertanggung jawab untuk menghasilkan bagian UI tertentu. Komponen dapat berupa:
- **Functional Components**: Komponen yang didefinisikan sebagai fungsi JavaScript biasa.
- **Class Components**: Komponen yang didefinisikan sebagai kelas. Namun, seiring perkembangan React, penggunaan komponen fungsional semakin umum karena dukungan Hooks.
#### Contoh Functional Component:
```jsx
function Greeting() {
return <h1>Hello, React!</h1>;
}
#### Contoh Class Component:
```jsx
class Greeting extends React.Component {
render() {
return <h1>Hello, React!</h1>;
}
}
### 2. Props di React
**Props** (singkatan dari "properties") adalah cara untuk mengirim data dari satu komponen ke komponen lainnya. Props memungkinkan komponen menerima input dan menggunakannya untuk menghasilkan output yang dinamis.
Props bersifat **read-only**, artinya data yang dikirimkan melalui props tidak dapat diubah oleh komponen penerima.
#### Contoh penggunaan props:
```jsx
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Memanggil komponen dengan props
<Welcome name="Alice" />
```
Dalam contoh di atas, `props.name` berisi nilai `"Alice"`, yang kemudian ditampilkan dalam elemen `<h1>`.
### 3. State di React
**State** adalah objek yang menyimpan data atau informasi tentang komponen. Tidak seperti props, state dikelola secara internal oleh komponen dan dapat berubah seiring waktu, yang memungkinkan komponen untuk merespons input atau peristiwa (event) pengguna.
Untuk menggunakan **state** dalam **functional components**, kita menggunakan **React Hooks**, seperti `useState`.
#### Contoh penggunaan state dengan `useState`:
```jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Nilai count: {count}</p>
<button onClick={() => setCount(count + 1)}>Tambah</button>
</div>
);
}
```
Di sini, `useState` mengembalikan dua nilai:
- `count`: nilai state saat ini.
- `setCount`: fungsi untuk memperbarui state.
Setiap kali pengguna mengklik tombol, `count` akan ditingkatkan sebesar 1, dan UI akan diperbarui sesuai dengan state terbaru.
### Perbedaan Props dan State:
- **Props**: Data yang dikirimkan dari luar komponen dan bersifat tidak dapat diubah.
- **State**: Data yang dikelola secara internal oleh komponen dan bisa berubah seiring waktu.