Membuat Aplikasi React.js 101

4 min readMay 24, 2021

Alasan Mengapa React JS merupakan Teknologi Terbaik untuk Aplikasi Berbasis Web — DEVHOZ

Buat para programmer terutama yang merupakan web developer pastinya pernah mendengar tentang React. Apa itu React? React adalah sebuah library JavaScript. Untuk mengetahui lebih lanjut lagi, mari kita bahas bersama-sama. Pada artikel kali ini, saya akan menjelaskan mengenai React secara ringkas serta cara membuat aplikasi React yang sederhana untuk memulai pembelajaran.

Apa itu React.js?

React adalah sebuah library JavaScript yang dibuat oleh Facebook. Library React bersifat composable user interface, yang artinya kita dapat membuat berbagai UI (user interface) yang bisa dibagi menjadi beberapa komponen. Secara singkat, React adalah tool untuk membuat komponen UI. React juga merupakan library yang banyak digunakan front-end developer untuk mengembangkan aplikasi.

Kenapa Menggunakan React.js?

Reusable — Pada React, komponen yang telah dibuat dapat digunakan berkali-kali untuk kebutuhan lain. Hal ini dapat mengurangi jumlah resource serta mempersingkat waktu pengerjaan.
Cepat dan Efisien — Karena React berbasis komponen, maka rendering akan menjadi lebih ringan karena tidak perlu render semua resource, hanya perlu render resource yang sedang digunakan saja.
Library JavaScript — React adalah library JavaScript, maka dari itu kita dapat menggunakan syntax HTML pada React dengan adanya JavaScript Extension (JSX).

Cara Membuat Aplikasi React

Setelah mengetahui apa itu React dan kenapa perlu menggunakan React, saya akan menjelaskan cara membuat aplikasi web React sederhana dengan fungsionalitas form.

Buat app React

Untuk membuat app React bisa menggunakan beberapa cara, yaitu dengan package manager npm, npx, ataupun yarn. Saya akan mencontohkan dengan menggunakan npx. Gunakan command sebagai berikut pada command prompt.

npx create-react-app [nama-app-react]

Package manager akan menginstall package-package yang dibutuhkan untuk aplikasi React. Pastikan Anda sudah menginstall package manager agar command tersebut dapat berfungsi.

Setelah selesai, akan ada folder sesuai nama app React yang dibuat. Pada contoh di atas, nama foldernya adalah ‘tutorial-react’. Isi foldernya adalah seperti gambar berikut.

Masuk ke dalam folder tersebut, lalu jalankan command sebagai berikut.

npm start

Command tersebut akan memulai aplikasi React di komputer Anda. Aplikasi tersebut dapat diakses melalui localhost komputer Anda dengan port 3000 (default port). Buka website Anda dan akses localhost:3000. Akan terlihat bahwa aplikasi sudah berjalan seperti gambar di bawah.

Membuat fungsionalitas form

Untuk membuat form pada aplikasi yang sudah kita buat, maka kita perlu mengubah file App.js. File tersebut berisi segala hal yang ingin dimunculkan dalam aplikasi.

Header dapat dihapus karena berisi tampilan default React. Setelah itu Anda dapat mengisi file sebagai gambar berikut.

Saya akan menjelaskan tiap perubahan yang saya lakukan.

Pada baris 1, saya import modul React untuk menggunakan fungsi hook useState yang akan saya jelaskan di bawah.
Pada baris 5, saya menggunakan useState untuk inisialisasi state variabel yaitu ‘nama’. Hook useState digunakan untuk menyimpan value antar pemanggilan fungsi sehingga tidak hilang. Kode setNama adalah sebuah fungsi untuk mengubah state ‘nama’. State awal dari ‘nama’ adalah string kosong, sesuai kode React.useState(""). Apabila kita mengubah kode tersebut menjadi React.useState("kucing"), maka state awal dari variabel ‘nama’ adalah ‘kucing’.
Pada baris 6–9, saya membuat fungsi untuk meng-handle submit form. Kegunaan dari event.preventDefault() adalah untuk mencegah refresh page apabila submit form. Kode alert(`Nama Anda adalah ${nama}` akan memunculkan popup dengan string ‘Nama Anda adalah [variabel nama]’.
Pada baris 12, saya membuat teks ‘Ketik Nama Anda’ sebagai teks header.
Pada baris 13–16, saya membuat wrapper form dengan input field yang menerima input user dan button untuk submit input user. Pada baris 13, kode onSubmit={handleSubmit} adalah parameter dari form yang menerima fungsi untuk dijalankan ketika submit form. Pada baris 14, onChange={(event) => setNama(event.target.value)} adalah parameter dari input field yang menerima fungsi untuk dijalankan ketika user mengisi field. Ketika user mengisi field, fungsi ‘setNama’ akan mengubah state variabel ‘nama‘ sesuai dengan input user. Pada baris 15, saya membuat button dengan tipe ‘submit’ untuk menandakan bahwa button tersebut digunakan untuk submit form dan menjalankan fungsi ‘handleSubmit’.

Tampilan aplikasinya adalah sesuai gambar berikut.