Build, Understand, Test, and Polish a To-Do List

CO

Built by

core-check2-1784838524666

Computer Science

Build, Understand, Test, and Polish a To-Do List

Build, Understand, Test, and Polish a To-Do List

You already know how to structure HTML, target elements with CSS, and work with basic React components. Starting from your existing project files, you will add JavaScript behavior step by step until you have a polished to-do list you can explain, test, and show.

4 modules14 lessonsComputer Science

What you learn by building this

Build it yourself, get guided when you are stuck, and leave with proof you can actually show.

Learning Journey

1

Turn the Existing App into a To-Do List

3 lessons

Use the React project you already have as the starting point, keep its current structure and styling strengths, and make the first visible version of the to-do list.

2

Make the Core Actions Work

4 lessons

Build the essential interactions in small steps: add a task, mark it complete, and remove it. Each step connects a familiar UI element to one new piece of JavaScript behavior.

3

Make the List Dependable

4 lessons

Add the behaviors that make the project feel like a real tool: useful empty states, filtering, persistence, and a repeatable test routine.

4

Polish and Explain the Finished App

3 lessons

Turn the working prototype into a clear, accessible project that is pleasant to use and easy for the learner to demonstrate or maintain.

Public lesson

Inspect and Run the Real Project

Lesson 3.1 — Trace Your React App Before Changing It

You will work in the existing React project, not a practice folder. By the end, you should be able to identify:

  • how the app starts,
  • which component creates the page,
  • where the page’s styles come from,
  • and where to make one small, safe change.

Tasks

Open the React project folder in your editor and open package.json.

Tasks

Look at the "scripts" section. Find the command intended to start the app. It may be named something like dev or start.

Tasks

Run that command in the project terminal. For example, adapt this to the script name you actually found:

npm run ______

Tasks

Open the local address shown in the terminal.

Check: the existing page loads in your browser. Do not change any files yet.

Tasks

If the command fails, read the first error message and check whether dependencies are installed. If the project has a package-lock.json, the usual install command is:

npm install

Then run the start command again.

2. Locate the file that starts React

Tasks

In the project file tree, look inside src.

Tasks

Find the file that contains both:

  • an import from react-dom or react-dom/client, and
  • a render call such as createRoot(...).render(...).

Common names include main.jsx, main.tsx, index.jsx, or index.js, but use the file your project actually has.

Tasks

Write down its path:

React start file: ______________________________

Tasks

Read only the final part of that file—the part passed into .render(...).

You may see a component name such as App there. Follow its import to the file where that component is defined.

Tasks

Write down:

Top-level page component: ______________________

Tasks

Check: in your editor, you can move from the React start file to the top-level page component without guessing.

3. Trace one visible piece of the page

Tasks

Keep the running app visible in your browser. Choose one specific thing you can see, such as:

  • the page heading,
  • a navigation link,
  • a card,
  • a button,
  • or a footer.

Tasks

In the top-level component file, find the JSX that produces that visible piece. If it is not written directly there, follow the imported component that contains it.

Tasks

Record the path of the component file:

Visible piece chosen: ___________________________
Component that renders it: ______________________

Tasks

Now compare the component with the browser:

  1. Find the text or element in the JSX.
  2. Check whether its position on the page matches what the JSX suggests.
  3. Note any child component used inside it.

Tasks

Make a small trace like this in your notes:

browser heading
  -> component: __________________
  -> parent component: ____________
  -> start file: ___________________

Tasks

Check: you can point to the exact JSX line—or the child component containing it—that controls your chosen visible piece.

4. Find the styles for that piece

Tasks

Look at the component you just traced. Check whether it has:

  • a className,
  • an imported CSS file,
  • inline style information,
  • or a styling-library component.

Tasks

For example, if you find an import shaped like this, follow the path:

import "./__________.css";

Tasks

If the JSX has a class name, search the project for that class name. Use your editor’s search, or adapt this command:

grep -R "__________" src

On Windows, editor search is usually easier than the terminal command.

Tasks

Record what you find:

Stylesheet or styling file: _____________________
Selector or style name: _________________________

Tasks

Check: make one harmless style change in the correct style file—for example, change the chosen heading’s color or add a small amount of spacing. Save the file and confirm the browser updates.

Find the bug

Something's wrong — can you spot it?

If the browser does not update, refresh it once and check that you edited the selector actually used by the JSX.

5. Make one safe content change

Tasks

Return to the component that renders your chosen visible piece. Change only its displayed text.

For example, if the current JSX contains a heading, preserve its element and change only the words:

<h1>Replace this existing text</h1>

Tasks

Do not replace the whole component, rename files, or reorganize the project.

Save the file.

Tasks

Check: the new text appears in the browser, while the rest of the page still works.

Tasks

If your chosen element receives its text through a prop, find where the prop value is supplied and change that value instead. Keep the prop name and component structure unchanged.

6. Build your project map

Tasks

Fill in this map using the real paths from your project:

Start command: __________________________________

React start file:
_________________________________________________

Top-level page component:
_________________________________________________

Component I changed:
_________________________________________________

Styles file:
_________________________________________________

Browser change I made:
_________________________________________________

Explain it back

Put it in your own words

Then explain the connection in one sentence:

The app starts in __________, which renders __________;
that component uses __________ for styles.

20 more characters

Tasks

Final check: stop and start the app again. Confirm that your safe content change and style change are still visible after a fresh run.

This map is your reference for the next time you need to change the page without searching through the whole project.

Course Outline

4 modules · 14 lessons

Turn the Existing App into a To-Do List

Make the Core Actions Work

Make the List Dependable

Polish and Explain the Finished App

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.