Memahami Konsep Dasar React: Mulai dari Component, JSX, Props, State, hingga Event Handling - Perwira Learning Center

1. Latar Belakang

    Halo semuanya, pada minggu pertama persiapan Lomba Kompetensi Siswa (LKS) bidang Web Technology, saya mempelajari konsep dasar ReactJS sebagai fondasi dalam pengembangan antarmuka aplikasi web. Materi yang dipelajari meliputi pengenalan React, cara kerja component sebagai penyusun tampilan, penulisan JSX, penggunaan props untuk mengirim data antar komponen, pengelolaan state sebagai penyimpan data yang dapat berubah, serta penerapan event handling untuk membuat aplikasi menjadi lebih interaktif dan responsif terhadap aksi pengguna.

    Pembelajaran ini bertujuan untuk membangun pemahaman yang kuat mengenai cara kerja React dalam mengelola tampilan dan data pada aplikasi berbasis web. Dengan memahami konsep-konsep dasar tersebut, saya diharapkan mampu mengimplementasikan ReactJS secara terstruktur dan siap mengembangkannya lebih lanjut dalam pembuatan aplikasi yang sesuai dengan standar serta kebutuhan soal LKS bidang Web Technology.

2. Alat dan Bahan

Berikut alat dan bahan yang diperlukan, yaitu :

2.1. Perangkat Lunak

- Sistem Operasi Linux Ubuntu

- Terminal

- Visual Studio Code

- NodeJS dan npm

- Vite (sebagai build tool React)

- Browser (Google Chrome atau sejenisnya)

- Koneksi Internet

    

2.2. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Pengenalan ReactJS

    React adalah sebuah library JavaScript untuk UI (User Interface) interaktif yang bersifat open-source buatan Meta (Facebook). React juga berjalan dengan bantuan NodeJS dan UI nya dibangun dari unit-unit kecil seperti tombol, teks, dan gambar. Dengan begitu, React memungkinkan untuk menggabungkan unit-unit tersebut menjadi suatu komponen yang reusable (dapat digunakan kembali), dan nestable (dapat diletakkan secara bersarang dan/atau di bawah komponen lainnya).

3.2 Component

    Component merupakan kumpulan dari markup, CSS, dan JavaScript yang digabung untuk menjadi sebuah element UI yang dapat digunakan kembali. Seiring berkembangnya suatu proyek, Component akan sering digunakan apabila terdapat banyak desain kita yang bisa dikomposisikan dengan menggunakan ulang komponen-komponen yang sudah dibuat. 

    Component juga bisa di import dan export dari file lain, namun terdapat persyaratan yang perlu kita ikuti yaitu pemberian "Default Export" dan "Named Export" pada komponen yang kita buat.

 

    Kita tidak dapat menuliskan lebih dari satu export default dalam satu file, karena default menandakan bahwa komponen tersebut adalah komponen utama yang diekspor dari file tersebut. Dalam satu file, hanya boleh ada satu komponen utama sebagai default export.

3.3 JSX (JavaScript XML atau JavaScript Syntax Extension)

    JSX adalah cara penulisan markup yang mirip seperti HTML tetapi berada di dalam kode JavaScript. Dengan JSX, kita bisa menulis struktur tampilan UI secara lebih intuitif dan dekat dengan HTML, namun sebenarnya itu bukan HTML biasa itu adalah syntax sugar yang akan diterjemahkan oleh React menjadi fungsi JavaScript murni.

    Terdapat beberapa perbedaan signifikan pada penulisan JSX. Misalnya pada tag img di HTML yang mana kita biasanya menggunakan tanda petik (""), namun pada JSX, penggunaan ini diganti dengan kurung kurawal atau {}.

3.4 Props

    Komponen React menggunakan props untuk berkomunikasi antara satu dengan yang lainnya. Setiap komponen induk bisa mengirim beberapa informasi pada komponen-komponen anaknya dengan memberikan mereka props. Props lumayan mirip dengan atribut HTML, tapi props bisa mengirim nilai JavaScript apa pun melalui itu, termasuk objek, list, bahkan function.

3.5 State

    State adalah memori internal dari suatu komponen karena ia berfungsi untuk menyimpan data yang bisa berubah-ubah. State juga dapat disebut sebagai nilai awal dari suatu kondisi. Misalnya sebagai respons dari aksi pengguna (Klik tombol: "Save History" -> klik tombol -> "Saved", Form input, dan lain lain).

    Untuk menggunakan state, kita harus import useState dari react dan taruh di paling atas file kita, yaitu dengan :

Contoh sederhana dari penggunaan state yaitu sebagai berikut.

    Pada kode diatas, nilai awal index adalah 0. Ketika state tersebut ingin diubah, maka gunakan setIndex untuk menjumlahkan nilai index dengan 1. Penggunaan set ini berlaku untuk semua state yang ingin kita ubah nilai awalnya.

3.5 Event Handling

    Event handler adalah fungsi-fungsi yang akan dipicu sebagai respons terhadap interaksi seperti mengeklik, mengarahkan kursor, memfokuskan pada input formulir, dan sebagainya.

3.6 Instalasi ReactJS

1. Install NodeJS 

Buka terminal, ketik "sudo apt install nodejs npm -y" di ~ atau home dan tunggu sampai instalasi selesai.

2. Cek versi NodeJS dengan node -v dan npm -v

3. Jalankan perintah untuk membuat proyek ReactJS

Ketik "npm create vite@latest" untuk mendapatkan versi react yang terbaru.

4. Beri nama proyek dan pilih React sebagai frameworknya

5. Pilih variasi sesuai keinginan

Disini saya pilih JavaScript sebagai pilihan saya selama belajar react.

6. Pilih "Yes" pada dua pilihan berikut

Dengan begitu, proyek react anda akan berjalan pada port yang disediakan (yaitu http://localhost:5173/) dan sudah siap untuk digunakan.

3.7 Hasil Pembelajaran

Dari pembelajan tersebut, saya mencoba untuk membuat halaman login dan register biasa.

- Hasil :

- Source code :

    

    Sekian pembahasan pada artikel kali ini. Semoga penjelasan mengenai konsep dasar React ini dapat membantu pembaca memahami alur kerja React dengan lebih baik dan menjadi bekal untuk pengembangan project selanjutnya.

4. Daftar Pustaka

React. (2025). React Documentation. Diakses dari: https://react.dev/learn

CodePolitan. (2024). Belajar React JS Pemula #1: Pengenalan Dasar ReactJS. Diakses dari: https://www.codepolitan.com/blog/belajar-react-js-pemula-1-pengenalan-dasar-reactjs/

Sanity. (2025). JSX Definition. Diakses dari: https://www.sanity.io/glossary/jsx