Cara Membuat Website dengan React.js: Panduan Pemula Lengkap 2026

Pendahuluan: Mengapa Belajar Cara Membuat Website dengan React?

Cara membuat website dengan React adalah salah satu keterampilan paling berharga yang bisa Anda kuasai di era digital ini. React.js - yang dikembangkan oleh Meta (Facebook) - adalah library JavaScript paling populer di dunia untuk membangun antarmuka pengguna (UI). Menurut survei Stack Overflow 2024, React menempati posisi pertama sebagai framework/library web yang paling banyak digunakan oleh developer profesional secara global.

Tapi apa sebenarnya yang membuat React begitu istimewa? React memungkinkan Anda membangun website yang dinamis, interaktif, dan mudah di-maintain melalui pendekatan component-based - memecah UI menjadi bagian-bagian kecil yang dapat digunakan ulang (reusable). Hasilnya adalah website yang lebih cepat, kode yang lebih terstruktur, dan pengalaman pengembangan yang lebih menyenangkan.

Dalam panduan lengkap ini, Anda akan belajar cara membuat website dengan React dari nol: mulai dari instalasi environment, memahami konsep dasar komponen dan props, mengelola state, routing antar halaman, hingga men-deploy website React ke hosting. Mari mulai!

Prasyarat Sebelum Belajar React

Sebelum masuk ke React, pastikan Anda sudah memahami beberapa hal dasar berikut. Jika Anda masih benar-benar baru di dunia pemrograman web, mulailah dengan panduan belajar web development kami atau cek rekomendasi bahasa pemrograman untuk web:

• HTML dasar - struktur elemen, tag semantik, form, dan atribut
• CSS dasar - selector, box model, flexbox, dan responsiveness
• JavaScript ES6+ - arrow function, destructuring, spread operator, array methods (map, filter, reduce), async/await, dan module import/export

Jika Anda belum familiar dengan JavaScript modern (ES6+), luangkan waktu 2-4 minggu untuk mempelajarinya terlebih dahulu. Fondasi yang kuat akan membuat belajar React jauh lebih mudah dan menyenangkan.

Langkah 1: Menyiapkan Environment Development

Untuk membuat website dengan React, Anda memerlukan beberapa tools berikut:

Install Node.js dan npm

React memerlukan Node.js sebagai runtime environment. Kunjungi nodejs.org dan unduh versi LTS (Long Term Support) terbaru. Node.js sudah menyertakan npm (Node Package Manager) secara otomatis.

Verifikasi instalasi dengan perintah berikut di terminal:

node --version
npm --version

Install Code Editor

Visual Studio Code (VS Code) adalah pilihan terbaik untuk mengembangkan aplikasi React. Install beberapa extension yang sangat membantu:

• ES7+ React/Redux/React-Native snippets - shortcut kode React
• Prettier - Code formatter - format kode otomatis
• ESLint - deteksi error dan code style
• Auto Rename Tag - ubah tag pembuka dan penutup secara bersamaan
• Tailwind CSS IntelliSense - jika menggunakan Tailwind

Langkah 2: Membuat Proyek React Baru

Ada dua cara utama untuk membuat proyek React baru di tahun 2026:

Opsi A: Vite (Direkomendasikan)

Vite adalah build tool modern yang jauh lebih cepat dari Create React App. Ini adalah pilihan yang direkomendasikan untuk proyek baru:

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

Gunakan template react-ts jika ingin menggunakan TypeScript (sangat direkomendasikan), atau react untuk JavaScript biasa.

Opsi B: Create React App (CRA)

CRA adalah cara tradisional yang lebih lambat tetapi masih banyak digunakan dalam tutorial lama:

npx create-react-app nama-proyek-anda
cd nama-proyek-anda
npm start

Struktur Folder Proyek Vite + React

nama-proyek-anda/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── components/       ← folder untuk komponen reusable
│   ├── pages/            ← folder untuk halaman
│   ├── App.tsx           ← komponen root
│   ├── main.tsx          ← entry point
│   └── index.css
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Langkah 3: Memahami Komponen React

