Membuat Aplikasi Web dengan React.js dan Tailwind CSS

Dalam tutorial ini, saya akan memandu Anda melalui langkah-langkah membuat aplikasi web sederhana menggunakan React.js dan Tailwind CSS. Kami akan membuat daftar tugas sederhana sebagai contoh.

Langkah 1: Persiapan Awal

Pastikan Anda memiliki Node.js dan npm (Node Package Manager) terpasang di komputer Anda. Jika belum, Anda dapat mengunduhnya dari situs resmi Node.js.

Buka terminal dan buat proyek baru dengan menggunakan Create React App:

npx create-react-app react-tailwind-todo
cd react-tailwind-todo

Konfigurasi Tailwind CSS

Instal Tailwind CSS dan dependensi lainnya:

npm install tailwindcss

Buat file konfigurasi Tailwind CSS:

npx tailwindcss init

Buka berkas tailwind.config.js yang baru saja dibuat dan konfigurasikan gaya sesuai kebutuhan Anda, seperti mengaktifkan warna kustom, ukuran font, margin, padding, dan sebagainya.

Membuat Komponen

1. Buka berkas src/App.js dan hapus kode di dalamnya.
2. Replace kode tersebut dengan kode berikut:

import React, { useState } from 'react';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim() !== '') {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-semibold mb-4">To-Do List</h1>
      <div className="flex">
        <input
          type="text"
          className="border p-2 rounded-l"
          placeholder="Add a task..."
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
        />
        <button
          className="bg-blue-500 text-white p-2 rounded-r"
          onClick={addTask}
        >
          Add
        </button>
      </div>
      <ul className="mt-4">
        {tasks.map((task, index) => (
          <li key={index} className="border p-2 mb-2 rounded">
            {task}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Menjalankan Aplikasi

Kembali ke terminal dan jalankan aplikasi dengan perintah:

npm start

Buka browser dan akses http://localhost:3000 untuk melihat hasilnya.