Mulai Petualanganmu: Apa itu React JS dan Mengapa Kamu Harus Belajar Sekarang? (Part 1)

Rifqi An Rifqi An
•
Februari 23, 2026

Mulai Petualanganmu: Apa itu React JS dan Mengapa Kamu Harus Belajar Sekarang? (Part 1)

Pernah gak sih kamu ngelihat aplikasi web modern yang interaktif, responsif, dan rasanya "smooth" banget dipake? Kayak Facebook, Instagram, atau Netflix? Nah, ada satu teknologi ajaib di baliknya yang bikin semua itu jadi mungkin, namanya React JS! Penasaran gimana caranya bikin aplikasi secanggih itu tanpa pusing tujuh keliling? Yuk, kita bedah tuntas kenapa React JS itu penting banget dan kenapa kamu harus banget mulai belajar sekarang!

Daftar Isi

Apa Itu React JS Sebenarnya?

Gampangnya gini, React JS itu bukan bahasa pemrograman baru, apalagi framework raksasa yang bikin kening berkerut. React itu cuma sebuah JavaScript library yang dikembangin sama Facebook buat membangun user interfaces (UI) yang interaktif. Fokusnya cuma di bagian tampilan doang, jadi dia fleksibel banget buat digabungin sama library atau framework lain.

Bayangin kamu lagi bikin LEGO. Nah, React ini bantu kamu nyusun kepingan-kepingan LEGO (yang kita sebut komponen) jadi satu bangunan utuh, alias aplikasi web yang keren. Dengan React, kita bisa bikin bagian-bagian UI jadi modular, bisa dipake berulang kali, dan gampang dikelola. Nggak ada lagi tuh ceritanya ngubah satu bagian, eh bagian lain ikut rusak. Big no no!

Kenapa Kamu Harus Belajar React JS Sekarang?

Oke, mungkin kamu mikir, "Emang sepenting itu ya?" Sini, aku kasih tau beberapa alasan kenapa React ini wajib masuk daftar skill-mu:

1. Popularitas & Permintaan Pasar Tinggi

React JS itu lagi hype banget! Hampir semua startup teknologi dan perusahaan besar pake React buat aplikasi web mereka. Otomatis, ini membuka banyak banget peluang kerja buat kamu yang punya skill React. Jadi, investasi waktu belajarmu gak bakal sia-sia!

2. Efisiensi & Komponen yang Bisa Dipakai Ulang (Reusable Components)

Inilah salah satu kekuatan utama React. Kamu bisa bikin komponen UI kecil-kecil, misalnya tombol, kartu produk, atau navigasi. Nah, komponen ini bisa kamu pake berulang kali di berbagai bagian aplikasi tanpa perlu nulis kode dari awal lagi. Hemat waktu, hemat tenaga, dan yang pasti, bikin kode jadi lebih rapi dan gampang di-maintain. Anti-copas sembarangan!

3. Performa Cepat Berkat Virtual DOM

React punya teknologi keren namanya Virtual DOM. Tanpa perlu detail teknis yang bikin ngantuk, intinya React itu pinter banget dalam membandingkan perubahan di UI dan cuma meng-update bagian yang benar-benar berubah di browser. Hasilnya? Aplikasi React terasa super cepat dan responsif, bikin pengalaman user jadi lebih mulus.

4. Komunitas Besar & Dokumentasi Melimpah Ruah

Kalo kamu nyangkut ketemu bug atau error pas ngoding React, jangan panik! Komunitas React itu super besar dan aktif. Forum, Stack Overflow, YouTube, sampai grup diskusi di Telegram/Discord bertebaran di mana-mana. Dokumentasinya juga lengkap dan gampang dipahami. Jadi, kamu gak akan sendirian berjuang melawan bug!

5. Cocok Buat Pemula

Meskipun terlihat canggih, konsep dasar React itu relatif mudah dipahami. Begitu kamu ngerti konsep komponen dan JSX, kamu udah punya pondasi yang kuat buat mulai bikin aplikasi. Tentunya butuh latihan dan kesabaran, tapi percayalah, worth it banget!

Konsep Dasar React: Semua Itu Komponen!

Di React, semuanya adalah komponen. Anggap aja komponen itu seperti fungsi di JavaScript, tapi dia me-return sesuatu yang bisa React render jadi tampilan di browser. Komponen bisa berupa tombol, header, footer, card produk, atau bahkan seluruh halaman web. Fleksibel banget!

Ada dua jenis utama komponen di React: Functional Components (yang paling sering dipakai sekarang) dan Class Components (sudah mulai jarang dipakai untuk kode baru). Kita akan fokus ke Functional Components karena lebih modern dan simple.

Contoh komponen fungsional yang paling sederhana:


// src/SalamDunia.jsx - Contoh Komponen React sederhana
import React from 'react';

function SalamDunia() {
  return (
    <div>
      <h1>Halo Dunia React! Ini Komponen Pertamaku!</h1>
      <p>Asyik, mulai ngoding nih!</p>
    </div>
  );
}

export default SalamDunia;

Nah, itu yang di dalam return (...) itu namanya JSX (JavaScript XML). Ini syntax extension dari JavaScript yang bikin kita bisa nulis kode HTML langsung di dalam JavaScript. Awalnya mungkin aneh, tapi percayalah, ini bikin ngoding UI jadi jauh lebih mudah dan intuitif. Kamu gak perlu lagi pusing mikirin manipulasi DOM manual!

