Bab 3: Instalasi & Setup — Siapkan Lingkungan Kerja

⏱ 4 menit baca

Apa yang Kamu Butuhkan?

Sebelum mulai ngoding React, kamu perlu siapkan beberapa tools. Tenang, semuanya gratis.

1. Node.js

Apa itu? Node.js adalah "mesin" yang menjalankan JavaScript di luar browser. React butuh Node.js untuk:

Install library (pakai npm/npx)
Jalankan development server
Build project untuk production

Install:

Buka https://nodejs.org
Download versi LTS (Long Term Support) — yang stabil
Install seperti biasa (next, next, finish)
Verifikasi di terminal:

bash

node --version    # Harus muncul v18.x.x atau lebih baru
npm --version     # Harus muncul 9.x.x atau lebih baru

2. Code Editor

Rekomendasi: Visual Studio Code (VS Code)

Download: https://code.visualstudio.com
Gratis, ringan, paling populer

Extension wajib untuk React:

ES7+ React/Redux/React-Native snippets — shortcut ketik component
Prettier — auto-format kode
ESLint — deteksi error sebelum run

3. Browser

Chrome atau Firefox dengan React Developer Tools extension:

Chrome: cari "React Developer Tools" di Chrome Web Store
Firefox: cari di Firefox Add-ons

Extension ini bikin kamu bisa inspect component React, lihat props & state di browser.

Cara Membuat Project React

Ada beberapa cara. Kita bahas dari yang paling direkomendasikan.

Cara 1: Vite (Rekomendasi untuk Belajar)

Vite (baca: "vit") adalah build tool yang super cepat. Cocok untuk belajar dan project kecil-menengah.

bash

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

Setelah npm run dev, buka http://localhost:5173 di browser. Kamu bakal lihat halaman React default.

Struktur folder:

nama-project/
├── node_modules/     ← library yang di-install (jangan diutak-atik)
├── public/           ← file statis (favicon, gambar)
├── src/              ← KODE KAMU DI SINI
│   ├── App.jsx       ← Component utama
│   ├── App.css       ← Style untuk App
│   ├── main.jsx      ← Entry point (jangan diubah dulu)
│   └── index.css     ← Style global
├── index.html        ← HTML utama
├── package.json      ← Daftar dependency & scripts
└── vite.config.js    ← Konfigurasi Vite

Cara 2: Next.js (Rekomendasi untuk Production)

Next.js adalah framework React yang lebih lengkap — ada routing, server-side rendering, dan banyak fitur production-ready.

bash

npx create-next-app@latest nama-project
cd nama-project
npm run dev

Buka http://localhost:3000.

Kapan pakai Next.js?

Kalau kamu bikin website/app yang mau di-deploy ke production
Kalau butuh SEO (blog, landing page, e-commerce)
Kalau mau fitur routing otomatis

Kapan pakai Vite?

Kalau lagi belajar React dasar
Kalau bikin SPA (Single Page App) internal/dashboard
Kalau mau setup minimal tanpa opini framework

Cara 3: React di HTML Biasa (Tanpa Build Tool)

Untuk eksperimen cepat, kamu bisa pakai React langsung di file HTML:

html

<!DOCTYPE html>
<html>
<head>
  <title>React Tanpa Build Tool</title>
</head>
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">
    function App() {
      return <h1>Halo dari React!</h1>;
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
</html>

⚠️ Ini HANYA untuk eksperimen! Jangan pakai di production karena lambat (Babel compile di browser).

Anatomi File React

Mari kita bedah file App.jsx yang dibuat Vite:

jsx

// 1. Import — ambil yang dibutuhkan
import { useState } from 'react';
import './App.css';

// 2. Component — fungsi yang return JSX
function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Vite + React</h1>
      <button onClick={() => setCount(count + 1)}>
        count is {count}
      </button>
    </div>
  );
}

// 3. Export — biar bisa dipakai file lain
export default App;

Penjelasan Tiap Bagian

Import:

jsx

import { useState } from 'react';  // Ambil Hook dari React
import './App.css';                 // Ambil file CSS
import Tombol from './Tombol';      // Ambil component dari file lain

