Membuat Proyek Mini dengan Framework

Setelah memahami dasar-dasar framework seperti Bootstrap, Tailwind CSS, atau React.js/Vue.js, saatnya mengaplikasikan pengetahuan tersebut dalam sebuah proyek mini. Proyek ini akan membantu memahami cara kerja framework secara langsung dan bagaimana menggunakannya dalam pengembangan website yang nyata.

1. Menentukan Proyek

Pilih proyek sederhana namun mencakup berbagai fitur penting. Contoh proyek mini:

• Landing Page menggunakan Bootstrap atau Tailwind CSS
• To-Do List App dengan React.js atau Vue.js
• Portfolio Website menggunakan framework pilihan

2. Membuat Struktur Proyek

Buat folder proyek dan atur strukturnya. Jika menggunakan React.js atau Vue.js, gunakan perintah:

• React.js: npx create-react-app my-project
• Vue.js: npm create vue@latest my-project

Untuk proyek berbasis CSS framework seperti Bootstrap atau Tailwind CSS, cukup buat file HTML dan hubungkan dengan framework.

3. Mengimplementasikan Fitur Utama

Beberapa fitur yang bisa dimasukkan dalam proyek:

• Tata letak responsif dengan Bootstrap Grid atau Tailwind Flexbox
• Navigasi dinamis dengan JavaScript atau Router dalam React/Vue
• Interaksi pengguna seperti form, modal, dan animasi ringan
• Menghubungkan ke API (jika proyek memerlukan data dinamis)

4. Testing dan Debugging

• Gunakan DevTools pada browser untuk mengecek tampilan dan error
• Pastikan tampilan responsif pada berbagai ukuran layar
• Jika menggunakan React/Vue, cek error di konsol dan pastikan state management berjalan dengan baik

5. Deploy Proyek

Setelah proyek selesai, bisa langsung di-deploy:

• GitHub Pages untuk proyek berbasis HTML/CSS/JS
• Netlify/Vercel untuk proyek React.js/Vue.js
• Firebase Hosting jika membutuhkan backend ringan

Dengan menyelesaikan proyek mini ini, Anda akan lebih percaya diri dalam menggunakan framework pilihan dan siap untuk proyek yang lebih besar.

Contoh Proyek Mini dengan Framework

Proyek: To-Do List App dengan React.js

Aplikasi ini memungkinkan pengguna menambahkan, menandai sebagai selesai, dan menghapus daftar tugas.

1. Persiapan Proyek

Buat proyek React dengan perintah:

npx create-react-app todo-app
cd todo-app
npm start

2. Struktur Folder

todo-app/
│── src/
│   ├── components/
│   │   ├── TodoForm.js
│   │   ├── TodoItem.js
│   ├── App.js
│   ├── index.js
│── public/
│── package.json

3. Membuat Komponen

TodoForm.js (Form Input Tugas Baru)

import { useState } from "react";

const TodoForm = ({ addTodo }) => {
  const [task, setTask] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!task.trim()) return;
    addTodo(task);
    setTask("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="Tambah tugas..."
      />
      <button type="submit">Tambah</button>
    </form>
  );
};

export default TodoForm;

TodoItem.js (Menampilkan Setiap Tugas)

const TodoItem = ({ todo, toggleComplete, deleteTodo }) => {
  return (
    <div>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => toggleComplete(todo.id)}
      />
      <span style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
        {todo.task}
      </span>
      <button onClick={() => deleteTodo(todo.id)}>Hapus</button>
    </div>
  );
};

export default TodoItem;

App.js (Mengatur Logika dan Menampilkan Komponen)

import { useState } from "react";
import TodoForm from "./components/TodoForm";
import TodoItem from "./components/TodoItem";

const App = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (task) => {
    setTodos([...todos, { id: Date.now(), task, completed: false }]);
  };

  const toggleComplete = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <TodoForm addTodo={addTodo} />
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          toggleComplete={toggleComplete}
          deleteTodo={deleteTodo}
        />
      ))}
    </div>
  );
};

export default App;

4. Menjalankan Aplikasi

Jalankan aplikasi dengan:

npm start

Sekarang, Anda punya aplikasi To-Do List sederhana yang dibuat menggunakan React.js!