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

Need a 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
}

Need a 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
}

Need a 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
  );
}

Need a hint?

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