Komponen (Component) adalah blok bangunan utama dari setiap aplikasi React. Setiap bagian dari UI - header, tombol, kartu produk, form - adalah sebuah komponen.

Membuat Komponen Pertama

Buat file src/components/Greeting.tsx:

// src/components/Greeting.tsx
interface GreetingProps {
  name: string;
  role?: string;
}

export default function Greeting({ name, role = "Pengguna" }: GreetingProps) {
  return (
    <div className="greeting">
      <h1>Halo, {name}!</h1>
      <p>Selamat datang sebagai {role}.</p>
    </div>
  );
}

Gunakan komponen ini di App.tsx:

// src/App.tsx
import Greeting from "./components/Greeting";

export default function App() {
  return (
    <main>
      <Greeting name="Budi" role="Developer" />
      <Greeting name="Siti" />
    </main>
  );
}

JSX: HTML di Dalam JavaScript

JSX (JavaScript XML) adalah sintaks yang memungkinkan Anda menulis markup mirip HTML di dalam JavaScript. Beberapa perbedaan penting JSX vs HTML:

• Gunakan className bukan class
• Gunakan htmlFor bukan for pada label
• Setiap elemen harus memiliki tag penutup (termasuk <img />, <br />)
• Ekspresi JavaScript ditulis dalam kurung kurawal: {nama_variabel}
• Komponen harus mengembalikan satu elemen root (atau gunakan Fragment <>...</>)

Langkah 4: State dan Event Handling

State adalah data yang dimiliki sebuah komponen dan dapat berubah seiring waktu. Ketika state berubah, React secara otomatis me-render ulang komponen tersebut.

Hook useState

Contoh membuat counter sederhana:

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Jumlah klik: <strong>{count}</strong></p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
      <button onClick={() => setCount(count - 1)}>Kurangi</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

Mengelola Form dengan State

import { useState } from "react";

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Login dengan:", email, password);
    // kirim ke API
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Masuk</button>
    </form>
  );
}

Langkah 5: Rendering List dan Kondisional

Menampilkan List Data

Gunakan metode .map() untuk merender array data menjadi daftar elemen:

const produk = [
  { id: 1, nama: "Web Hosting", harga: "Rp 15.000/bln" },
  { id: 2, nama: "VPS Hosting", harga: "Rp 75.000/bln" },
  { id: 3, nama: "Cloud Hosting", harga: "Rp 50.000/bln" },
];

export default function DaftarProduk() {
  return (
    <ul>
      {produk.map((item) => (
        <li key={item.id}>
          <strong>{item.nama}</strong> - {item.harga}
        </li>
      ))}
    </ul>
  );
}

Perhatikan atribut key yang wajib ada pada setiap elemen dalam list. React menggunakan key untuk mengidentifikasi elemen mana yang berubah.

Rendering Kondisional

interface StatusProps {
  isLoggedIn: boolean;
  username?: string;
}

export default function Status({ isLoggedIn, username }: StatusProps) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Selamat datang, {username}! <button>Logout</button></p>
      ) : (
        <p>Silakan <a href="/login">login</a> untuk melanjutkan.</p>
      )}
    </div>
  );
}

Langkah 6: Mengambil Data dari API (useEffect)

Hook useEffect digunakan untuk side effects - termasuk fetching data dari API setelah komponen dimuat.

import { useState, useEffect } from "react";

interface Post {
  id: number;
  title: string;
  body: string;
}

export default function BlogPosts() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts?_limit=5")
      .then((res) => res.json())
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch(() => {
        setError("Gagal memuat data.");
        setLoading(false);
      });
  }, []); // array kosong = jalankan sekali saat mount

  if (loading) return <p>Memuat artikel...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </article>
      ))}
    </div>
  );
}

Langkah 7: Routing dengan React Router

React sendiri tidak memiliki fitur routing bawaan. Gunakan library React Router untuk navigasi antar halaman:

npm install react-router-dom

