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
  
}

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
  
}

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 (
    
  );
}

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 */}
    
  );
}

Hint

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

Practice

1. What is a common way to organize a large React application to keep it manageable?

easy

A. Use only class components to keep consistency

B. Write all code in a single file for easy access

C. Avoid using components and write plain JavaScript

D. Split the app into smaller components and folders

Solution

1. Step 1: Understand component-based design

   React encourages breaking UI into small, reusable components.

2. Step 2: Organize code in folders

   Grouping related components and files in folders helps maintain large apps.

3. Final Answer:

   Split the app into smaller components and folders -> Option D

4. Quick Check:

   Component + folder structure = A [OK]

Hint: Think modular: small parts in folders make apps manageable [OK]

Common Mistakes:

• Putting all code in one file makes it hard to maintain
• Ignoring components loses React's main advantage
• Using only class components is outdated

2. Which of the following is the correct way to import a component named Header from a file in React?

easy

A. import Header from './Header';

B. require Header from './Header';

C. import { Header } from './Header.js';

D. include Header from './Header';

Solution

1. Step 1: Recognize ES6 import syntax

   React uses ES6 modules, so import Header from './Header'; is correct for default exports.

2. Step 2: Check other options

   require is CommonJS, not standard in React apps; include is invalid; named import { Header } requires named export.

3. Final Answer:

   import Header from './Header'; -> Option A

4. Quick Check:

   Default import uses import X from [OK]

Hint: Use ES6 import syntax: import Component from 'path' [OK]

Common Mistakes:

• Using require instead of import in React
• Confusing default and named imports
• Using invalid keywords like include

3. Given this React component structure:

src/
  components/
    Navbar.js
  pages/
    Home.js
    About.js
  App.js

Which statement best describes how routing helps manage this app?

medium

A. Routing allows switching between Home and About pages without reloading

B. Routing bundles all components into one file for faster loading

C. Routing automatically converts components to class components

D. Routing disables navigation to keep app simple

Solution

1. Step 1: Understand routing purpose

   Routing lets users move between different views (pages) in a React app without full page reloads.

2. Step 2: Apply to given structure

   Home.js and About.js are pages; routing switches between them smoothly.

3. Final Answer:

   Routing allows switching between Home and About pages without reloading -> Option A

4. Quick Check:

   Routing = page switching without reload [OK]

Hint: Routing changes views without refreshing the whole page [OK]

Common Mistakes:

• Thinking routing bundles files together
• Believing routing changes component types
• Assuming routing disables navigation

4. You have this React code snippet:

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick="setCount(count + 1)">Increment</button>
      <p>Count: {count}</p>
    </div>
  )
}

What is the main error preventing the button from working?

medium

A. setCount should be called without parentheses

B. Missing import of React

C. Using double quotes instead of curly braces for onClick handler

D. State variable count is not initialized

Solution

1. Step 1: Check onClick syntax

   In JSX, event handlers must be passed as functions inside curly braces, not strings in quotes.

2. Step 2: Identify the error

   Here, onClick="setCount(count + 1)" uses quotes, so React treats it as a string, not a function.

3. Final Answer:

   Using double quotes instead of curly braces for onClick handler -> Option C

4. Quick Check:

   JSX event handlers need curly braces [OK]

Hint: Use curly braces for event handlers, not quotes [OK]

Common Mistakes:

• Using quotes instead of curly braces for onClick
• Forgetting to import React (less common in new versions)
• Calling setCount incorrectly

5. In a large React app, you want to keep UI components separate from business logic for easier teamwork. Which approach best supports this?

hard

A. Avoid using hooks and manage state globally only

B. Use container components to handle logic and presentational components for UI

C. Write all logic inside UI components to keep code together

D. Put all components and logic in one file to reduce imports

Solution

1. Step 1: Understand separation of concerns

   Separating UI and logic helps teams work independently and keeps code clean.

2. Step 2: Apply container and presentational pattern

   Container components manage data and logic; presentational components focus on UI rendering.

3. Final Answer:

   Use container components to handle logic and presentational components for UI -> Option B

4. Quick Check:

   Separate logic and UI with containers and presentational components [OK]

Hint: Split logic (containers) and UI (presentational) components [OK]

Common Mistakes:

• Mixing logic inside UI components makes maintenance hard
• Avoiding hooks limits React's power
• Putting everything in one file causes confusion