Ketika membangun suatu proyek website ataupun aplikasi ponsel, tentunya menggunakan bahasa pemrograman.
Ada banyak sekali bahasa pemrograman yang digunakan sesuai dengan kebutuhan masing-masing.
Salah satunya React JS, perlu diketahui React JS sendiri merupakan bagian dari perpustakaan Javascript dengan sistem open source.
Apa Itu React JS
ReactJS dapat diartikan sebagai perpustakaan yang dibuat oleh Facebook pada tahun 2013 silam.
Open source ini umumnya digunakan untuk mendesain user interface (UI) pada web ataupun mobile.
Penggunaan ReactJS ini hanya membutuhkan beberapa software saja dan tidak membutuhkan banyak RAM ataupun memori internal.
Belajar React
-
Tahap Persiapan
Tahap persiapan belajar ReactJS tidak lain adalah mempersiapkan hal-hal yang dibutuhkan ketika belajar.
Disini Anda perlu mempersiapkan web browser, namun pastikan menggunakan versi terbaru. Anda juga membutuhkan teks editor, bisa menggunakan Visual Studio Code gratis dan mudah digunakan.
Apabila laptop atau PC masih minim untuk di install program baru, Anda bisa memanfaatkan online playground untuk belajar.
Beberapa yang disarankan diantaranya adalah Glitch, CodePen dan Codesanbox. Sebelum ke tahap selanjutnya, pastikan Anda mengetahui fitur ES6 seperti variabel, arrow function, class dan sebagainya para ReactJS.
-
Berkenalan Dengan JSX
JSX atau Javascript XML merupakan ekstensi dari pemrograman Javascript. Dengan JSX ini Anda bisa menggunakan HTML di Javascript.
Pada dasarnya Anda bisa menggunakan ReactJS tanpa JSX, namun akan menyulitkan di bagian pembuatan komponen.
Berikut contohnya :
Tanpa JSX
class Btn extends React.Component {
render() {
let element = React.createElement(‘h1’, {}, ‘I do not use JSX!’);
return element;
Menggunakan JSX
class Btn2 extends React.Component {
render() {
let element = <h1>Hello World!</h1>;
return element;
Dari kedua contoh di atas, bisa disimpulkan bahwa tanpa menggunakan JSX akan membuat tulisan coding menjadi lebih panjang dan kurang praktis.
Bandingkan ketika Anda menggunakan JSX, tulisan menjadi lebih singkat dan lebih mudah penggunaannya.
Penggunaan JSX akan memudahkan Anda untuk membuat komponen dan tidak perlu menghafal metode React.
Baca juga : Belajar Dasar-Dasar Pemrograman Web
-
Membuat Contoh Hello React!
Setelah mengetahui JSX, Anda bisa mencobanya membuat file HTML baru di Visual Studio Code atau menggunakan notepad biasa.
Nanti ketika HTML ini dibuka, maka akan menampilkan sesuai dengan perintah yang ada di teks tersebut. Berikut langkah-langkahnya :
- Buatlah folder baru terlebih dahulu, bebas mau dimana saja dan beri nama Latihan React atau sesuai keinginan masing-masing.
- Di dalam folder tadi, buatlah file baru dengan nama hello-world.html.
- Copy code berikut ini dan paste ke file hello-world.html tadi :
<!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>
- Simpan file tersebut dan sekarang buka menggunakan browser. Selamat! Anda sudah bisa membuat react pertama.
Di dalam source code tadi terdapat library yang digunakan untuk menjalankan React JS.
Agar source code tadi dapat berjalan, Anda membutuhkan koneksi internet karena source tadi akan terhubung dengan server. Berikut fungsi masing-masing komponen kode utama pada contoh di atas :
- React.js – Library utama yang digunakan untuk membuat komponen.
- Babel.js – Salah satu kode Javascript yang ditemukan pada versi terbarunya, yaitu ES6 yang berfungsi agar source code dikenali oleh sistem browser.
- React-dom.js – DOM digunakan untuk melakukan render komponen React menjadi HTML agar bisa dibuka di browser.
-
Konsep Dasar
Pada dasarnya kinerja React JS adalah melakukan render terhadap komponen yang telah dibuat.
Ini sesuai dengan namanya “React” dapat diartikan sebagai merubah data secara reaktif.
Komponen yang dimaksud disini termasuk label, tombol dan sebagainya. Dalam pembuatan React, berikut langkah-langkah pembuatannya :
- Menyisipkan perpustakaan react ke dalam HTML.
- Membuat elemen HTML sebagai tempat pembuatan aplikasi.
- Membuat komponen yang diperlukan dalam aplikasi.
- Melakukan render komponen tadi ke dalam HTML.
Perlu diketahui bahwa setiap aplikasi React yang dibuat akan membutuhkan sebuah wadah atau tempat.
Dari contoh source code di poin nomor tiga tadi terdapat elemen div id=”app” tertulis menjadi <div id=”app”></div>. Elemen div tadi juga bisa diganti menggunakan kode getElementById().
- Latihan Membuat Proyek Dengan create-react-app
Pada tahap kali ini Anda akan belajar sekaligus latihan untuk membuat proyek dengan menggunakan create-react-app.
Ini merupakan salah satu program yang seringkali digunakan dalam proyek aplikasi React. Di dalam program ini terdapat banyak hal penting seperti file index.html, index.js dan lain sebagainya. Berikut langkah-langkahnya :
- Lakukan penginstalan terlebih dahulu, caranya adalah dengan mengetikkan perintah “[sudo] npm install –g create-react-app”.
- Tunggu beberapa saat sampai proses penginstalan otomatis selesai.
- Jika penginstallan selesai, tuliskan “create-react-app project-name”. Pada project-name, bisa diganti sesuai dengan keinginan masing-masing. Contohnya bisa menjadi seperti ini “create-react-app hello-world-react”.
- Sistem akan membaca perintah tersebut dan melakukan install package sampai yarn telah terinstall.
- Jika sistem proyek tadi sudah selesai, di folder yang sudah dibuat di awal tadi akan muncul folder baru sesuai dengan nama proyek tadi. Contohnya tadi bernama “hello-world-react”.
- Sekarang keluar dari aplikasi dan cari folder tadi.
- Bukalah folder baru yang dibuat barusan menggunakan Virtual Studio Code. Caranya tinggal klik kanan folder, kemudian pilih Open With dan pilih opsi Visual Studio Code. Anda juga bisa membukanya melalui VSCode, yaitu melalui menu File, Open Folder dan cari directory folder Anda.
Nah bagaimana apakah Anda mengalami kesulitan dalam membuatnya. Jika ada kendala silahkan tuliskan pada kolom komentar dibawah.
Jika Anda membutuhkan layanan hosting murah untuk proyek website, silahkan langsung pesan di Qwords.com saja, karena Qwords sudah berpengalaman dalam melayani customer hosting dan domain di Indonesia selama puluhan tahun.
Terima kasih
