Pengenalan ReactJS

Framework JavaScript yang paling banyak digunakan lain adalah React Js. Framework ini memberikan banyak kemudahan bagi programmer ketika akan melakukan pengembangan berbagai website maupun aplikasi. Framework ini juga memiliki ukuran yang ringan dan mudah digunakan. Framework ini juga bisa mengembangkan website maupun aplikasi untuk lintas platform.

Framework ini dibuat oleh salah satu developer facebook. Awalnya framework ini hanya digunakan untuk membuat UI dan logika nya saja. Hingga kini sudah sangat banyak aplikasi terutama yang memiliki basis web di mana UI nya dibuat menggunakan framework ini.

Beberapa keunggulan dari framework react Js jika dibandingkan dengan framework JavaScript lainnya :

1. Dalam penggunaanya, framework ini dinilai lebih cepat dan efisien
2. React.Js memiliki fitur dimana kita bisa menggunakan kembali komponen yang telah kita buat sebelumnya untuk proses yang lain. Hal ini bisa mempersingkat waktu kerja dan juga resource yang digunakan
3. Framework ini mudah dipelajari dan juga dikuasai

Sementara itu ada beberapa hal yang harus Anda ketahui tentang framework ini, diantaranya adalah :

1. React Js bisa membuat UI yang bersifat interaktif yang bisa dibuat dengan menggunakan desain yang simple. Selain itu, framework ini juga bisa diandalkan untuk membuat UI yang kompleks
2. Di react Js jika Anda sebagai developer ingin membuat fitur baru Anda bisa menggunakan source code dari fitur lama.
3. React Js bekerja dengan menggunakan Node.Js sebagai basisnya
4. Ada fitur bernama JSX di framework ini. JSX merupakan ekstension dari JavaScript yang akan digunakan ketika menulis HTML di dalam JavaScript
5. React Js juga sering digunakan untuk membangun aplikasi dengan skala besar yang membutuhkan update setiap waktu.

Meskipun demikian, framework ini juga memiliki beberapa kelemahan, diantaranya adalah :

1. Framework ini hanya mendukung view layer. Kebutuhan lain seperti data layer, struktur, ataupun router harus kita buat sendiri.
2. Framework ini tidak bisa dijalankan jika menggunakan web browser versi lama.

Untuk Anda yang tertarik menggunakan framework React Js, Anda bisa mengunjungi situs resminya di https://reactjs.org/ . Pastikan Anda sudah terlebih dahulu memiliki Node.Js

Pendalaman Mengenai ReactJS

1. Library front-end yang dikembangkan oleh Facebook dan di-release ke publik pada Juli 2013
2. Bersifat open source
3. Merupakan library JavaScript yang populer dan digunakan oleh perusahaan besar seperti Facebook, Dropbox, Tesla, Airbnb, dan Netflix
4. Diperlukan pengetahuan lain seperti JavaScript, HTML5, dan CSS

Konsep Dasar

Fitur ReactJS

1. Menggunakan JSX > JavaScript syntax extension
2. Single page applications > React digunakan untuk membuat aplikasi yang hanya memerlukan 1 halaman dasar
3. Reusable Components > Komponen yang dapat digunakan secara berulang
4. Unidirectional data flow > React mengimplementasikan alur data yang berjalan satu arah

Kelebihan ReactJS

1. Menggunakan virtual DOM yaitu objek JavaScript yang dapat meningkatkan performa aplikasi
2. Dapat digunakan pada sisi client dan server dengan performa sebaik framework lain
3. Komponen dan pola dari data yang digunakan di React dapat memudahkan dalam pengembangan aplikasi berskala besar

Batasan ReactJS

1. React hanya mencakup sisi tampilan (front-end) aplikasi
2. Penggunaan template inline dan JSX mungkin terlihat asing bagi beberapa developer

Contoh

Langkah termudah dalam mempelajari ReactJS adalah dengan menggunakan React secara langsung di dalam file HTML.

Langkah-Langkah:

1. Buka code editor, seperti Visual Studio Code
2. Buat file HTML baru
3. Tuliskan kode HTML seperti pada snipcode (pada halaman selanjutnya)
4. Simpan
5. Buka file HTML dengan browser
6. Kreasikan kode sesuai keinginan
7. Snipcode – file HTML praktikum
8. Output yang diharapkan 

Integrasi React dengan HTML

Pada Latihan sebelumnya, terdapat kode untuk meng-import 3 external script.

Dua script pertama digunakan agar kita dapat menggunakan ReactJS di dalam kode JavaScript.

Sedangkan script ketiga merupakan script Babel yang digunakan agar kita diizinkan menuliskan syntax JSX dan ES6 di versi browser yang lebih lama.

Penjelasan Contoh

Tag div dengan id “root” merupakan elemen dasar yang disebut “root” DOM karena apapun yang berada di dalam elemen ini akan diatur oleh React DOM.

Saat menggunakan React secara langsung di HTML, kita dapat memanfaatkan Babel agar dapat menuliskan kode React di dalam script seperti code snip berikut.

Pada line 12-16, terdapat class bernama “Hello” yang akan mengembalikan elemen HTML dengan tulisan “Hello World!”. Pada React, class ini disebut dengan Component.

Sedangkan pada line 17, kita memerintahkan ReactDOM untuk melakukan rendering komponen “Hello” pada elemen “root”.

React sebagai Aplikasi Baru

Selain dengan menggunakan React secara langsung di dalam file HTML, pengembangan ReactJS dapat dilakukan dengan framework create-react-app

Langkah-Langkah:

1. Lakukan instalasi Node >= 8.10 dan npm >= 5.6. sumber: https://nodejs.org/en/download/
2. Buka command prompt atau terminal di Visual Studio Code
3. Lakukan instalasi create-react-app
4. Buat aplikasi ReactJS dengan create-react-app 
5. Pindah ke direktori aplikasi
6. Run aplikasi yang telah kita buat dengan create-react-app
7. Setelah aplikasi berhasil berjalan, maka browser akan muncul otomatis dengan tampilan seperti gambar berikut

Kesimpulan

ReactJS merupakan library JS yang dapat digunakan untuk pengembangan aplikasi front-end berskala besar dengan performa yang baik.

Sumber Referensi : reactjs.org | create-react-app.dev | tutorialspoint | w3schools