As with any project in this course you can either work locally with create-react-app or use CodeSandbox.

Go to https://codesandbox.io/s and choose React to start a new CodeSandbox React project.

Let’s talk about the app structure, and define the main components that will compose our Bill Tracker application.

If you remember the screenshots in the previous lesson, we’ll need:

  1. One component to enter a new category
  2. One component to display the categories list on top
  3. One component to list the bills table
  4. One component to display the chart
  5. One component to add a new bill

Based on what they should do, let’s give those components a proper name:

  1. AddCategory
  2. NavBar
  3. BillsTable
  4. Chart
  5. AddBill

Go on and create an empty .js file for each of those components in the src/components folder (create that folder as well).

Inside each of those files, add a simple placeholder:

import React from 'react'

export default () => {
  return <div />
}

You could also just create components as you need them, but this little analysis up front gives you a more organized approach.

Go to the next lesson