React JS

Notes Crud React App

devtechtutor.com
devtechtutor.com
22/06/2024
Updated on 22/06/2024
16 Mins Read
42 Views
0 Comments

Module 1: Installation of App in Vite, Dependencies, Documentation, and Creating App Schema/Diagram

Step 1: Installation of App in Vite

  1. Create a New Vite Project: Open your terminal and run the following command to create a new Vite project:

npm create vite@latest task-list-app -- --template react

2. Navigate to the Project Directory:

cd task-list-app

3. Install Dependencies:

npm install

4. Start the Development Server:

npm run dev

Step 2: Install Tailwind CSS

  1. Install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind CSS: Generate the tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

3. Configure tailwind.config.js:

Replace the content with the following configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Create a CSS file for Tailwind: Create a new file named src/index.css and add the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Import the CSS file in your entry point: Modify the src/main.jsx file to import the Tailwind CSS file:

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';  // Import Tailwind CSS
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Step 3: Documentation

Create a README.md file in the root of your project directory with the following content:

Step 5: Connect to GitHub via Visual Studio Code

  1. Initialize a Git Repository:

git init

Add Remote Repository:

git remote add origin <repository-url>

Create Initial Commit:

git add .
git commit -m "Initial commit"

Push to GitHub:

git push -u origin main

Open Visual Studio Code:

code .

  1. Install GitHub Extension in VSCode: Go to Extensions (Ctrl+Shift+X), search for “GitHub” and install the GitHub extension.

You can now manage your GitHub repository directly from Visual Studio Code.

Module 2: UI Design

In this module, we will create the UI components based on the provided design and ensure they are responsive. The design will be implemented using Tailwind CSS for styling.

Step 1: Set Up the Project Structure

  1. Create the Components Directory: Inside the src directory, create a components directory:

mkdir src/components

  • Create Initial Components:

    • AddTask.jsx
    • EditTask.jsx
    • TaskList.jsx
    • TaskItem.jsx

  • Create the Pages Directory: Inside the src directory, create a pages directory:

mkdir src/pages

  1. Create Initial Pages:

    • Home.jsx

Step 2: Implement the Components

  1. AddTask Component:

// src/components/AddTask.jsx
import React, { useState } from 'react';