Persiapan Sebelum Ngoding React

Sebelum mulai petualangan ngoding React, ada beberapa alat tempur yang perlu kamu siapkan:

  • Node.js dan npm/Yarn: Ini runtime environment JavaScript yang wajib ada. npm (Node Package Manager) atau Yarn adalah package manager yang akan kita pakai buat instalasi React dan library lainnya. Download di nodejs.org.
  • Code Editor (VS Code): Editor favorit para developer sejuta umat. Download VS Code, gratis kok! Banyak ekstensi keren buat bantu ngoding React.
  • Browser Modern (Chrome, Firefox): Pastikan kamu punya browser yang up-to-date, terutama buat ngoprek Developer Tools-nya.

Pastikan Node.js dan npm sudah terinstal dengan benar. Cek di terminal:


node -v
npm -v

Kalau muncul versinya, berarti kamu sudah siap tempur!

Yuk, Ngoding React Pertama Kita!

Untuk memulai proyek React baru dengan cepat dan mudah, kita bisa pakai Create React App (CRA) atau Vite. Keduanya adalah toolchain yang sudah menyiapkan semua konfigurasi yang diperlukan. Kali ini, kita pakai Vite karena lebih cepat!

Buka terminal-mu dan jalankan perintah ini:


npm create vite@latest nama-proyek-pertama -- --template react
cd nama-proyek-pertama
npm install
npm run dev

Setelah itu, buka browser dan akses alamat yang muncul di terminal (biasanya http://localhost:5173/ atau port lain). Kamu akan melihat halaman React default. Sekarang, mari kita ubah isi file src/App.jsx (atau src/App.js) dengan kode yang lebih sederhana.

Ganti seluruh isi file src/App.jsx dengan ini:


import React from 'react';
import './App.css'; // Kalau ada css bawaan, bisa dihapus atau biarkan

function App() {
  const nama = "Developer Handal";
  const tahun = new Date().getFullYear();

  return (
    <div className="App">
      <header className="App-header">
        <h1>Selamat Datang, <em>{nama}</em>!</h1>
        <p>Ini React JS Pertama Saya! Mantap jiwa!</p>
        <button onClick={() => alert('Yeay, berhasil klik!')}>Klik Aku!</button>
        <p>&amp;copy; {tahun} Belajar React Bareng. <strong>Part 1 Selesai!</strong></p>
      </header>
    </div>
  );
}

export default App;

Simpan file-nya, dan lihat di browser! Aplikasi React kamu akan langsung meng-update secara otomatis (fitur Hot Module Replacement dari Vite/CRA). Keren kan? Kamu baru saja membuat komponen React pertamamu, menggunakan JSX, dan bahkan menyisipkan JavaScript di dalamnya!

Penutup dan Apa Selanjutnya?

Selamat! Kamu sudah menyelesaikan bagian pertama dari petualangan React JS ini. Kamu sudah tahu apa itu React, kenapa dia penting, dan bahkan sudah bikin komponen pertamamu. Ini baru permulaan, lho!

Di artikel selanjutnya (Part 2), kita akan masuk lebih dalam lagi ke konsep-konsep inti seperti State (bagaimana data di aplikasi berubah), Props (bagaimana data dikirim antar komponen), dan Hooks (fitur ajaib yang bikin functional components makin powerful). Siap-siap ngopi lagi!

Jangan lupa terus berlatih dan eksplorasi. Ingat, belajar ngoding itu kayak nge-gym, butuh konsistensi dan pantang menyerah saat ketemu bug. Semangat!

Latihan Ngoding Receh

Oke, biar makin afdol, ini ada tantangan ngoding receh buat kamu. Tapi jangan cuma di-copas ya, coba ketik sendiri dan pahami!

Skenario: Kamu adalah seorang developer yang harus membuat sebuah aplikasi sederhana untuk para jomblo (atau yang merasa jomblo) yang lagi galau malam minggu. Aplikasi ini harus menampilkan pesan penyemangat dan jumlah kopi yang sudah kamu minum karena lembur ngoding.

Tugas:

  • Buat komponen baru bernama PenyemangatJomblo di file terpisah (misal: src/PenyemangatJomblo.jsx).
  • Di dalam komponen itu, tampilkan:
    • Sebuah <h2> berisi pesan penyemangat seperti: "Malam Minggu Sendirian? Nggak Apa-apa! Kamu Tetap Keren!"
    • Sebuah <p> yang menampilkan jumlah kopi yang kamu minum hari ini. Anggap saja ada variabel jumlahKopi dan nilainya 3.
    • Tambahkan sebuah tombol dengan teks "Tambah Kopi". Untuk sementara, pas diklik cukup tampilkan alert('Tambah kopi!'). (Nanti di Part 2 kita benerin!)
  • Import dan gunakan komponen PenyemangatJomblo ini di dalam file src/App.jsx, di bawah elemen-elemen yang sudah ada.

Hint: Jangan lupa export default komponen PenyemangatJomblo dan import di App.jsx ya! Kalo ada error, coba cek lagi kurung kurawal, tanda kutip, dan tag penutupnya. Semangat!

Bagikan Artikel Ini