Setup routing di main.tsx:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import BlogPage from "./pages/BlogPage";
import NotFoundPage from "./pages/NotFoundPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/tentang" element={<AboutPage />} />
        <Route path="/blog" element={<BlogPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Navigasi antar halaman menggunakan komponen Link:

import { Link } from "react-router-dom";

export default function Navbar() {
  return (
    <nav>
      <Link to="/">Beranda</Link>
      <Link to="/tentang">Tentang</Link>
      <Link to="/blog">Blog</Link>
    </nav>
  );
}

Langkah 8: Styling Website React

Ada beberapa pendekatan populer untuk styling di React:

1. Tailwind CSS (Direkomendasikan) — Tailwind vs Bootstrap?

Install dan konfigurasi Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwind memungkinkan styling langsung di JSX tanpa menulis CSS terpisah:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Daftar Sekarang
</button>

2. CSS Modules

Buat file Button.module.css di samping komponen:

/* Button.module.css */
.button {
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #2563eb;
}

import styles from "./Button.module.css";

export default function Button({ label }: { label: string }) {
  return <button className={styles.button}>{label}</button>;
}

Langkah 9: Build dan Optimasi untuk Production

Sebelum deploy, build proyek untuk production:

npm run build

Perintah ini akan membuat folder dist/ berisi file HTML, CSS, dan JavaScript yang sudah diminifikasi dan dioptimasi untuk performa.

Tips Optimasi Performa React

• React.memo - cegah re-render yang tidak perlu pada komponen
• useMemo dan useCallback - memoize nilai dan fungsi yang mahal secara komputasi
• Code splitting dengan lazy() - muat komponen hanya saat dibutuhkan
• Optimalkan gambar - gunakan format WebP dan atribut loading="lazy"
• Bundle analyzer - gunakan rollup-plugin-visualizer untuk analisis ukuran bundle

Langkah 10: Deploy Website React ke Hosting

Setelah website React Anda siap, saatnya deploy ke hosting agar bisa diakses publik. Jika belum punya hosting, cek panduan hosting terbaik untuk kebutuhan website React Anda.

Opsi 1: Deploy ke Vercel (Termudah)

1. Push kode ke GitHub
2. Kunjungi vercel.com dan login dengan akun GitHub
3. Klik "New Project" dan pilih repository Anda
4. Vercel akan otomatis mendeteksi Vite/React dan mengkonfigurasi build settings
5. Klik "Deploy" - selesai! Website Anda live dalam hitungan menit

Opsi 2: Deploy ke Shared Hosting / VPS

Untuk deploy ke hosting tradisional (shared hosting atau VPS), ikuti langkah berikut:

1. Jalankan npm run build untuk membuat folder dist/
2. Upload seluruh isi folder dist/ ke direktori public_html/ via FTP atau File Manager cPanel
3. Buat file .htaccess di root untuk mendukung client-side routing:

# .htaccess untuk React Router
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Opsi 3: Deploy ke VPS dengan Nginx

# Konfigurasi Nginx untuk React SPA
server {
    listen 80;
    server_name domainanda.com;
    root /var/www/html/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache aset statis
    location ~* .(js|css|png|jpg|gif|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

FAQ: Cara Membuat Website dengan React

Kesimpulan

Belajar cara membuat website dengan React adalah investasi yang sangat berharga dalam karier Anda sebagai web developer. Dimulai dari memahami konsep komponen dan JSX, mengelola state dengan hooks, routing antar halaman, hingga deploy ke hosting - setiap langkah membawa Anda lebih dekat ke kemampuan membangun aplikasi web modern yang profesional.

Kunci keberhasilan belajar React adalah konsistensi dan praktek nyata. Jangan hanya membaca tutorial - bangun proyek sungguhan, sekecil apapun. Setiap bug yang Anda selesaikan adalah pelajaran berharga yang tidak bisa didapat dari menonton video tutorial.

Ketika website React Anda sudah siap dipublikasikan, pastikan memilih layanan hosting yang mendukung performa optimal - baik itu shared hosting untuk aplikasi statis, atau VPS/Node.js hosting untuk aplikasi Next.js dengan server-side rendering. Dengan hosting yang tepat, website React Anda akan berjalan cepat dan dapat diandalkan untuk pengguna di seluruh Indonesia.