Cara Buat Template Dasar Dengan ( Tailwind CSS atau Routing ) JSX

 Berikut ini template dasar React + Tailwind CSS + Routing (React Roter DOM) menggunakan vite

Dalam pengembangan aplikasi React, template dasar sangat penting agar:

• Struktur proyek rapi
• Kode mudah dikembangkan
• Tampilan konsisten
• Routing halaman jelas

Pada materi ini kita akan membahas dua pendekatan utama:

• Template dasar menggunakan Tailwind CSS
• Template dasar menggunakan Routing (React Router) dengan JSX

1. Buat Project baru dengan vite

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

2. Masuk ke folder dalam project

cd my_app

3. Install dependency 

npm install

4. Install Tailwind CSS dan inisialisasi

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

5. Install React Router DOM

npm install react-router-dom

6. Konfiguration Tailwind di tailwind.config.js

Template Dasar Menggunakan Tailwind CSS (JSX)

Persiapan Project React

Buat project React:

npx create-react-app my-template

cd my-template

npm start

Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Konfigurasi tailwind.config.js:

content: ["./src/**/*.{js,jsx}"],

theme: {

  extend: {},

},

plugins: [],

Tambahkan di src/index.css :

@tailwind base;

@tailwind components;

@tailwind utilities;

Struktur Folder Dasar

Contoh Template Navbar (Tailwind + JSX)

components/Navbar.jsx

function Navbar() {

  return (

    <nav className="bg-blue-600 text-white px-6 py-4 flex justify-between">

      <h1 className="font-bold text-lg">MyApp</h1>

      <ul className="flex gap-4">

        <li className="hover:underline cursor-pointer">Home</li>

        <li className="hover:underline cursor-pointer">About</li>

      </ul>

    </nav>

  );

}

export default Navbar;

Halaman Home

pages/Home.jsx

function Home() {

  return (

    <div className="p-10 text-center">

      <h2 className="text-3xl font-bold mb-4">Hello World!</h2>

      <button className="bg-green-500 text-white px-6 py-2 rounded">

        Klik Saya

      </button>

    </div>

  );

}

export default Home;

Menggabungkan Template

App.jsx

import Navbar from "./components/Navbar";

import Home from "./pages/Home";

function App() {

  return (

    <>

      <Navbar />

      <Home />

    </>

  );

}

export default App;

Hasil: Template satu halaman dengan layout rapi & modern.

Template Dasar Menggunakan Routing (JSX)

Install React Router

npm install react-router-dom

Struktur Folder Routing

Contoh Routing di App.jsx

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

import Home from "./pages/Home";

import About from "./pages/About";

import Navbar from "./components/Navbar";

function App() {

  return (

    <BrowserRouter>

      <Navbar />

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </BrowserRouter>

  );

}

export default App;

Navbar dengan Link Routing

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

function Navbar() {

  return (

    <nav className="bg-gray-800 text-white px-6 py-4 flex gap-4">

      <Link to="/" className="hover:underline">Home</Link>

      <Link to="/about" className="hover:underline">About</Link>

    </nav>

  );

}

export default Navbar;