Managing large applications in React - Mini Project: Build & Apply

Managing Large Applications with React

📖 Scenario: You are building a simple React app that manages a list of tasks. As the app grows, you want to organize your code better by splitting it into smaller components and using a central state management approach.

🎯 Goal: Build a React app that shows a list of tasks, allows adding new tasks, and organizes the code into components with a shared state using React's useState hook.

📋 What You'll Learn

Create a main component with initial task data

Add a configuration variable for the maximum number of tasks allowed

Use a loop to render the list of tasks dynamically

Add a form to add new tasks respecting the maximum limit

💡 Why This Matters

🌍 Real World

Managing state and components in React is essential for building scalable web apps like to-do lists, shopping carts, or dashboards.

💼 Career

React developers often need to organize large apps by splitting UI into components and managing shared state efficiently.

1

Set up initial task data

Create a functional React component called TaskApp. Inside it, create a state variable called tasks using useState with the initial array ["Buy groceries", "Walk the dog", "Read a book"].

React

import React, { useState } from 'react';

function TaskApp() {
  // Create a state variable called tasks with initial array
  
}

Need a hint?

Use const [tasks, setTasks] = useState([...]) inside the TaskApp function.

2

Add a maximum tasks limit

Inside the TaskApp component, create a constant called maxTasks and set it to 5. This will limit how many tasks can be added.

React

import React, { useState } from 'react';

function TaskApp() {
  const [tasks, setTasks] = useState(["Buy groceries", "Walk the dog", "Read a book"]);
  // Create a constant maxTasks and set it to 5
  
}

Need a hint?

Just add const maxTasks = 5; inside the TaskApp function below the state.

3

Render the list of tasks

Inside the TaskApp component, return a <ul> element that uses tasks.map((task, index) => ...) to create a list of <li> elements. Each <li> should have a key set to index and display the task text.

React

import React, { useState } from 'react';

function TaskApp() {
  const [tasks, setTasks] = useState(["Buy groceries", "Walk the dog", "Read a book"]);
  const maxTasks = 5;

  // Return a  with tasks.map to render  elements
  return (
    
  );
}

Need a hint?

Use return ( <ul> {tasks.map((task, index) => <li key={index}>{task}</li>)} </ul> ).

4

Add a form to add new tasks

Inside the TaskApp component, add a form with an input and a button. Use a state variable newTask to track the input value. On form submit, add newTask to tasks only if the number of tasks is less than maxTasks. Clear newTask after adding. Render the form below the task list.

React

import React, { useState } from 'react';

function TaskApp() {
  const [tasks, setTasks] = useState(["Buy groceries", "Walk the dog", "Read a book"]);
  const maxTasks = 5;
  // Add newTask state
  // Add a form with input and button
  // On submit, add newTask to tasks if tasks.length 
      
        {tasks.map((task, index) => (
          {task}
        ))}
      
      {/* Form goes here */}
    
  );
}

Need a hint?

Use useState for newTask. Add a form with onSubmit={handleSubmit}. In handleSubmit, prevent default, check conditions, update tasks, and clear input.