Panduan Lengkap React JS untuk Pemula

November 22, 2021

React merupakan library Javascript terpopuler untuk membuat user interface (UI). Tool ini menawarkan respons cepat untuk user input dengan menggunakan metode baru dalam proses rendering website. Nah, komponen dari tool ini dikembangkan oleh Facebook. Dulunya tool ini diluncurkan sebagai tool open-source JavaScript di tahun 2013. Ingin tahu lebih detail terkait React JS? Okay, selesaikan rasa penasaran kalian di artikel Panduan Lengkap React JS untuk Pemula

Apa Itu React JS?

React JS adalah library JavaScript yang biasa digunakan saat membangun UI suatu website atau aplikasi web.

React JS bisa dianggap seperti perpustakaan yang berisi berbagai kode JavaScript yang sudah tertulis (pre-written). Jadi, kalian tinggal mengambil kode yang ingin digunakan sehingga membuat proses coding menjadi lebih efisien.

Nah, JavaScript sendiri adalah bahasa pemrograman yang dapat membantu kalian membuat konten web yang dinamis, seperti form, slideshow, atau konten interaktif lainnya.

Kalian dapat membuat tampilan website yang lebih menarik dengan JavaScript. Inilah alasan mengapa library ini bermanfaat untuk membangun UI karena pengaplikasian kode JavaScript di website bisa menjadi lebih mudah.

Library ini bersifat open source, lho. Artinya, isinya akan terus berkembang karena semua orang bebas memodifikasi kode di dalamnya.

Alasan Menggunakan React

React telah digunakan oleh ratusan perusahaan besar di dunia, seperti Netflix, Airbnb,, Facebook, WhatsApp, eBay, dan Instagram. Inilah beberapa alasan mengapa harus menggunakan React:

Mudah Digunakan

React adalah GUI library JavaScript open-source yang berfokus pada hal-hal spesifik, menyelesaikan task UI secara efisien. Hal ini dapat dikategorikan sebagai V pada pattern MVC (Model-View-Controller).

Sebagai developer JavaScript, kalian akan memahami dasar-dasar React dengan mudah bahkan mengembangkan aplikasi berbasis web dengan tool ini hanya dalam beberapa hari.

Mendukung Reusable Component pada Java

React memungkinkan kalian untuk menggunakan kembali komponen yang telah dikembangkan menjadi aplikasi lain yang memiliki kesamaan fungsi. Fitur yang memungkinkan komponen untuk digunakan kembali merupakan manfaat yang menonjol untuk para developer.

Penulisan Komponen Lebih Mudah

Komponen React lebih mudah untuk ditulis karena menggunakan JSX. Ekstensi syntax opsional untuk JavaScript yang memungkinkan kalian untuk mengkombinasikan HTML dengan JavaScript.

JSX adalah gabungan antara JavaScript dengan HTML. Ekstensi ini menjabarkan seluruh proses penulisan struktur website. Ekstensi ini juga memudahkan proses render beberapa fungsi.

Meski JSX bukan ekstensi syntax terpopuler tapi terbukti bahwa ekstensi ini lebih efisien dalam mengembangkan komponen khusus atau aplikasi high-volume.

Performa Lebih Baik dengan DOM Virtual

React secara efisien dapat mengupdate proses DOM (Document Object Model). Sebagaimana yang kalian tahu, proses ini dapat membuat frustasi dalam mengembangkan aplikasi berbasis web. Untungnya, React menggunakan DOM virtual sehingga dapat menghindari masalah ini.

Tool ini memungkinkan untuk membuat DOM virtual dan menempatkannya di memiru. Hasilnya, tiap kali ada perubahan pada DOM yang asli maka DOM virtual akan segera terganti. Sistem ini akan mencegah DOM yang asli untuk melakukan force update secara terus menerus.

SEO Friendly

React memungkinkan kalian untuk membuat user interface yang dapat diakses dari berbagai mesin pencari. Fitur ini merupakan manfaat yang sangat besar karena tidak semua framework JavaScript SEO friendly.

Saat React mempercepat proses aplikasi, tool ini juga dapat meningkatkan SEO result. Intinya, kecepatan website kalian berpengaruh besar pada optimasi SEO.

Oia, kalian mesti ingat ya bahwa React hanyalah library JavaScript. Artinya, tool ini tidak dapat mengerjakan semuanya sendiri. Library tambahan mungkin diperlukan untuk pengelolaan state, routing, dan keperluan interaksi.

