Adding a header component to a fresh React App

How to add a new header component to a newly created react app.

Create a new folder in the /src directory and call it ‘components’, this is where you will keep all components (footer, button, card, panel, accordion etc):

Create a new JS file within the components folder called ‘Header.js’, please note the capital ‘H’ as this may seem unusual depending on which (if any) other language you have experience with. Capital letters are the accepted naming convention for components in react:

Remember to capitalise

Add the basic header jsx to the new Header.js file:

const Header = () => {
  return (
    <header>
       <h1>Header Component</h1>
    </header>
  )
}

export default Header

Open App.js and import the header component you have just created. Then finally inside the App function add the <Header /> component:

import Header from './components/Header'

function App() {
  return (
    <div className="container">
      <Header />
    </div>
  );
}

export default App;

If the React app is running then they newly created header will appear in the browser (If not it’ll be there when you spin it up):