Functional components

Here's the code for our Header.js file:

import React from 'react'

function Header() {
 return (
   <>
     <h2>Chris Newman's</h2>
     <h1>Travelogue</h1>
   </>
 )
}
export default Header

You should notice a few things: first of all, the filename ends in js, not jsx. Next, our component is a function that returns HTML, versus a class extending React.Component. While both class-based and functional components are valid in React, functional components are considered more modern when using React, especially with the latest methods to leverage state and context. We won't get into the difference between functional and object-oriented programming right now, but suffice to say there are differences to be aware of. You can find a useful resource on these differences at the end of the chapter.