Persiapan Proyek: Vite, Node & Struktur Folder

Yang dibutuhkan

• Node.js (versi LTS) — menjalankan alat pengembangan. Cek dengan node -v dan npm -v.
• Editor kode — VS Code dengan ekstensi ES7 React snippets dan Prettier.
• Browser dengan ekstensi React Developer Tools.

Membuat proyek dengan Vite

Vite adalah alat build modern yang sangat cepat dan kini menjadi cara standar memulai proyek React.

npm create vite@latest toko-kita -- --template react
cd toko-kita
npm install
npm run dev

Buka alamat yang ditampilkan (biasanya http://localhost:5173). Setiap kamu menyimpan file, browser otomatis ter-update (hot reload).

Struktur folder

toko-kita/
├── index.html          ← satu-satunya halaman HTML (ada <div id="root">)
├── package.json        ← daftar dependency dan script
├── vite.config.js
├── public/             ← berkas statis (favicon, gambar)
└── src/
    ├── main.jsx        ← titik masuk: memasang <App /> ke #root
    ├── App.jsx         ← komponen utama
    ├── App.css
    └── components/     ← (kamu buat) komponen-komponen kecil

main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

StrictMode membantu menemukan bug saat pengembangan, misalnya dengan menjalankan sebagian kode dua kali. Ini hanya terjadi di mode development.

import dan export

React memakai modul ES. Setiap komponen biasanya satu file:

// Tombol.jsx
export default function Tombol() {
  return <button>Klik</button>;
}

// App.jsx
import Tombol from "./components/Tombol.jsx";

• export default — satu ekspor utama per file (diimpor tanpa kurung kurawal).
• export biasa — diimpor dengan { nama }.

Script penting

Fragment: membungkus tanpa elemen tambahan

Komponen hanya boleh mengembalikan satu elemen akar. Jika kamu tidak ingin menambah <div> pembungkus, pakai Fragment:

function Judul() {
  return (
    <>
      <h1>KelasIT</h1>
      <p>Belajar React</p>
    </>
  );
}

<>...</> adalah singkatan <React.Fragment>. Ia tidak menghasilkan elemen di DOM.

Tips

• Satu komponen = satu file, nama file = nama komponen (Kartu.jsx).
• Mulai dari App.jsx, lalu pecah bagian yang berulang menjadi komponen terpisah.