Cara Menginstall React JS

Caranya cukup sederhana, kok. Silakan ikuti langkah-langkah di bawah ini:

Download installer node.js lalu install sampai selesai.
Buatlah folder baru untuk install react. Contohnya di D:\React-JS

Buka command prompt (CMD), lalu ketikkan: npm -v
Selanjutnya masuk ke folder instalasi react yang baru kalian buat. Ketik:

cd React-JS (kalian bisa mengganti “React-JS” dengan nama folder yang kalian buat)

Ketik kode di bawah untuk menginstall react:

npm install -g create-react-app

Untuk mengecek kesuksesan proses instalasinya, kalian bisa cek versi reactnya dengan mengetik:

create-react-app –version

Nah, sekarang kalian tinggal membuat project react JS yang pertama. Untuk melakukannya, ketikkan kode berikut berturut-turut:

create-react-app web-react-saya (kalian bisa mengganti “web-react-saya” dengan nama project yang lain)

cd web-react-saya

npm start

Setelah proses pembuatan projectnya selesai, akan ada halaman web dengan alamat localhost:3000 yang terbuka secara otomatis.
Apakah ada pesan error yang muncul? Kalem, kalian tinggal ketikkan kode berikut di CMD:

npm install

npm start

Cara Kerja React

Membuat representatif DOM node dapat dilakukan melalui membuat fungsi Element pada React. Berikut adalah contohnya:

React.createElement(“div”, { className: “red” }, “Children Text”);

React.createElement(MyCounter, { count: 3 + 5 });

Sebagaimana yang terlihat, syntax pada kode HTML di atas sangat mirip dengan komponen XML. Namun, alih-alih menggunakan DOM class konvensional, React menggunakan className.

Tag JSX memiliki nama, children, dan atribute. Tanda petik pada atribut JSX merepresentasikan string. Elemen ini mirip dengan JavaScript. Di tambah lagi, value numerik dan expression harus ditulis di dalam tanda kurung {}.

Contoh di atas benar-benar mengilustrasikan syntax pada React karena tool ini menggunakan ekstensi JSX. Pada dasarnya, ekstensi ini merupakan kombinasi dari HTML dan JavaScript.

Berikut ini merupakan contoh React yang ditulis menggunakan JSX:

<div className=”red”>Children Text</div>;

<MyCounter count={3 + 5} />;

var GameScores = {player1: 2,player2: 5};

<h1>Scores</h1><Scoreboard className=”results” scores={GameScores} />

</DashboardUnit>;

Untuk menjelaskan secara rinci, berikut adalah catatan mengenai tag HTML di atas:

<MyCounter> merepresentasikan quirk yang bernama “count” yang mana menunjukkan ekspresi numerik sebagai valuenya.
GameScores merupakan obyek literal yang memiliki dua pasang prop-value.
<DashboardUnit> merupakan block dari XML yang dirender pada halaman.
scores={GameScores}: atribut skor yang mendapatkan value dari objek GameScores yang telah dijelaskan sebelumnya.

Sebagian besar dari React ditulis dengan JSX (JavaScript XML) daripada ditulis dengan JavaScript standar (JS). kalian harus ingat nih bahwa tujuan utama hal ini adalah agar komponen React dapat lebih mudah dibuat.

Kalian bisa saja membuat komponen React dengan JavaScript standar namun nantinya pekerjaan kalian menjadi rumit.

Terlebih lagi, ide dari menggunakan JSX untuk React adalah Facebook (sebagai developer awal) ingin menyediakan tipe ekstensi syntax tertentu dengan konfigurasi yang jelas dan tidak ambigu untuk developer.

Okay, sudah selesai! Apa yang kami sampaikan bisa menjadi modal kalian untuk belajar lebih dalam terkait cara membangun UI website atau web aplikasi yang menarik.

Hosting murah bisa didapatkan di Jetorbit tanpa mengurangi kualitas. Jetorbit selalu mengedepankan rasa puas klien dan tercapainya tujuan serta kesuksesan dari website yang ada di dalam Jetorbit. Berbagai macam pilihan web hosting berkualitas bisa kalian coba. Selain itu, kami juga menyediakan VPS yang bisa di cek di sini.

Selamat mencoba!