Tutorial React: Membuat Project dengan Vite & Tailwind CSS

Apa yang Akan Kita Buat?

Di akhir materi ini, kita akan memiliki sebuah kerangka project React yang siap pakai, menggunakan TypeScript dan Tailwind CSS yang sudah terkonfigurasi.

Prasyarat (Prerequisites)

Sebelum kita mulai, pastikan kamu sudah menginstall:

• Node.js: Pastikan sudah terinstal (versi 22+ sangat disarankan).
• Terminal/Command Line: Dasar penggunaan terminal.
• Code Editor: VS Code (rekomendasi) atau editor favorit kamu.

Langkah 1: Membuat Project React dengan Vite

Kita akan menggunakan Vite karena Vite jauh lebih cepat dalam proses build dan hot-reloading (memperbarui perubahan kode secara instan).

Buka terminal, arahkan ke folder di mana kamu ingin menyimpan project, lalu jalankan perintah berikut:

npm create vite@latest

Setelah menekan Enter, kita akan diminta untuk melakukan beberapa konfigurasi. Gunakan tombol panah keyboard untuk memilih:

1. Project name: Masukkan nama project (misalnya: project_react).
2. Select a framework: Pilih React.
3. Select a variant: Pilih TypeScript (Kita menggunakan TypeScript agar kode lebih aman dan minim bug, tapi jangan khawatir, sintaksnya sangat mirip dengan JavaScript!).

Setelah selesai, masuklah ke folder project yang baru dibuat:

cd project_react

Langkah 2: Menginstal Tailwind CSS

Sekarang, kita akan menambahkan Tailwind CSS.

Jalankan perintah ini di terminal (pastikan kita sudah berada di dalam folder project_react):

# Menginstal dependensi utama project dan library Tailwind
npm install
npm install tailwindcss @tailwindcss/vite

Langkah 3: Konfigurasi Vite Plugin

Agar Vite mengerti cara memproses kelas-kelas Tailwind (seperti flex, pt-4, text-center), kita perlu mendaftarkan pluginnya.

Buka file vite.config.ts di code editor kita dan ubah kodenya menjadi seperti ini:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(), 
  ],
})

Langkah 4: Menyiapkan Struktur Folder dan CSS

Kita akan merapikan struktur folder agar lebih terorganisir. Kita akan menyimpan file style kita di dalam folder assets.

4.1 Struktur Folder

Buatlah folder baru sehingga strukturnya terlihat seperti ini:

4.2 Isi File CSS

Buka file src/assets/css/style.css yang baru saja kita buat, dan tambahkan satu baris ini saja:

@import "tailwindcss";

Baris ini akan memanggil seluruh utility Tailwind ke dalam aplikasi kita.

4.3 Hubungkan ke React

Agar style tersebut aktif dan dapat digunakan, kita harus mengimpornya di titik masuk utama aplikasi React, yaitu main.tsx.

Buka file src/main.tsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './assets/css/style.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Langkah 5: Jalankan Project!

Semua konfigurasi sudah selesai! Sekarang saatnya melihat hasilnya. Kembali ke terminal dan jalankan:

npm run dev

Terminal akan menampilkan alamat lokal, biasanya http://localhost:5173. Buka alamat tersebut di browser kita.