Home » Javascript » ReactJS: Fitur – Keuntungan dan Contoh Codenya

ReactJS: Fitur – Keuntungan dan Contoh Codenya

by syifaul fuadi
by syifaul fuadi
https://reactjs.org/

ReactJS adalah pustaka JavaScript yang digunakan untuk membuat komponen UI yang dapat digunakan kembali. Menurut dokumentasi resmi React, berikut adalah definisinya –

React adalah perpustakaan untuk membangun antarmuka pengguna yang dapat disusun. Ini mendorong pembuatan komponen UI yang dapat digunakan kembali, yang menampilkan data yang berubah seiring waktu. Banyak orang menggunakan React sebagai the V (View) di MVC (Model, View, Controll). Bereaksi memisahkan DOM dan menawarkan model pemrograman yang lebih sederhana dan kinerja yang lebih baik. React juga dapat merender di server menggunakan Node, dan dapat memberi daya pada aplikasi asli menggunakan React Native. React mengimplementasikan aliran data reaktif satu arah, yang mengurangi boilerplate dan lebih mudah dipertimbangkan daripada pengikatan data tradisional.

Fitur ReactJS

  1. JSX – JSX adalah ekstensi sintaks JavaScript. Tidak perlu menggunakan JSX dalam pengembangan React, tetapi dianjurkan.
  2. Komponen – React adalah tentang komponen. Anda perlu memikirkan semuanya sebagai sebuah komponen. Ini akan membantu Anda mempertahankan kode saat mengerjakan proyek berskala lebih besar.
  3. Aliran data searah dan Flux – React mengimplementasikan aliran data satu arah yang membuatnya mudah untuk bernalar tentang aplikasi Anda. Fluks adalah pola yang membantu menjaga data Anda tetap searah.
  4. Lisensi – React dilisensikan di bawah Facebook Inc. Dokumentasi dilisensikan di bawah CC BY 4.0.

Keuntungan Menggunakan ReactJS

  1. Menggunakan DOM virtual yang merupakan objek JavaScript. Ini akan meningkatkan kinerja aplikasi, karena DOM virtual JavaScript lebih cepat daripada DOM biasa.
  2. Dapat digunakan di sisi klien d an server serta dengan kerangka kerja lainnya.
  3. Komponen dan pola data meningkatkan keterbacaan, yang membantu mempertahankan aplikasi yang lebih besar.

Batasan React

  1. Hanya mencakup lapisan tampilan aplikasi, oleh karena itu Anda masih perlu memilih teknologi lain untuk mendapatkan set perkakas yang lengkap untuk pengembangan.
  2. Menggunakan template inline dan JSX, yang mungkin terlihat aneh bagi beberapa developer.

Mencoba React di HTML

Cara tercepat untuk mulai mempelajari React adalah dengan menulis React langsung di file HTML Anda.

Mulailah dengan memasukkan tiga skrip, dua yang pertama mari kita tulis kode React di JavaScripts kita, dan yang ketiga, Babel, memungkinkan kita untuk menulis sintaks JSX dan ES6 di browser lama.

Anda akan mempelajari lebih lanjut tentang JSX di bab React JSX.

Contoh :

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
  
<div id="mydiv"></div>

<script type="text/babel">
class Hello extends React.Component {
  render() {
    return <h1>Hello World!</h1>
  }
}

ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>

</body>
</html>

Dan untuk hasilnya adalah sebagai berikut :

Cara penggunaan React ini bisa digunakan untuk tujuan pengujian, tetapi untuk produksi Anda perlu menyiapkan lingkungan React.

You may also like