React adalah libaray javascript open-source, berbasis komponen, front-end paling populer di bidang pengembangan web. React dibuat untuk membangun user interface yang cepat, interaktif untuk aplikasi web dan single-page applications.
Pada awal 2013 react dikenalkan dan mengubah cara kerja framework javascript. Pada tahun itu semua developer sedang berupaya mendorong metode mereka ke MVC, MVVM dll dan kita semua happy menggunakanya. React memilih menerapkan pemisahan sistem rendering interface dari representasi model dan memperkenalkan arsitektur yang baru kedalam ekosistem developer front-end yakni Flux Javascript.
FLUX Javascript
Flux Javascript adalah sebuah pola atau arsitektur javascript untuk UI yang berjalan pada aliran data searah dan memiliki dispatch / pengiriman terpusat. Fungsinya ketika aplikasi kita memiliki data dinamis dan membutuhkan update data secara efektif.
Proses dibalik react inilah yang menjadi menarik, bagaimana bisa memprediksi apa yang akan dirender ke interface ketika sesuatu mengambil DOM dan mengupdate kapan saja dan terbukti jika node yang dirender itu benar.
Sebelum adanya react kita belum dapat menjamin ketepatan itu dalam kondisi apapun dalam dunia front-end.
Sebagai gambaran MVC dan Flux
Flux ini dikenalkan oleh facebook sebagai arsitektur dalam pengembangan framework untuk membangun aplikasi single-page. Pola ini diyakini untuk memecahkan masalah scalability pada saat membangun aplikasi berbasis MVC di sisi client. Kita tahu jika konsep MVC (Model View Controller), kelihatan lebih terkonsep dan dinamis aliran datanya, tetapi ketika pengembangan aplikasi sudah besar data ini menjadi rumit antara view dan model. Kerumitan inilah awal dari ide permasalahan dan bagaimana untuk mengatur data yang dikirimkan ke semua komponen dan hubunganya dengan komponen lain.
Pola Flux sebagai scalability problem untuk mengatasi kerumitan data tersebut. Pola yang dilakukan yaitu pola data searah dan diteruskan ke komponen interface yang berbeda di aplikasi. Pola itu dibagi menjadi store, dispatcher, view dan action/action creator. Pada saat user berinteraksi dengan interface, interface mengirimkan action melalui dispatcher ke store (pusat data aplikasi) dan hanya memperbaiki apa yang sudah ditargetkan saja dengan informasi yang diperlukan (hanya yang diperlukan saja). Konsep Flux ini bekerja dengan baik dengan library react yang sudah melakukan inovasi. Dan react sudah banyak lagi fitur-fitur yang dikembangkan untuk mendukung proses kesederhaan menjadi luarbiasa.
Install ReactJs
$npx create-recat-app my-app
$cd my-app
$npm start
Mengapa harus ReactJs
Reactjs saat ini masih popular di kalangan fron-end development web.
Create React App, memberikan atmosfir yang ramah untuk belajar React dan merupakan tempat terbaik untuk mulai mengembangkan aplikasi satu halaman baru dalam bahasa React.
Pada saat mengconfigurasi development environment untuk memungkinkan memanfaatkan capabilities javascript paling canggih serta memberikan experience developer yang baik dan optimizing proyek untuk produksi.
Alasanya adalah
— Dinamis dalam pengembangan web
— Reusable Component
— Data flow searah
— Simplicity
Fitur dari Reactjs
— JSX
— Component
— Virtual DOM
— Performace, quick
— One-way Data
— Rendering
— Debugging
Keuntungan Reactjs
— Reusable Component
— Komunitas besar dan aktif
— Membuat web dinamis menjadi lebih mudah
— Peningkatan kinerja
— Scope untuk testing
Keterbatasan Reactjs
— Perkembangan yang tinggi
— JSX menjadi keterbatasan
— Kurangnya dokumnetasi yang tepat
— Masalah dengan SEO
Artikel selanjutnya kita akan membahas tentang extention React JSX.