Importing Components

Intro

So far, we’ve been writing all our components in the same file. That’s fine for experimenting, but as your app grows, it gets messy fast.

A better way is to keep each component in its own file and import it wherever you need it. This makes your code easier to organize, reuse, and maintain.

Think of it like packing your Lego blocks into separate boxes. Instead of having all the pieces jumbled together, you can keep them sorted and just grab the block you need when you’re building.

Step 1: Create a Components Folder

Inside your src folder, create a "components" folder. This may seem a little bit like overkill for a small project, but it's a good habit to keep your code organized early on.

Inside that file, add this code:

const Header = () => {
  return (
    <div>Header</div>
  )
}

export default Header

Notice the line at the bottom we are exporting the Header. This lets React know that if another file wants to use Header, it can be imported.

Step 2: Import the Component

Now go back into App.jsx and import your new component at the top of the file:

import Header from "./components/Header"

function App() {
  return (
    <div>
      <Header />
    </div>
  )
}

Save, and you should see your shiny new header on the page! Go ahead and add some styling to that header.

Your Turn

Now it’s your turn to practice. Create another component in its own file and import it into App.jsx. You can build a footer or even just a placeholder section with some placeholder text that we can flesh out later. The key here is just to get some practice!