For easy maintenance and a better application structure, we create a header as a component. The following example shows creating the header component and using it to display the page:

const name = 'Ranga'

function Header(props) {
   return <h1>Hello World, {props.name}</h1>
}

const page = <div className="container">
                <Header name={name}/>
             </div>

We are creating a function Header(props) function, returning the JSX for the header. We are including the header component in the page JSX expression by using <Header name={name}/>. name here is called prop. prop is a parameter we want to pass to the component. function Header(props) uses the name parameter using {props.name}.

The display does not change, but we now have a reusable component for Header.