Export:

jsx

// Default export — satu per file, import tanpa kurung kurawal
export default function App() { ... }

// Named export — bisa banyak per file, import pakai kurung kurawal
export function Tombol() { ... }
export function Input() { ... }

Import named export:

jsx

import { Tombol, Input } from './components';

File .jsx vs .js

.jsx = file JavaScript yang mengandung JSX (markup React)
.js = file JavaScript biasa

Secara teknis, Vite bisa handle JSX di file .js juga. Tapi konvensi-nya:

Kalau ada JSX → pakai .jsx
Kalau pure logic (utility, helper) → pakai .js

Development Workflow

Setelah project jalan, ini workflow harian kamu:

1. Jalankan Dev Server

bash

npm run dev

Server jalan di localhost. Setiap kamu save file, browser otomatis refresh (Hot Module Replacement / HMR). Nggak perlu manual refresh.

2. Edit Kode

Buka src/App.jsx, ubah isinya, save. Browser langsung update.

3. Buat Component Baru

Buat file baru di src/, misalnya src/Navbar.jsx:

jsx

function Navbar() {
  return (
    <nav>
      <h1>Logo</h1>
    </nav>
  );
}

export default Navbar;

Import di App.jsx:

jsx

import Navbar from './Navbar';

function App() {
  return (
    <div>
      <Navbar />
      <p>Konten halaman</p>
    </div>
  );
}

4. Install Library Tambahan

bash

npm install nama-library

Contoh library populer React:

react-router-dom — routing/navigasi halaman
axios — HTTP request
react-icons — icon library
tailwindcss — utility CSS framework

Editor Setup untuk Produktivitas

VS Code Settings (Recommended)

Buka Settings (Ctrl+,) dan set:

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

formatOnSave — kode otomatis rapi setiap save
emmet — shortcut HTML juga jalan di file JSX (ketik div.container → Tab → <div className="container"></div>)

Snippet Berguna

Dengan extension ES7+ React snippets:

Ketik rafce + Tab → buat component dengan arrow function + export
Ketik rfc + Tab → buat component dengan function declaration + export
Ketik useState + Tab → const [state, setState] = useState(initialState)

React Developer Tools

Setelah install extension di browser:

Buka website React kamu
Buka DevTools (F12)
Ada tab baru: Components dan Profiler

Tab Components

Kamu bisa:

Lihat hierarki component (kayak DOM tree tapi untuk React)
Klik component → lihat props dan state-nya
Edit state langsung di DevTools (untuk debugging)

# Error: 'npm' is not recognized as an internal or external command
# Solusi: Install Node.js dari nodejs.org

2. Port sudah dipakai

bash

# Error: Port 5173 is already in use
# Solusi: Kill proses lain atau Vite otomatis pakai port lain

3. Import path salah

jsx

// ❌ Error: Module not found
import Navbar from './navbar';  // File-nya Navbar.jsx (huruf besar!)

// ✅ Benar
import Navbar from './Navbar';

Di macOS/Linux, nama file case-sensitive. Di Windows nggak, tapi tetap biasakan konsisten.

4. Lupa npm install

bash

# Clone project dari GitHub tapi error saat run
# Solusi: jalankan npm install dulu sebelum npm run dev
cd nama-project
npm install    # Install semua dependency
npm run dev    # Baru jalankan

5. node_modules masuk Git

Jangan pernah commit folder node_modules! Tambahkan ke .gitignore:

node_modules/

Folder ini bisa di-regenerate kapan saja dengan npm install.

🏋️ Challenge

Challenge 1: Setup Project Pertama

Buat project React baru pakai Vite:

bash

npm create vite@latest latihan-react -- --template react

Jalankan dev server
Ubah App.jsx — ganti teks default jadi "Halo, saya [nama kamu]! Ini project React pertama saya."
Pastikan browser menampilkan perubahan

✅ Verifikasi

Kalau kamu lihat teks kamu di browser tanpa error di console, berarti berhasil! 🎉

Challenge 2: Buat Component Terpisah

