Instalasi Dan Setup Awal Proyek React

Persiapkan Alat

Sebelum membuat proyek React pastikan alat-alat berikut sudah terpasang

a. Node.js dan NPM

Ract membutuhkan Node.js karna react menggunakan NPM (Node Package Manager) untuk mengelola depedensi

bisa di download di https://nodejs.org

Langkah - Langkah Install Bisa di cek di sini

Setelah instalasi, buka terminal dan ketik :

jika muncul version maka node.js dan npm sudah terinstall

b. Code Editor

Gunakan Visual Code atau editor yang sesuai dengan ke inginan kita

Visual Code Bisa di download di sini https://code

Membuat Proyek React Dengan Create React App

Cara paling mudah untuk membuat proyek React adalah dengan menggunakan Create React App

Buka terminal CMD, GIT Bash, lalu jalankan perintah :

- npx create-react-app nama-proyek-anda

- npx create-react-app belajar-react

tunggu beberapa menit sampai semua depedensi selesai di unduh

Struktur Folder Proyek

Instalasi Awal Proyek React (Recommended)

Sekarang yang paling direkomendasikan adalah Vite karena cepat dan ringan.

npm create vite@latest my-react-app
cd my-react-app
npm install
npm run dev

Pilih:

Framework: React
Variant: JavaScript atau TypeScript

Struktur Folder Standar Proyek React

my-react-app/
├─ node_modules/
├─ public/
│ ├─ favicon.svg
│ └─ index.html
├─ src/
│ ├─ assets/
│ │ ├─ images/
│ │ ├─ icons/
│ │ └─ styles/
│ ├─ components/
│ │ ├─ Button.jsx
│ │ ├─ Navbar.jsx
│ │ └─ Footer.jsx
│ ├─ pages/
│ │ ├─ Home.jsx
│ │ ├─ About.jsx
│ │ └─ Contact.jsx
│ ├─ layouts/
│ │ └─ MainLayout.jsx
│ ├─ routes/
│ │ └─ AppRoutes.jsx
│ ├─ services/
│ │ └─ api.js
│ ├─ hooks/
│ │ └─ useAuth.js
│ ├─ utils/
│ │ └─ formatter.js
│ ├─ App.jsx
│ ├─ main.jsx
│ └─ index.css
├─ .gitignore
├─ package.json
├─ vite.config.js
└─ README.md

Penjelasan Fungsi Folder (Penting!)

public/
Berisi file statis:

index.html → root HTML

favicon, gambar publik

src/assets/

Aset pendukung:

images/ → gambar
icons/ → icon SVG
styles/ → CSS / Tailwind config

src/components/

Komponen kecil & reusable:

Button
Navbar
Modal
Card

Tidak berisi logic halaman

src/pages/

Halaman utama aplikasi:

Home
Login
Dashboard

Biasanya terhubung ke routing

src/layouts/

Template layout:

Header
Sidebar
Footer

Digunakan ulang oleh banyak halaman

src/routes/

Konfigurasi routing:

React Router
Protected routes

src/services/

Komunikasi ke backend:

API
Axios
Auth service

src/hooks/

Custom React Hooks:

useAuth
useFetch

src/utils/

Helper & fungsi umum:

Formatter tanggal
Validator
Helper string

main.jsx

Entry point React

App.jsx

Root component utama

Contoh Setup Routing Sederhana

src/routes/AppRoutes.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";

export default function AppRoutes() {
return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
);
}

Struktur untuk Proyek Besar (Best Practice)

Jika aplikasi makin besar:

src/

├─ features/
│ ├─ auth/
│ │ ├─ Login.jsx
│ │ ├─ authService.js
│ │ └─ authSlice.js
│ └─ product/
│ ├─ ProductList.jsx
│ └─ productService.js

Buat Project React (Vite)

npm create vite@latest react-tailwind-app
cd react-tailwind-app
npm install

Pilih:

Framework: React
Variant: JavaScript (atau TypeScript kalau mau)

Install Tailwind CSS

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

Konfigurasi Tailwind

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
    "./index.html",
    "./src/**/*.{js,jsx}"
],
theme: {
    extend: {},
},
plugins: [],
}

Setup CSS Utama

src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* custom style */
body {
@apply bg-gray-50 text-gray-800;
}

Struktur Folder Template

src/
├─ assets/
│ └─ images/
├─ components/
│ ├─ Navbar.jsx
│ └─ Button.jsx
├─ layouts/
│ └─ MainLayout.jsx
├─ pages/
│ └─ Home.jsx
├─ App.jsx
├─ main.jsx
└─ index.css

Contoh Komponen

src/components/Navbar.jsx
export default function Navbar() {
return (
    <nav className="bg-white shadow">
      <div className="max-w-7xl mx-auto px-4 py-3 flex justify-between">
        <h1 className="text-xl font-bold text-blue-600">
          React + Tailwind
        </h1>
        <ul className="flex gap-4">
          <li className="hover:text-blue-500 cursor-pointer">Home</li>
          <li className="hover:text-blue-500 cursor-pointer">About</li>
        </ul>
      </div>
    </nav>
);
}

src/components/Button.jsx
export default function Button({ children }) {
return (
    <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
      {children}
    </button>
);
}

Layout Utama

src/layouts/MainLayout.jsx
import Navbar from "../components/Navbar";
export default function MainLayout({ children }) {
return (
    <>
      <Navbar />
      <main className="max-w-7xl mx-auto p-6">
        {children}
      </main>
    </>
);
}

Halaman Home

src/pages/Home.jsx
import Button from "../components/Button";
import MainLayout from "../layouts/MainLayout";
export default function Home() {
return (
    <MainLayout>
      <section className="text-center py-20">
        <h2 className="text-4xl font-bold mb-4">
          React + Tailwind Template
        </h2>
        <p className="text-gray-600 mb-6">
          Template siap pakai untuk project modern
        </p>
        <Button>Mulai Sekarang</Button>
      </section>
    </MainLayout>
);
}

App Entry

src/App.jsx
import Home from "./pages/Home";
export default function App() {
return <Home />;
}

src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

Jalankan Project

npm run dev
Buka browser: http://localhost:5173

Vivo Y12 PD1901BF_EXMA

Wednesday, 2 July 2025