React JS adalah library JavaScript yang sangat populer untuk membangun antarmuka pengguna (user interface), khususnya pada aplikasi web modern. React dikembangkan oleh Facebook, dan saat ini digunakan oleh perusahaan besar seperti Instagram, Netflix, Shopee, hingga Tokopedia.

Jika kamu ingin menjadi seorang Frontend Developer modern, menguasai React adalah keharusan.

Blog ini akan membahas React dari dasar secara lengkap:

Apa itu React?
Keunggulan React
Cara instalasi dan setup
Komponen dasar
Props dan state
Event handling
Lifecycle
Router
Hooks
Sumber belajar

1. Apa Itu React?

React adalah sebuah JavaScript library untuk membangun tampilan (view) pada aplikasi web. Fokus utama React adalah pada pembuatan komponen—bagian-bagian UI yang bisa dipakai ulang (reusable).

React bukan framework (seperti Angular atau Vue), melainkan hanya library untuk UI saja. Tapi dengan ekosistemnya yang besar, React bisa dipakai untuk membangun aplikasi skala kecil hingga enterprise.

2. Mengapa Harus Belajar React?

✅ Digunakan oleh ribuan perusahaan besar
✅ Komunitas dan dokumentasi sangat luas
✅ Performa tinggi dengan virtual DOM
✅ Mudah dikombinasikan dengan teknologi lain
✅ Cocok untuk Frontend dan Fullstack (dengan Next.js)

3. Prasyarat Sebelum Belajar React

Sebelum belajar React, kamu sebaiknya sudah memahami:

HTML dan CSS dasar
JavaScript dasar (variabel, array, object, function)
ES6 JavaScript (arrow function, destructuring, spread operator)

4. Cara Install React

Ada dua cara:

a. Tanpa Install: Gunakan CodeSandbox

Langsung coding React di browser:
🔗 https://codesandbox.io/s/new

b. Menggunakan Vite (cara modern & cepat)

Langkah-langkah:

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

5. Struktur Proyek React

src/
├── App.jsx
├── main.jsx
└── components/

File utama:

App.jsx → komponen utama aplikasi
main.jsx → tempat React dipasang ke DOM

6. Membuat Komponen React

Komponen adalah fungsi yang mengembalikan elemen JSX.

function Halo() {
  return <h1>Halo dunia!</h1>;
}

Atau versi arrow function:

const Halo = () => <h1>Halo dunia!</h1>;

Menggunakan Komponen

function App() {
  return (
    <div>
      <Halo />
    </div>
  );
}

7. JSX: Sintaks HTML dalam JavaScript

JSX adalah ekstensi sintaks yang memungkinkan kita menulis HTML di dalam JavaScript.

Contoh:

const element = <h1>Halo JSX</h1>;

Ingat:

Gunakan className bukan class
Gunakan {} untuk menyisipkan variabel

const nama = "Hanif";
return <p>Halo, {nama}</p>;

8. Props: Mengirim Data ke Komponen

Props = properti / parameter untuk komponen

const Welcome = (props) => {
  return <h2>Halo, {props.nama}</h2>;
};

// penggunaan
<Welcome nama="Hanif" />

9. State: Menyimpan Data di Komponen

State menyimpan data lokal yang bisa berubah.

import { useState } from 'react';

function Counter() {
  const [angka, setAngka] = useState(0);

  return (
    <div>
      <p>Nilai: {angka}</p>
      <button onClick={() => setAngka(angka + 1)}>Tambah</button>
    </div>
  );
}

10. Event Handling

React menangani event seperti klik dengan onClick, onChange, dll.

function KlikSaya() {
  const handleClick = () => {
    alert("Tombol diklik!");
  };

  return <button onClick={handleClick}>Klik saya</button>;
}

11. Conditional Rendering

Tampilkan elemen berdasarkan kondisi:

function Selamat({ login }) {
  return (
    <div>
      {login ? <h1>Selamat datang</h1> : <h1>Silakan login dulu</h1>}
    </div>
  );
}

12. List dan Key

Menampilkan array menggunakan .map():

const list = ["React", "Vue", "Angular"];

function FrameworkList() {
  return (
    <ul>
      {list.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

13. React Router (Navigasi Halaman)

Instal:

npm install react-router-dom

Contoh penggunaan:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Link to="/">Home</Link>
      <Link to="/about">Tentang</Link>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<Tentang />} />
      </Routes>
    </BrowserRouter>
  );
}

14. Hooks: Fitur Modern React

useState – untuk menyimpan data

useEffect – menjalankan efek samping (mirip lifecycle)

useRef – referensi DOM

useContext – mengatur global state

Contoh useEffect:

import { useEffect } from "react";

useEffect(() => {
  console.log("Komponen dimuat");
}, []);

15. Mini Project: Aplikasi Hitung Angka

import { useState } from 'react';

function CounterApp() {
  const [nilai, setNilai] = useState(0);

  return (
    <div>
      <h2>Nilai: {nilai}</h2>
      <button onClick={() => setNilai(nilai + 1)}>+</button>
      <button onClick={() => setNilai(nilai - 1)}>-</button>
    </div>
  );
}

16. Tools Tambahan React (Bonus)

React Developer Tools (Chrome extension)
Vite (alat build cepat)
Tailwind CSS (untuk styling)
Next.js (framework React untuk SSR)
React Query (fetching API)

17. Sumber Belajar React Terbaik

📘 React Official Docs (terbaru & interaktif)
https://react.dev/

📘 W3Schools – React Tutorial
https://www.w3schools.com/react/

📘 FreeCodeCamp React Course (YouTube)
https://www.youtube.com/watch?v=bMknfKXIFA8

📘 MDN React Guide
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React

📘 Web Programming UNPAS – React (Bahasa Indonesia)
https://youtube.com/playlist?list=PLFIM0718LjIUv_8b5Tt_A9b7cV46L3v6N

18. Kesimpulan

React JS adalah library powerful dan fleksibel untuk membangun UI yang interaktif. Dengan memahami konsep dasar seperti komponen, props, state, event, dan hooks, kamu sudah bisa membangun aplikasi web skala kecil-menengah.

React akan membuka banyak pintu untuk kariermu, baik di frontend, fullstack, hingga mobile developer.

BELAJAR REACT