Di project yang sama, buat file src/KartuSaya.jsx
Buat component KartuSaya yang menampilkan:
- Nama kamu
- Hobi kamu (dalam list <ul>)
- Satu tombol "Hubungi Saya" (belum perlu fungsi, cukup tampil)
Import dan pakai di App.jsx

💡 Hint

jsx

// src/KartuSaya.jsx
function KartuSaya() {
  return (
    <div>
      {/* Isi di sini */}
    </div>
  );
}
export default KartuSaya;

jsx

// src/App.jsx
import KartuSaya from './KartuSaya';

✅ Solusi

jsx

// src/KartuSaya.jsx
function KartuSaya() {
  const hobi = ["Coding", "Gaming", "Baca Buku"];

  return (
    <div style={{ border: "1px solid #ccc", padding: "20px", borderRadius: "8px" }}>
      <h2>Yazid Akbar</h2>
      <h4>Hobi:</h4>
      <ul>
        {hobi.map((h, i) => (
          <li key={i}>{h}</li>
        ))}
      </ul>
      <button>Hubungi Saya</button>
    </div>
  );
}

export default KartuSaya;

jsx

// src/App.jsx
import KartuSaya from './KartuSaya';

function App() {
  return (
    <div style={{ padding: "20px" }}>
      <h1>Portfolio Saya</h1>
      <KartuSaya />
    </div>
  );
}

export default App;

Challenge 3: Multi-Component App

Buat mini app dengan struktur:

App
├── Header (judul website)
├── Main
│   ├── KartuProduk (x3, dengan props berbeda)
└── Footer (copyright text)

Setiap component di file terpisah. Import semua di App.jsx.

✅ Solusi

jsx

// src/Header.jsx
export default function Header() {
  return (
    <header style={{ background: "#333", color: "white", padding: "16px" }}>
      <h1>Toko Keren</h1>
    </header>
  );
}

// src/KartuProduk.jsx
export default function KartuProduk({ nama, harga }) {
  return (
    <div style={{ border: "1px solid #ddd", padding: "16px", margin: "8px", borderRadius: "8px" }}>
      <h3>{nama}</h3>
      <p>Rp {harga.toLocaleString()}</p>
      <button>Beli</button>
    </div>
  );
}

// src/Footer.jsx
export default function Footer() {
  return (
    <footer style={{ background: "#eee", padding: "12px", textAlign: "center", marginTop: "20px" }}>
      <p>© 2024 Toko Keren. All rights reserved.</p>
    </footer>
  );
}

// src/App.jsx
import Header from './Header';
import KartuProduk from './KartuProduk';
import Footer from './Footer';

function App() {
  return (
    <div>
      <Header />
      <main style={{ padding: "20px", display: "flex", gap: "12px" }}>
        <KartuProduk nama="Laptop" harga={15000000} />
        <KartuProduk nama="Mouse" harga={250000} />
        <KartuProduk nama="Keyboard" harga={500000} />
      </main>
      <Footer />
    </div>
  );
}

export default App;

Sudah paham materi ini?

Tandai sebagai selesai untuk melacak progress-mu.

Bab 3: Instalasi & Setup — Siapkan Lingkungan Kerja

Apa yang Kamu Butuhkan?

1. Node.js

2. Code Editor

3. Browser

Cara Membuat Project React

Cara 1: Vite (Rekomendasi untuk Belajar)

Cara 2: Next.js (Rekomendasi untuk Production)

Cara 3: React di HTML Biasa (Tanpa Build Tool)

Anatomi File React

Penjelasan Tiap Bagian

File .jsx vs .js

Development Workflow

1. Jalankan Dev Server

2. Edit Kode

3. Buat Component Baru

4. Install Library Tambahan

Editor Setup untuk Produktivitas

VS Code Settings (Recommended)

Snippet Berguna

React Developer Tools

Tab Components

Tab Profiler

⚠️ Jebakan

1. Node.js belum terinstall

2. Port sudah dipakai

3. Import path salah

4. Lupa npm install

5. node_modules masuk Git

🏋️ Challenge

Challenge 1: Setup Project Pertama

Challenge 2: Buat Component Terpisah

Challenge 3: Multi-Component App