Penjelasan tentang Framework Front-End React beserta Contohnya

React.js adalah sebuah library JavaScript open-source yang dikembangkan oleh Facebook untuk membangun antarmuka pengguna (UI) yang interaktif dan responsif. React menggunakan pendekatan berbasis komponen dan virtual DOM untuk membuat aplikasi web yang efisien dan mudah dipelihara.

Fitur Utama React.js

Komponen-Based Architecture

React memungkinkan pengembang untuk memecah UI menjadi komponen-komponen yang dapat digunakan kembali. Setiap komponen memiliki logika dan tampilan sendiri.

Contoh komponen sederhana:

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

Virtual DOM

React menggunakan Virtual DOM untuk mengoptimalkan pembaruan UI. Ini memungkinkan React untuk menghitung perubahan yang diperlukan sebelum memperbarui DOM yang sebenarnya, sehingga meningkatkan kinerja[1].

JSX

JSX adalah ekstensi sintaks JavaScript yang memungkinkan penulisan markup HTML di dalam kode JavaScript[1].

Contoh penggunaan JSX:

const element = <h1>Halo, dunia!</h1>;

berikut untuk kode lengkap yang bisa di coba 

import React from 'react';function App() { const element = <h1>Halo, dunia!</h1>; return element;}export default App;

Kita bisa mencoba compile kode tersebut di web berikut secara online nextleap.app/online-compiler/reactjs-programming

Unidirectional Data Flow

React menggunakan aliran data satu arah, yang membuat aplikasi lebih mudah diprediksi dan di-debug[3].

React Hooks

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;

https://nextleap.app/online-compiler/reactjs-programming/ibyn3avtc

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;

https://nextleap.app/online-compiler/reactjs-programming/v9b8eu29p

Dalam contoh ini, kita memiliki komponen `VideoList` yang menerima array `videos` sebagai prop. Komponen ini memungkinkan pengguna untuk mencari video dan menampilkan daftar video yang sesuai dengan pencarian. Komponen `App` adalah komponen utama yang merender `VideoList` dengan data video[6].

React telah menjadi salah satu library front-end yang sangat populer karena kemudahannya dalam membangun UI yang kompleks dan interaktif. Dengan fitur-fitur seperti komponen yang dapat digunakan kembali, Virtual DOM, dan state management yang efisien, React memungkinkan pengembang untuk membuat aplikasi web yang cepat dan responsif[9][10].

Citations:
[1] https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started
[2] https://legacy.reactjs.org/tutorial/tutorial.html
[3] https://www.javatpoint.com/react-features
[4] https://www.freecodecamp.org/news/front-end-javascript-development-react-angular-vue-compared/
[5] https://www.w3schools.com/REACT/DEFAULT.ASP
[6] https://react.dev
[7] https://www.simplilearn.com/tutorials/reactjs-tutorial/what-is-reactjs
[8] https://react.dev/learn
[9] https://www.brilworks.com/blog/introduction-to-reactjs/
[10] https://elitex.systems/blog/using-react-for-front-end-development-a-full-guide/