Hooks memungkinkan penggunaan state dan fitur React lainnya tanpa menulis kelas[1].
Contoh penggunaan Hook:
import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Anda telah mengklik {count} kali</p> <button onClick={() => setCount(count + 1)}> Klik saya </button> </div> );}Berikut contoh kode yang bisa di gunakan:
import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Anda telah mengklik {count} kali</p> <button onClick={() => setCount(count + 1)}> Klik saya </button> </div> );}function App() { return ( <div> <h1>Counter App</h1> <Counter /> </div> );}export default App;
Cara Kerja React
React menggunakan fitur-fitur JavaScript modern untuk banyak pola kerjanya. Berikut adalah penjelasan singkat tentang cara kerja React:
1. Komponen: React membangun UI dari komponen yang dapat digunakan kembali. Setiap komponen dapat memiliki state dan props sendiri[2].
2. Rendering: React menggunakan metode `render()` untuk menentukan bagaimana komponen harus ditampilkan di DOM[2].
3. State dan Props: State adalah data internal komponen yang dapat berubah, sementara props adalah data yang diterima dari komponen induk[2].
4. Lifecycle Methods: React menyediakan metode lifecycle yang memungkinkan Anda melakukan tindakan pada tahap-tahap tertentu dalam hidup komponen[4].
Contoh Aplikasi React
Berikut adalah contoh sederhana aplikasi React yang menampilkan daftar video:
import React, { useState } from 'react';function VideoList({ videos }) { const [searchText, setSearchText] = useState(''); const filteredVideos = videos.filter(video => video.title.toLowerCase().includes(searchText.toLowerCase()) ); return ( <div> <input type="text" placeholder="Cari video..." value={searchText} onChange={(e) => setSearchText(e.target.value)} /> <ul> {filteredVideos.map(video => ( <li key={video.id}> <h3>{video.title}</h3> <p>{video.description}</p> </li> ))} </ul> </div> );}function App() { const videos = [ { id: 1, title: 'Belajar React', description: 'Tutorial React untuk pemula' }, { id: 2, title: 'JavaScript Modern', description: 'Fitur-fitur ES6+' }, { id: 3, title: 'CSS Flexbox', description: 'Membuat layout responsif dengan Flexbox' }, ]; return ( <div> <h1>Daftar Video</h1> <VideoList videos={videos} /> </div> );}export default App;
