ReactJS adalah sebuah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) pada web. Library ini dikembangkan oleh Facebook dan bersifat open-source. ReactJS berbeda dari library JavaScript lainnya karena menggunakan pendekatan komponen (component-based approach) dalam membangun aplikasi web.
Banyak orang menyebutnya sebagai framework, namun secara teknis ReactJS bukanlah sebuah framework. Melainkan sebuah library untuk membuat UI.
Dalam ReactJS, setiap bagian dari antarmuka pengguna dipisahkan ke dalam komponen-komponen kecil yang dapat digunakan kembali (reusable). Setiap komponen memiliki logika dan tampilan (view) tersendiri, dan dapat digabungkan dengan komponen lainnya untuk membentuk sebuah antarmuka pengguna yang lengkap.
ReactJS menggunakan Virtual DOM (Document Object Model) untuk memperbarui tampilan pada aplikasi web secara efisien. Virtual DOM adalah representasi dari DOM pada memori, sehingga perubahan pada antarmuka pengguna dapat diolah lebih efisien. Ketika terjadi perubahan pada antarmuka pengguna, ReactJS akan memperbarui Virtual DOM terlebih dahulu, kemudian membandingkannya dengan DOM asli dan mengupdate bagian yang berubah saja, tanpa perlu melakukan perubahan pada seluruh tampilan aplikasi.
ReactJS memiliki performa yang baik dan bersifat scalable, sehingga cocok digunakan pada proyek-proyek besar dan kompleks. Library ini juga memiliki banyak dukungan dan dokumentasi yang lengkap, serta banyak komunitas pengembang yang aktif. Karena alasan inilah, ReactJS menjadi pilihan populer bagi banyak pengembang web saat ini.
ReactJS awalnya dibuat oleh Jordan Walke yang merupakan karyawan Facebook. Ia merilis prototipe pertama ReactJS dengan nama “FaxJS” yang terinspirasi dari XHP.
Facebook menyadari, aplikasi (web) mereka semakin kompleks, dimana ada banyak bagian yang harus terus di-update seperti news feed, chat list, chat box, dan lain-lain secara realtime. Jika menggunakan cara tradisional seperti JQuery, ini akan memakan banyak biaya dan waktu.
Karena itulah ReactJS hadir memberikan solusi, yakni dengan menggunakan Virutal DOM yang menurut mereka lebih cepat.
Reactjs kemudian mulai digunakan di Facebook untuk membuat halaman News Feed di tahun 2011 dan kemudian di instagram pada tahun 2012.
Setahun berikutnya, di tahun 2013 ReactJS dibuka untuk umum menjadi proyek open-source. Saat tulisan ini dibuat, perkembangan ReactJS sudah mencapai versi 17.0.2 .
Persiapan Awal untuk Belajar ReactJS
Ada beberapa hal yang harus kita persiapkan untuk memulai belajar ReactJS :
- Web Browser
- Teks Editor (rekomendasi VS Code)
- NodeJS dan NPM
Jika baru pertama belajar ReactJS atau belum mengenal NodeJS sebaiknya cukup siapkan Web Browser dan Teks Editor Saja.
Selain itu, pastikan juga sudah paham tentang fitur-fitur ES6, seperti class, arrow function dan variabel (let, const, var), karena kita akan banyak menggunakannya di ReactJS.
Latihan membuat Hello World di React
Selanjutnya kita buat folder baru misal bernama belajarreactjs, kemudian di dalamnya buat file baru bernama hello-react.html.
Isi file hello-react.html dengan kode berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar ReactJS</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World ReactJS!</h1>
}
}
ReactDOM.render(<Hello/>, document.getElementById("app"));
</script>
</body>
</html>
Setelah itu buka file hello-react.html dengan web browser, maka hasilnya :
Penjelasan arti kode di atas :
Pertama-tama kita membutuhkan library react di HTML, kita bisa menyisipkannya dengan cara seperti ini :
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
Library ini langsung kita ambil dari internet, jika kita tidak punya koneksi internet maka aplikasi ini tidak akan bisa dijalankan. Mita membutuhkan tiga library tersebut, jika salah satu tidak ada maka aplikasi tidak akan bisa bekerja.
Pertama kita membutuhkan library react react.js untuk membuat komponen. Kedua kita membutuhkan react-dom.js untuk me-render komponen ke dalam HTML. Terakhir kita membutuhkan babel.js kode Javascript versi ES6 dapat dikenali pada web browser. Tidak semua web browser mendukung ES6, karena itu kita membutuhkan babel.js agar aplikasi dapat berjalan di semua web browser.
Konsep Dasar ReactJS
Pada dasarnya ReacJS hanya melakukan render komponen saat ada data yang berubah. Seperti namanya “React” ia akan beraksi saat ada perubahan data (reaktif).
Komponen yang dimaksud adalah bagian-bagian dari UI, contohnya seperti tombol, label, input, dll. Komponen juga bisa dibentuk dari komponen yang lain.
Secara sederhana…
Langkah-langkah yang harus dilakukan untuk membuat aplikasi react adalah sebagai berikut:
- Menambahkan library react ke HTML;
- Membuat elemen HTML untuk wadah aplikasi;
- Membuat komponen;
- Me-render komponen ke HTML;
Setiap aplikasi react membutuhkan sebuah wadah.
Coba perhatikan kembali contoh di atas.
Kita membuat sebuah elemen div dengan id=”app”.
<div id="app"></div>
Setiap komponen yang kita buat di React akan di-render atau ditampilkan ke dalam div tersebut.
Setiap elemennya kita tidak harus dibuat dengan id=”app”, karena nanti kita akan tentukan elemennya dengan method getElementById().
Berikutnya kita membuat kode aplikasinya dengan tipe text/babel :
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World ReactJS!</h1>
}
}
ReactDOM.render(<Hello/>, document.getElementById("app"));
</script>
Pada kode tersebut, kita membuat komponen bernama Hello dari class React.Component, lalu me-rendernya ke dalam div.
Sesuatu yang aneh kita lihat di sini, kita bisa menulis HTML di dalam Javascript tanpa tanda petik. Biasanya kita menulis seperti ini :
var elemenHTML = "<h1>Hello World!</h1>";
Tetapi di React ditulis tanpa tanda kutip, ini disebut dengan JSX.
Mengenal JSX
JSX (Javascript XML) adalah extension dari Javasript. JSX membuat kita bisa menggunakan HTML di dalam Javascript. JSX sama seperti XML dan HTML, ia juga memiliki nama tag, atribut, dan elemen anak.
Sebenarnya kita bisa saja menggunakan React tanpa JSX, tapi tidak direkomendasikan karena lebih susah dibaca dan ditulis.
Contoh :
// membuat komponen React tanpa JSX
class Btn extends React.Component {
render() {
let element = React.createElement('h1', {}, 'I do not use JSX!');
return element;
}
}
// membuat komponen dengan JSX
class Btn2 extends React.Component {
render() {
let element = <h1>I Love JSX!</h1>;
return element;
}
}
// render komponen ke HTML
ReactDOM.render(<Btn/>, document.getElementById("app"));
Tanpa JSX, kita harus membuat elemen dengan method createElemen(), bandingkan dengan yang menggunakan JSX, kita hanya perlu menulis sintaks XML atau HTML-nya saja.
Dengan JSX lebih gampang dibuat, karena kita gak perlu repot-repot menghapal method-method React untuk membuat komponen.
Latihan menggunakan JSX
Buatlah file baru bernama latihan-jsx.html, kemudian isi dengan kode berikut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar ReactJS</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
// membuat elemen JSX
let message = <h2>Belajar menggunakan JSX pada React</h2>;
// render elemen ke DOM
ReactDOM.render(message, document.getElementById("app"));
</script>
</body>
</html>
Hasilnya :
Pada contoh ini, kita membuat elemen HTML dengan JSX, kemudian langsung me-rendernya tanpa harus membuat class komponen.
Latihan berikutnya, cobalah untuk membuat JSX yang memiliki anak dan atribut.
Buatlah file baru bernama latihan-jsx2.html, kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar ReactJS</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<style>
.header {
background-color: blueviolet;
color: white;
padding: 10px;
font-family: Lato, sans-serif;
}
</style>
<body>
<div id="app"></div>
<script type="text/babel">
let header = (
<header className="header">
<h1>Belajar menggunakan JSX pada React</h1>
<p>Tutorial Reactjs untuk Pemula</p>
</header>
);
ReactDOM.render(header, document.getElementById("app"));
</script>
</body>
</html>
Hasilnya :
Perhatikan kode di atas, saat kita membuat elemen JSX yang memiliki anak, kita harus mengapitnya dengan tanda kurung.
let header = (
<header className="header">
<h1>Belajar menggunakan JSX pada React</h1>
<p>Tutorial ReactJS untuk Pemula</p>
</header>
);
Kita sudah belajar langkah awal belajar ReactJS, berikutnya kita akan pelajari Struktur Direktori Project ReactJS.
Referensi :
- https://www.petanikode.com/reactjs-untuk-pemula/
Be the first to comment