React ecosystem overview - Mini Project: Build & Apply

React Ecosystem Overview

📖 Scenario: You are building a simple React app to show how different parts of the React ecosystem work together. This app will display a list of tasks and allow filtering them by status.

🎯 Goal: Build a React app that uses state, props, and effects to manage and display a list of tasks with a filter option.

📋 What You'll Learn

Create a list of tasks as initial data

Add a state variable to hold the current filter

Use a filter function to select tasks based on the filter state

Render the filtered tasks in a list with React components

💡 Why This Matters

🌍 Real World

This project shows how React components, state, and event handling work together to build interactive user interfaces.

💼 Career

Understanding React's ecosystem basics is essential for frontend development roles that use React for building web applications.

1

Create initial task data

Create a constant called tasks that is an array of objects. Each object should have id, title, and completed properties. Use these exact tasks: { id: 1, title: 'Learn React', completed: false }, { id: 2, title: 'Build a project', completed: true }, { id: 3, title: 'Read docs', completed: false }.

React

# Your code here

Hint

Use const to create the tasks array with the exact objects given.

2

Add filter state

Inside a React functional component called TaskApp, use the useState hook to create a state variable called filter with initial value 'all'. Also create the setter function called setFilter.

React

const tasks = [
  { id: 1, title: 'Learn React', completed: false },
  { id: 2, title: 'Build a project', completed: true },
  { id: 3, title: 'Read docs', completed: false }
];

function TaskApp() {
  // Your code here
}

Hint

Remember to import useState from React and use it inside TaskApp.

3

Filter tasks based on state

Inside the TaskApp component, create a constant called filteredTasks that filters the tasks array. If filter is 'completed', include only tasks where completed is true. If filter is 'active', include only tasks where completed is false. Otherwise, include all tasks.

React

const tasks = [
  { id: 1, title: 'Learn React', completed: false },
  { id: 2, title: 'Build a project', completed: true },
  { id: 3, title: 'Read docs', completed: false }
];

import React, { useState } from 'react';

function TaskApp() {
  const [filter, setFilter] = useState('all');
  // Filter tasks based on filter state
  // Your code here
}

Hint

Use Array.filter with a function that checks the filter state and returns tasks accordingly.

4

Render filtered tasks and filter buttons

Inside the TaskApp component, return JSX that renders three buttons labeled All, Active, and Completed. Each button sets the filter state to 'all', 'active', or 'completed' respectively when clicked. Below the buttons, render an unordered list <ul> with each filteredTasks item as a list item <li> showing the task's title. Use the task's id as the key for each list item.

React

const tasks = [
  { id: 1, title: 'Learn React', completed: false },
  { id: 2, title: 'Build a project', completed: true },
  { id: 3, title: 'Read docs', completed: false }
];

import React, { useState } from 'react';

function TaskApp() {
  const [filter, setFilter] = useState('all');

  const filteredTasks = tasks.filter(task => {
    if (filter === 'completed') return task.completed;
    if (filter === 'active') return !task.completed;
    return true;
  });

  return (
    // Your code here
  );
}

Hint

Use buttons with onClick handlers to change the filter state. Render the filtered tasks inside a <ul> with <li> elements.

Practice

1. Which of the following is NOT typically part of the React ecosystem?

easy

A. Express.js for backend server

B. Redux for state management

C. React Router for navigation

D. Styled Components for styling

Solution

1. Step 1: Identify React ecosystem tools

   React ecosystem includes tools like React Router, Redux, and Styled Components for frontend tasks.

2. Step 2: Recognize backend tools

   Express.js is a backend server framework, not part of React's frontend ecosystem.

3. Final Answer:

   Express.js for backend server -> Option A

4. Quick Check:

   Backend server ≠ React ecosystem [OK]

Hint: React ecosystem focuses on frontend tools, not backend servers [OK]

Common Mistakes:

• Confusing backend frameworks as React tools
• Thinking Redux is not part of React ecosystem
• Assuming all JavaScript libraries belong to React

2. Which syntax correctly imports the useState hook from React?

easy

A. import React.useState from 'react';

B. import useState from 'react';

C. const useState = require('react');

D. import { useState } from 'react';

Solution

1. Step 1: Recall ES module import syntax

   Named imports use curly braces: import { useState } from 'react';.

2. Step 2: Identify incorrect forms

   Default import without braces, require syntax, and dot notation in import are invalid here.

3. Final Answer:

   import { useState } from 'react'; -> Option D

4. Quick Check:

   Named import uses braces [OK]

Hint: Use curly braces for named imports like useState [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using CommonJS require in ES modules
• Trying to import with dot notation

3. What will be the output of this React component when rendered?

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

medium

A. Displays 'Count: 0' and increments count on button click

B. Displays 'Count: 1' initially and increments on click

C. Throws an error because useState is not imported

D. Button does nothing when clicked

Solution

1. Step 1: Analyze initial state value

   useState(0) sets count to 0 initially, so 'Count: 0' shows first.

2. Step 2: Understand button click behavior

   Clicking button calls setCount(count + 1), increasing count by 1 each click.

3. Final Answer:

   Displays 'Count: 0' and increments count on button click -> Option A

4. Quick Check:

   Initial state 0, button updates count [OK]

Hint: Initial useState value sets starting count [OK]

Common Mistakes:

• Assuming count starts at 1
• Forgetting to import useState
• Thinking button does not update state

4. Identify the error in this React Router usage:

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route path='/home' component={Home} />
    </BrowserRouter>
  );
}

medium

A. The path prop must be inside a Switch component

B. BrowserRouter must wrap only one child element

C. Route should use 'element' prop with JSX, not 'component' prop

D. Home component must be imported from 'react-router-dom'

Solution

1. Step 1: Check React Router v6 syntax

   In React Router v6, Route uses element prop with JSX, not component.

2. Step 2: Validate other props and components

   BrowserRouter can wrap multiple children; Switch is replaced by Routes; Home is user-defined, not from react-router-dom.

3. Final Answer:

   Route should use 'element' prop with JSX, not 'component' prop -> Option C

4. Quick Check:

   React Router v6 uses element prop [OK]

Hint: Use element={} in Route for React Router v6 [OK]

Common Mistakes:

• Using component prop instead of element
• Expecting Switch component in v6
• Importing user components from react-router-dom

5. You want to fetch data from an API and style the results using the React ecosystem. Which combination of tools fits best?

hard

A. Redux for data fetching and CSS Modules for styling

B. React Query for data fetching and Tailwind CSS for styling

C. React Router for data fetching and Styled Components for styling

D. Axios for styling and React Context for data fetching

Solution

1. Step 1: Identify data fetching tools in React ecosystem

   React Query is a popular library for fetching and caching API data in React apps.

2. Step 2: Identify styling tools

   Tailwind CSS is a utility-first CSS framework commonly used with React for styling.

3. Final Answer:

   React Query for data fetching and Tailwind CSS for styling -> Option B

4. Quick Check:

   React Query + Tailwind CSS = best fit [OK]

Hint: React Query handles data; Tailwind CSS handles styling [OK]

Common Mistakes:

• Using Redux for data fetching only
• Confusing React Router as data fetch tool
• Mixing styling and data fetching roles