const AddTask = ({ onAdd }) => {
  const [task, setTask] = useState('');
  const [priority, setPriority] = useState('');

  const handleAdd = () => {
    if (task && priority) {
      onAdd({ task, priority });
      setTask('');
      setPriority('');
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75">
      <div className="bg-white p-6 rounded-lg shadow-lg w-96">
        <h2 className="text-2xl font-bold mb-4">Add Task</h2>
        <input
          type="text"
          placeholder="Task"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          className="w-full p-2 border border-gray-300 rounded mb-4"
        />
        <div className="mb-4">
          <span className="mr-4">Priority:</span>
          <button
            className={`px-4 py-2 rounded mr-2 ${priority === 'High' ? 'bg-red-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('High')}
          >
            High
          </button>
          <button
            className={`px-4 py-2 rounded mr-2 ${priority === 'Medium' ? 'bg-yellow-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('Medium')}
          >
            Medium
          </button>
          <button
            className={`px-4 py-2 rounded ${priority === 'Low' ? 'bg-green-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('Low')}
          >
            Low
          </button>
        </div>
        <button
          onClick={handleAdd}
          className="w-full bg-blue-500 text-white p-2 rounded"
        >
          Add
        </button>
      </div>
    </div>
  );
};

export default AddTask;

2. EditTask Component:

// src/components/EditTask.jsx
import React, { useState } from 'react';

const EditTask = ({ task, onUpdate }) => {
  const [newTask, setNewTask] = useState(task.task);
  const [priority, setPriority] = useState(task.priority);

  const handleUpdate = () => {
    if (newTask && priority) {
      onUpdate({ ...task, task: newTask, priority });
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75">
      <div className="bg-white p-6 rounded-lg shadow-lg w-96">
        <h2 className="text-2xl font-bold mb-4">Edit Task</h2>
        <input
          type="text"
          placeholder="Task"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          className="w-full p-2 border border-gray-300 rounded mb-4"
        />
        <div className="mb-4">
          <span className="mr-4">Priority:</span>
          <button
            className={`px-4 py-2 rounded mr-2 ${priority === 'High' ? 'bg-red-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('High')}
          >
            High
          </button>
          <button
            className={`px-4 py-2 rounded mr-2 ${priority === 'Medium' ? 'bg-yellow-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('Medium')}
          >
            Medium
          </button>
          <button
            className={`px-4 py-2 rounded ${priority === 'Low' ? 'bg-green-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('Low')}
          >
            Low
          </button>
        </div>
        <button
          onClick={handleUpdate}
          className="w-full bg-blue-500 text-white p-2 rounded"
        >
          Update
        </button>
      </div>
    </div>
  );
};

export default EditTask;

3. TaskItem Component:

// src/components/TaskItem.jsx
import React from 'react';

const TaskItem = ({ task, onEdit, onDelete }) => {
  return (
    <div className="flex items-center justify-between p-4 border-b border-gray-300">
      <div>
        <h3 className="text-lg font-bold">{task.task}</h3>
        <p className={`text-sm ${task.priority === 'High' ? 'text-red-500' : task.priority === 'Medium' ? 'text-yellow-500' : 'text-green-500'}`}>
          Priority: {task.priority}
        </p>
      </div>
      <div className="flex items-center">
        <button onClick={onEdit} className="mr-2 text-blue-500">Edit</button>
        <button onClick={onDelete} className="text-red-500">Delete</button>
      </div>
    </div>
  );
};

export default TaskItem;

4. TaskList Component:

// src/components/TaskList.jsx
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onEdit, onDelete }) => {
  return (
    <div className="bg-white p-4 rounded-lg shadow-lg">
      {tasks.length > 0 ? (
        tasks.map(task => (
          <TaskItem
            key={task.id}
            task={task}
            onEdit={() => onEdit(task)}
            onDelete={() => onDelete(task.id)}
          />
        ))
      ) : (
        <p className="text-center text-gray-500">No tasks available</p>
      )}
    </div>
  );
};

export default TaskList;

Step 3: Implement the Home Page

  1. Home Page:

// src/pages/Home.jsx
import React, { useState } from 'react';
import AddTask from '../components/AddTask';
import EditTask from '../components/EditTask';
import TaskList from '../components/TaskList';

const Home = () => {
  const [tasks, setTasks] = useState([]);
  const [isAdding, setIsAdding] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [currentTask, setCurrentTask] = useState(null);

  const addTask = (task) => {
    setTasks([...tasks, { ...task, id: Date.now() }]);
    setIsAdding(false);
  };

  const updateTask = (updatedTask) => {
    setTasks(tasks.map(task => (task.id === updatedTask.id ? updatedTask : task)));
    setIsEditing(false);
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  const startEditing = (task) => {
    setCurrentTask(task);
    setIsEditing(true);
  };

  return (
    <div className="min-h-screen bg-gray-100 p-4">
      <div className="container mx-auto">
        <div className="flex justify-between items-center mb-4">
          <h1 className="text-3xl font-bold">Task List</h1>
          <button
            onClick={() => setIsAdding(true)}
            className="bg-blue-500 text-white px-4 py-2 rounded"
          >
            + Add Task
          </button>
        </div>
        <TaskList tasks={tasks} onEdit={startEditing} onDelete={deleteTask} />
        {isAdding && <AddTask onAdd={addTask} />}
        {isEditing && <EditTask task={currentTask} onUpdate={updateTask} />}
      </div>
    </div>
  );
};

export default Home;

Step 4: Update the App Component

  1. App Component:

// src/App.jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="*" element={<div>Page Not Found</div>} />
      </Routes>
    </Router>
  );
};

export default App;

You have now created the basic UI components based on the provided design, ensuring they are responsive and styled with Tailwind CSS. Next, we will move on to Module 3: CRUD operations.

Module 3 CRUD Operations

In this module, we will implement the CRUD operations (Create, Read, Update, Delete) on the previously designed UI components.

Step 1: Set Up State Management

  1. Install UUID Library: We will use the uuid library to generate unique IDs for tasks.

npm install uuid

2. Update Home Component:

  • Add CRUD functions for managing tasks.
  • Use React’s state to manage tasks.
// Import necessary modules from React and other components
import React, { useState } from 'react';
import AddTask from '../components/AddTask';
import EditTask from '../components/EditTask';
import TaskList from '../components/TaskList';
import { v4 as uuidv4 } from 'uuid';

const Home = () => {
  // State to store the list of tasks
  const [tasks, setTasks] = useState([]);
  // State to manage the visibility of the add task modal
  const [isAdding, setIsAdding] = useState(false);
  // State to manage the visibility of the edit task modal
  const [isEditing, setIsEditing] = useState(false);
  // State to store the task currently being edited
  const [currentTask, setCurrentTask] = useState(null);

  // Function to add a new task to the list
  const addTask = (task) => {
    // Add the new task to the list with a unique ID
    setTasks([...tasks, { ...task, id: uuidv4() }]);
    // Close the add task modal
    setIsAdding(false);
  };

  // Function to update an existing task in the list
  const updateTask = (updatedTask) => {
    // Update the task in the list if it matches the updated task's ID
    setTasks(tasks.map(task => (task.id === updatedTask.id ? updatedTask : task)));
    // Close the edit task modal
    setIsEditing(false);
  };

  // Function to delete a task from the list
  const deleteTask = (id) => {
    // Remove the task from the list if its ID matches the given ID
    setTasks(tasks.filter(task => task.id !== id));
  };

  // Function to start editing a task
  const startEditing = (task) => {
    // Set the task to be edited as the current task
    setCurrentTask(task);
    // Open the edit task modal
    setIsEditing(true);
  };

  return (
    // Main container with minimum height screen, gray background, and padding
    <div className="min-h-screen bg-gray-100 p-4">
      {/* Centered container */}
      <div className="container mx-auto">
        {/* Header section with flex layout to space items between */}
        <div className="flex justify-between items-center mb-4">
          {/* Title of the task list */}
          <h1 className="text-3xl font-bold">Task List</h1>
          {/* Button to open the add task modal */}
          <button
            onClick={() => setIsAdding(true)}
            className="bg-blue-500 text-white px-4 py-2 rounded"
          >
            + Add Task
          </button>
        </div>
        {/* TaskList component, passing tasks as props and handling edit and delete events */}
        <TaskList tasks={tasks} onEdit={startEditing} onDelete={deleteTask} />
        {/* AddTask component, shown conditionally if isAdding is true, handling add task event */}
        {isAdding && <AddTask onAdd={addTask} />}
        {/* EditTask component, shown conditionally if isEditing is true, passing the current task as props and handling update task event */}
        {isEditing && <EditTask task={currentTask} onUpdate={updateTask} />}
      </div>
    </div>
  );
};

// Export the Home component as the default export
export default Home;

Explanation:

  1. Import Statements:

    • React, { useState }: Import React and the useState hook to manage state.
    • AddTask, EditTask, TaskList: Import the necessary components for adding, editing, and listing tasks.
    • uuidv4: Import the uuidv4 function to generate unique IDs for tasks.

  2. State Management:

    • tasks: An array to store the list of tasks.
    • isAdding: A boolean to manage the visibility of the add task modal.
    • isEditing: A boolean to manage the visibility of the edit task modal.
    • currentTask: An object to store the task currently being edited.

  3. Functions:

    • addTask: Adds a new task to the tasks array and closes the add task modal.
    • updateTask: Updates an existing task in the tasks array and closes the edit task modal.
    • deleteTask: Deletes a task from the tasks array.
    • startEditing: Sets the task to be edited and opens the edit task modal.

  4. Return JSX:

    • Main container with a gray background and padding.
    • Header with a title and a button to open the add task modal.
    • TaskList component to display the list of tasks, with props for tasks and handlers for edit and delete actions.
    • AddTask component, shown conditionally based on isAdding.
    • EditTask component, shown conditionally based on isEditing.

Step 2: Implement AddTask Component

The AddTask component allows users to add new tasks to the list.

  1. AddTask Component:

// Import necessary modules from React
import React, { useState } from 'react';

// Define the AddTask component, accepting the onAdd prop
const AddTask = ({ onAdd }) => {
  // State to store the task input value
  const [task, setTask] = useState('');
  // State to store the selected priority
  const [priority, setPriority] = useState('');

  // Function to handle adding a new task
  const handleAdd = () => {
    // Check if both task and priority are set
    if (task && priority) {
      // Call the onAdd function passed as a prop with the new task
      onAdd({ task, priority });
      // Reset the task input and priority
      setTask('');
      setPriority('');
    }
  };

  return (
    // Overlay container with fixed positioning, flex layout for centering content, and semi-transparent background
    <div className="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75">
      {/* Modal container with white background, padding, rounded corners, shadow effect, and fixed width */}
      <div className="bg-white p-6 rounded-lg shadow-lg w-96">
        {/* Modal title with larger text, bold font, and bottom margin */}
        <h2 className="text-2xl font-bold mb-4">Add Task</h2>
        {/* Input field for task name, bound to the task state, with styling for full width, padding, border, rounded corners, and bottom margin */}
        <input
          type="text"
          placeholder="Task"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          className="w-full p-2 border border-gray-300 rounded mb-4"
        />
        {/* Container for priority buttons with bottom margin */}
        <div className="mb-4">
          {/* Label for priority selection with right margin */}
          <span className="mr-4">Priority:</span>
          {/* Button for setting priority to 'High', with conditional styling based on priority state */}
          <button
            className={`px-4 py-2 rounded mr-2 ${priority === 'High' ? 'bg-red-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('High')}
          >
            High
          </button>
          {/* Button for setting priority to 'Medium', with conditional styling based on priority state */}
          <button
            className={`px-4 py-2 rounded mr-2 ${priority === 'Medium' ? 'bg-yellow-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('Medium')}
          >
            Medium
          </button>
          {/* Button for setting priority to 'Low', with conditional styling based on priority state */}
          <button
            className={`px-4 py-2 rounded ${priority === 'Low' ? 'bg-green-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('Low')}
          >
            Low
          </button>
        </div>
        {/* Button to add the task, with click event to trigger handleAdd function, and styling for full width, blue background, white text, padding, and rounded corners */}
        <button
          onClick={handleAdd}
          className="w-full bg-blue-500 text-white p-2 rounded"
        >
          Add
        </button>
      </div>
    </div>
  );
};

// Export the AddTask component as the default export
export default AddTask;

Explanation:

  1. Import Statements:

    • React, { useState }: Import React and the useState hook to manage state.

  2. Component Definition:

    • AddTask: Define the AddTask component, which accepts onAdd as a prop.

  3. State Management:

    • task: State to store the task input value.
    • priority: State to store the selected priority.

  4. handleAdd Function:

    • Checks if both the task and priority are set.
    • Calls the onAdd function passed as a prop with the new task object.
    • Resets the task input and priority.

  5. Return JSX:

    • Main overlay container with a semi-transparent background, centered content using flexbox.
    • Modal container with white background, padding, rounded corners, shadow effect, and fixed width.
    • Title for the modal.
    • Input field for the task name, bound to the task state.
    • Priority selection buttons with conditional styling based on the priority state.
    • Add button to trigger the handleAdd function.

Step 3: Implement EditTask Component

The EditTask component allows users to edit existing tasks.

  1. EditTask Component:

// Import necessary modules from React
import React, { useState } from 'react';

// Define the EditTask component, accepting the task and onUpdate props
const EditTask = ({ task, onUpdate }) => {
  // State to store the updated task input value, initialized with the current task value
  const [newTask, setNewTask] = useState(task.task);
  // State to store the selected priority, initialized with the current task priority
  const [priority, setPriority] = useState(task.priority);

  // Function to handle updating the task
  const handleUpdate = () => {
    // Check if both the updated task and priority are set
    if (newTask && priority) {
      // Call the onUpdate function passed as a prop with the updated task
      onUpdate({ ...task, task: newTask, priority });
    }
  };

  return (
    // Overlay container with fixed positioning, flex layout for centering content, and semi-transparent background
    <div className="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75">
      {/* Modal container with white background, padding, rounded corners, shadow effect, and fixed width */}
      <div className="bg-white p-6 rounded-lg shadow-lg w-96">
        {/* Modal title with larger text, bold font, and bottom margin */}
        <h2 className="text-2xl font-bold mb-4">Edit Task</h2>
        {/* Input field for task name, bound to the newTask state, with styling for full width, padding, border, rounded corners, and bottom margin */}
        <input
          type="text"
          placeholder="Task"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          className="w-full p-2 border border-gray-300 rounded mb-4"
        />
        {/* Container for priority buttons with bottom margin */}
        <div className="mb-4">
          {/* Label for priority selection with right margin */}
          <span className="mr-4">Priority:</span>
          {/* Button for setting priority to 'High', with conditional styling based on priority state */}
          <button
            className={`px-4 py-2 rounded mr-2 ${priority === 'High' ? 'bg-red-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('High')}
          >
            High
          </button>
          {/* Button for setting priority to 'Medium', with conditional styling based on priority state */}
          <button
            className={`px-4 py-2 rounded mr-2 ${priority === 'Medium' ? 'bg-yellow-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('Medium')}
          >
            Medium
          </button>
          {/* Button for setting priority to 'Low', with conditional styling based on priority state */}
          <button
            className={`px-4 py-2 rounded ${priority === 'Low' ? 'bg-green-500 text-white' : 'bg-gray-200'}`}
            onClick={() => setPriority('Low')}
          >
            Low
          </button>
        </div>
        {/* Button to update the task, with click event to trigger handleUpdate function, and styling for full width, blue background, white text, padding, and rounded corners */}
        <button
          onClick={handleUpdate}
          className="w-full bg-blue-500 text-white p-2 rounded"
        >
          Update
        </button>
      </div>
    </div>
  );
};

// Export the EditTask component as the default export
export default EditTask;

Explanation:

  1. Import Statements:

    • React, { useState }: Import React and the useState hook to manage state.

  2. Component Definition:

    • EditTask: Define the EditTask component, which accepts task and onUpdate as props.

  3. State Management:

    • newTask: State to store the updated task input value, initialized with the current task value.
    • priority: State to store the selected priority, initialized with the current task priority.

  4. handleUpdate Function:

    • Checks if both the updated task and priority are set.
    • Calls the onUpdate function passed as a prop with the updated task object.

  5. Return JSX:

    • Main overlay container with a semi-transparent background, centered content using flexbox.
    • Modal container with white background, padding, rounded corners, shadow effect, and fixed width.
    • Title for the modal.
    • Input field for the task name, bound to the newTask state.
    • Priority selection buttons with conditional styling based on the priority state.
    • Update button to trigger the handleUpdate function.

Step 4: Implement TaskItem Component

The TaskItem component displays individual tasks and provides buttons to edit and delete them.

  1. TaskItem Component:

// Import necessary modules from React
import React from 'react';

// Define the TaskItem component, accepting task, onEdit, and onDelete props
const TaskItem = ({ task, onEdit, onDelete }) => {
  return (
    // Container for the task item with flex layout, padding, and bottom border
    <div className="flex items-center justify-between p-4 border-b border-gray-300">
      {/* Container for the task details */}
      <div>
        {/* Task title with larger, bold text */}
        <h3 className="text-lg font-bold">{task.task}</h3>
        {/* Task priority with conditional classes based on the priority value */}
        <p className={`text-sm ${task.priority === 'High' ? 'text-red-500' : task.priority === 'Medium' ? 'text-yellow-500' : 'text-green-500'}`}>
          Priority: {task.priority}
        </p>
      </div>
      {/* Container for action buttons */}
      <div className="flex items-center">
        {/* Edit button with blue text, triggers onEdit when clicked */}
        <button onClick={onEdit} className="mr-2 text-blue-500">Edit</button>
        {/* Delete button with red text, triggers onDelete when clicked */}
        <button onClick={onDelete} className="text-red-500">Delete</button>
      </div>
    </div>
  );
};

// Export the TaskItem component as the default export
export default TaskItem;

Explanation:

  1. Import Statements:

    • React: Import React to define the component.

  2. Component Definition:

    • TaskItem: Define the TaskItem component, which accepts task, onEdit, and onDelete as props.

  3. Return JSX:

    • Main container with flexbox layout to space items between, padding, and a bottom border.
    • Inner container for task details:
      • Task title displayed with larger, bold text.
      • Task priority displayed with conditional text color based on the priority value.
    • Inner container for action buttons:
      • Edit button styled with blue text, triggers onEdit when clicked.
      • Delete button styled with red text, triggers onDelete when clicked.

Step 5: Implement TaskList Component

The TaskList component displays the list of tasks.

  1. TaskList Component:

// Import necessary modules from React
import React from 'react';
// Import the TaskItem component
import TaskItem from './TaskItem';

// Define the TaskList component, accepting tasks, onEdit, and onDelete props
const TaskList = ({ tasks, onEdit, onDelete }) => {
  return (
    // Main container with white background, padding, rounded corners, and shadow effect
    <div className="bg-white p-4 rounded-lg shadow-lg">
      {/* Check if there are tasks available */}
      {tasks.length > 0 ? (
        // Loop through each task and render a TaskItem component
        tasks.map(task => (
          <TaskItem
            key={task.id} // Unique key for each task
            task={task} // Pass the task object as a prop
            onEdit={() => onEdit(task)} // Pass the onEdit function, wrapped to include the task object
            onDelete={() => onDelete(task.id)} // Pass the onDelete function, wrapped to include the task ID
          />
        ))
      ) : (
        // Display a message if there are no tasks available
        <p className="text-center text-gray-500">No tasks available</p>
      )}
    </div>
  );
};

// Export the TaskList component as the default export
export default TaskList;

Explanation:

  1. Import Statements:

    • React: Import React to define the component.
    • TaskItem: Import the TaskItem component to be used within TaskList.

  2. Component Definition:

    • TaskList: Define the TaskList component, which accepts tasks, onEdit, and onDelete as props.

  3. Return JSX:

    • Main container with a white background, padding, rounded corners, and a shadow effect.
    • Conditional rendering to check if there are tasks available:
      • If tasks are available, map through the tasks array and render a TaskItem component for each task:
        • Each TaskItem is given a unique key prop using task.id.
        • The task object is passed as a prop to TaskItem.
        • The onEdit function is wrapped to include the current task and passed as a prop.
        • The onDelete function is wrapped to include the current task.id and passed as a prop.
      • If no tasks are available, display a message indicating that no tasks are available.

Step 6: Update the App Component

Make sure the App.jsx is correctly routing to the Home component.

  1. App Component:

// Import necessary modules from React and React Router
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// Import the Home component
import Home from './pages/Home';

// Define the App component
const App = () => {
  return (
    // Set up the Router for handling client-side navigation
    <Router>
      {/* Define the Routes within the Router */}
      <Routes>
        {/* Define a route for the home page, which renders the Home component */}
        <Route path="/" element={<Home />} />
        {/* Define a catch-all route for undefined paths, displaying a "Page Not Found" message */}
        <Route path="*" element={<div>Page Not Found</div>} />
      </Routes>
    </Router>
  );
};

// Export the App component as the default export
export default App;

Explanation:

  1. Import Statements:

    • React: Import React to define the component.
    • { BrowserRouter as Router, Routes, Route }: Import necessary components from react-router-dom for routing.

  2. Component Imports:

    • Home: Import the Home component to be used within the routes.

  3. Component Definition:

    • App: Define the App component.

  4. Return JSX:

    • Router: Wrap the entire application in a Router component to enable client-side navigation.
    • Routes: Define the set of routes within the Router.
      • <Route path="/" element={<Home />} />: Define a route for the home page ("/"), which renders the Home component.
      • <Route path="*" element={<div>Page Not Found</div>} />: Define a catch-all route for any undefined paths, which renders a “Page Not Found” message.

You have successfully implemented the CRUD operations (Create, Read, Update, Delete) for the Task List app. The application now allows users to add, edit, and delete tasks, and the state is managed appropriately. Next, we will move on to Module 4: Deploying the app online.

Module 4: Deploying the App Online

In this module, we will deploy the Task List app online. There are various platforms where you can deploy your Vite + React application, such as Vercel, Netlify, GitHub Pages, and more. For simplicity, we will use Vercel, which offers an easy integration with GitHub.

Step 1: Prepare for Deployment

  1. Build the Project: First, we need to build the project for production. Run the following command in your terminal:

npm run build

  1. This will create a dist directory with the production build of your app.

Step 2: Deploy to Vercel

  1. Create a Vercel Account: If you don’t already have an account, go to Vercel and sign up.

  2. Install Vercel CLI: Install the Vercel CLI globally on your machine:

npm install -g vercel

Login to Vercel: Login to your Vercel account using the CLI:

vercel login

Initialize the Project: In the root directory of your project, run:

vercel

  • Follow the prompts to:

    • Select the correct scope.
    • Link to an existing project or create a new one.
    • Select the dist directory as the output directory.

  • Deploy the Project: After initialization, you can deploy your project by running:

vercel --prod

  1. This command will deploy your project to Vercel and give you a URL where your app is live.

Step 3: Continuous Deployment

To set up continuous deployment, follow these steps:

  1. Connect Your GitHub Repository:

    • Go to your project dashboard on Vercel.
    • Click on “Settings” and then “Git”.
    • Connect your GitHub account and select the repository you want to deploy.

  2. Automatic Deployments:

    • Every time you push changes to your GitHub repository, Vercel will automatically build and deploy your project.

Please share this article if you like it!

Share It!
devtechtutor.com
Written By

devtechtutor.com

Welcome to DevTechTutor.com, your ultimate resource for mastering web development and technology! Whether you're a beginner eager to dive into coding or an experienced developer looking to sharpen your skills, DevTechTutor.com is here to guide you every step of the way. Our mission is to make learning web development accessible, engaging, and effective.

Other Articles

Share Article

Facebook
Twitter
LinkedIn
Reddit
Telegram
WhatsApp
Email
Threads
X
Print

Our site uses cookies. By using this site, you agree to the Privacy Policy and Terms of Use.

Accept