docker / getting-started

React Frontend

This outline covers the React frontend for the application, including its components, state management, and interaction with the Node.js backend.

Components

The frontend is structured using React components. Components are self-contained units of UI that encapsulate logic, state, and rendering.

Main Components:

  • App.js: The root component of the application. It handles the overall application structure, including routing and rendering of other components.
  • Home.js: The home page component. It displays a welcome message and links to other pages.
  • Create.js: The page for creating new tasks. It displays a form for entering task details.
  • Task.js: A component representing a single task. It displays the task details and allows for completion.
  • TaskList.js: A component that displays a list of tasks. It retrieves tasks from the backend and renders them using the Task component.

State Management

The frontend uses React’s built-in state management capabilities for managing data and UI updates.

State Management:

  • Component State: Individual components manage their own internal state using the useState hook. This is suitable for small, localized changes within a component.
    • Example: The Task component uses state to track whether the task is completed.
      import React, { useState } from 'react';
          
          function Task(props) {
            const [isCompleted, setIsCompleted] = useState(props.task.completed);
          
            const handleComplete = () => {
              setIsCompleted(!isCompleted);
            };
          
            return (
              <div>
                <input type="checkbox" checked={isCompleted} onChange={handleComplete} />
                {props.task.name}
              </div>
            );
          }
  • Global State: For shared data across multiple components, a global state management solution can be used. The application currently uses a custom global state implementation.

Backend Interaction

The frontend communicates with the Node.js backend to fetch and update data.

Backend Interaction:

  • Fetch API: The frontend uses the built-in fetch API for making HTTP requests to the backend.
    • Example: The TaskList component uses fetch to retrieve tasks from the backend.
      import React, { useState, useEffect } from 'react';
          
          function TaskList() {
            const [tasks, setTasks] = useState([]);
          
            useEffect(() => {
              const fetchTasks = async () => {
                const response = await fetch('/api/tasks');
                const data = await response.json();
                setTasks(data);
              };
          
              fetchTasks();
            }, []);
          
            return (
              <ul>
                {tasks.map((task) => (
                  <li key={task.id}>
                    <Task task={task} />
                  </li>
                ))}
              </ul>
            );
          }

Routing

The frontend utilizes React Router for handling navigation between different pages.

Routing:

  • BrowserRouter: The BrowserRouter component from react-router-dom is used to enable client-side routing.
  • Route: The Route component from react-router-dom is used to define specific routes and map them to corresponding components.

Testing

The frontend utilizes Jest for unit testing.

Testing:

  • Jest: Jest is used for writing unit tests to ensure the functionality of individual components.
  • React Testing Library: The React Testing Library is used to write more user-centric tests that focus on how users interact with the application.