Halo teman-teman, selamat datang kembali di course React JS bersama Nusantech Academy 🙂
Pada Modul sebelumnya di chapter terakhir telah dijelaskan tools apa saja yang diperlukan untuk membuat aplikasi web dengan React JS. Bagaimana teman-teman? Apakah tools yang dibutuhkan sudah disiapkan? Jika belum, segera disiapkan ya agar teman-teman bisa segera membuat aplikasi web dengan React JS.
Pada chapter ini akan diperkenalkan kepada teman-teman apa itu React JS. Pasti teman-teman disini sudah penasaran kan apa itu React JS. Yukss simak terus chapter ini, jangan lupa like and comment.
Apa itu React JS?
React JS merupakan library Javascript yang digunakan untuk membangun sebuah aplikasi berbasis web. Banyak keunggulan dan kemudahan yang ditawarkan React JS dalam membangun sebuah aplikasi web. Salah satu di antaranya yaitu Virtual DOM.
Konsep React JS
Pada umumnya, jika kita ingin melakukan perubahan pada halaman sebuah web, maka yang kita lakukan adalah memanipulasi DOM halaman tersebut secara langsung. Materi terkait DOM dapat dilihat di Course Javascript Modul … chapter ….. Dengan adanya Virtual DOM, segala perubahan akan dikerjakan di dalam Virtual DOM dan disimpan ke dalam memori kemudian React akan menyeleksi perubahan yang sekiranya perlu untuk dilakukan. Setelah perubahan selesai dilakukan, React akan menulis perubahan tersebut ke dalam DOM asli.
“React only changes what needs to be changed!“
Berikut merupakan potongan kode yang menjelaskan cara kerja React.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<h1>Hello, Nusantech Academy</h1>,
document.getElementById('root')
);
serviceWorker.unregister();Perintah ReactDOM.render() melakukan render suatu elemen kemudian menyisipkan ke dalam elemen HTML di DOM asli dengan id=’root’. Teman-teman pasti bertanya-tanya kenapa ada elemen mirip HTML di dalam sebuah file Javascript?
<h1>Hello, Nusantech Academy</h1>Elemen di atas dinamakan JSX. JSX memungkinkan kita untuk menulis tag-tag HTML di dalam file Javascript. Penulisan React menggunakan JSX bersifat optional, artinya kita bisa membuat elemen React tanpa menggunakan JSX. Berikut contoh penulisan elemen React tanpa menggunakan JSX.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
React.createElement('h1', null, 'Hello, Nusantech Academy'),
document.getElementById('root')
);
serviceWorker.unregister();Terkait dengan JSX akan dijelaskan lebih detail di chapter selanjutnya.
Keunggulan lain React JS
Beberapa keunggulan lain dari React JS di antaranya,
- Reusable
React JS memungkinkan kita untuk menggunakan kembali komponen yang sudah kita buat di aplikasi lain pada aplikasi baru dengan penerapan dan fungsi yang sama. Hal ini tentu akan menghemat waktu dan tenaga, ditambah kepastian bahwa fungsi tersebut dapat berjalan dengan baik. Hal ini juga mengakibatkan kecepatan pengerjaan proyek meningkat.
- Developer Tools
Teknologi yang baru akan lebih sempurna jika dapat digunakan pada tahap pengembangan atau development. Dalam hal ini, teknologi tersebut dapat digunakan untuk merancang dan melakukan debugging pada aplikasi yang kita kembangkan. React JS hadir dengan React Developer Tools, yaitu sebuah extensi yang tersedia untuk browser Chrome dan Mozilla Firefox. Alat ini memungkinkan kita untuk memeriksa hierarki komponen React di Virtual DOM. Kita dapat memilih komponen individual dan memeriksa serta mengedit properti dan statusnya saat ini. Kita juga dapat melacak hierarki komponen dan menemukan komponen parents/childs.
- SEO Friendly
Keunggulan lain dari React js adalah kemampuannya untuk menangani kegagalan mesin pencari seperti google dalam hal membaca aplikasi berat yang dibangun dengan Javascript. Sebagai solusi, React JS dapat berjalan di server, merender, dan mengembalikan DOM virtual ke browser sebagai laman web biasa. Dengan React JS, Interface pada desain anda bisa diakses di berbagai mesin pencari lainnya seperti Bing, Yahoo, dan Baidu.
Penutup
React JS merupakan library untuk membangun website dengan cara yang lebih mudah dan efisien. React memperkenalkan konsep Virtual DOM dengan tujuan untuk meningkatkan efisiensi pada saat rendering suatu halaman web. Selain itu, React juga memperkenalkan JSX yang memungkinkan kita untuk menulis tag HTML di dalam file Javascript.
Sekian teman-teman tentang perkenalan React JS. Kami harap setelah membaca chapter ini teman-teman semakin tertarik untuk belajar React JS. Tetap semangat dan sampai jumpa di chapter selanjutnya ya 🙂 See you!
Quiz
Untuk mengasah kemampuan teman-teman terkait React JS, kami punya quiz untuk teman-teman. Quiz dapat dikerjakan disini: https://bit.ly/quizreact2-1.
