In this lab we are going to practice chunking an existing site into React components. **Your task is to convert an existing static site into a React app.** In the `starter` there is a copy of the website for your reference. Chunk the HTML into different React components.

## Getting Started

1. Use create-react-app to create a new react project
- `npx create-react-app intro-to-react-lab`
2. Download the starter code [here](https://api.brainstation.io/content/link/1uqzqwwMCfpXoaFxqcicyJaRj5AydDhz7)
3. Copy the relevant HTML (and CSS!) from the starter code as JSX inside your `App.js` file.
- Don't forget to rename the HTML `class` attributes to `className`.
- You'll also want to rename `App.css` to `App.scss` and make sure you edit the `import './App.css';` file appropriately.
4. You'll also need to install SASS to make `.scss` files work out of the box.
- `npm install sass`

## Create a Header Component

1. Using the `App.js` file as an example, write a functional React component that renders the `<header>` from the static BrainStation site
2. In the `App.js` file, remove the example header
3. Replace the example header HTML with an instance of your new `Header` component.

## Create a Card Component
1. Follow the steps from the header exercise to create a React component for the `Card` component

## Create a CardList Component
1. Follow the steps from the header exercise to create a React component for the `CardList` component
2. Within the component, create a list of at least two `Card` components and display them within the list
3. Add the `CardList` component below your header in the `App` component