1. Sketch the board before splitting files

In your project, open the component that currently renders your page (often App.jsx, App.tsx, or a page component).

First, write the board as semantic HTML in one place. Use your existing HTML knowledge:

• a main board wrapper
• one page heading
• a task-entry <form>
• a filter area with a label and controls
• a list area

Do not worry about working task submission yet. Use temporary content such as two task names so you can see the structure.

A rough shape—not code to copy exactly—might be:

<main>
  <header>
    {/* board title */}
  </header>

  {/* task-entry form */}

  {/* filter controls */}

  {/* task list with temporary tasks */}
</main>

<main>
  <header>
    {/* board title */}
  </header>

  {/* task-entry form */}

  {/* filter controls */}

  {/* task list with temporary tasks */}
</main>

Check

Run the app. You should be able to point to four clearly separate regions in the browser: title, entry, filters, and list.

If the screen feels like one long pile of elements, add spacing or borders with the CSS approach your project already uses. Keep styling minimal; the goal is to make the regions visible.

2. Give each region one job

Create a short note in your project—either in README.md or as comments near your page component.

Write one sentence for each area:

Use responsibility language, not HTML language. For example, “Task list displays the tasks it receives” is stronger than “Task list contains a <ul>.”

Then answer these two questions in your note:

1. Which component should eventually know the current filter?
2. Which component should eventually own the full collection of tasks?

For this first shell, it is reasonable for the board-level component to own both later. The entry, filter, and list components can receive what they need through props when you add behavior.

Check

Read each sentence aloud. If two areas have the same job, their boundary is probably unclear.

3. Extract the three working areas

Create a components folder if your project does not already have one. Make one file for each distinct area:

src/
  components/
    TaskEntry.(jsx or tsx)
    TaskFilters.(jsx or tsx)
    TaskList.(jsx or tsx)

src/
  components/
    TaskEntry.(jsx or tsx)
    TaskFilters.(jsx or tsx)
    TaskList.(jsx or tsx)

Keep the page-level component as the board shell. It should arrange the heading and these three components.

For each new component:

1. Move the matching HTML from the board shell into its file.
2. Give it a component name that matches the file.
3. Export it.
4. Import and render it from the board shell.

Start with TaskEntry. Its temporary version only needs the form markup you already made. Here is the amount of structure to aim for:

export default function TaskEntry() {
  return (
    <form>
      {/* your task input and submit control */}
    </form>
  );
}

export default function TaskEntry() {
  return (
    <form>
      {/* your task input and submit control */}
    </form>
  );
}

Then repeat for filters and the list. Keep temporary task text inside TaskList for now. You are not passing data yet.

Check

After extracting each component:

• the browser still shows the same region;
• saving the file updates the page;
• your editor has no unresolved import error.

If the page goes blank, inspect the terminal and browser console first. Common causes are a missing export, a mismatched import name, or forgetting to return JSX.

4. Make the boundaries visible in the UI

Use the CSS you already know to make the shell readable:

• give the overall board a constrained width;
• add vertical space between the three working areas;
• make the task list visually distinct from the controls;
• keep the heading as the page’s single <h1>.

Avoid building a polished design today. You should be able to see that TaskEntry, TaskFilters, and TaskList are separate regions without opening the source code.

Check

Resize the browser narrower and wider. The heading, form, filters, and task list should remain in a sensible top-to-bottom order.

5. Finish with your component and file map

Add a map like this to your note, but fill it in with your own final names and responsibilities:

Board page / App
├── owns: ____________________
├── renders: heading + ____________________
│
├── TaskEntry
│   └── responsible for: ____________________
├── TaskFilters
│   └── responsible for: ____________________
└── TaskList
    └── responsible for: ____________________

Board page / App
├── owns: ____________________
├── renders: heading + ____________________
│
├── TaskEntry
│   └── responsible for: ____________________
├── TaskFilters
│   └── responsible for: ____________________
└── TaskList
    └── responsible for: ____________________