1.4 Header component

Let’s create our first React component, Header. The Header component is simply a black bar with the Tesla logo and text.

Create the src/components/Header directory, create a Header.js file in it, and enter the following code:

Press + to interact
import React from 'react';
import './Header.css';
import logoUrl from '../../assets/logo.svg';
const Header = () => (
  <div className="header">
    <img src={logoUrl} alt="Tesla" />
  </div>
)
export default Header;

Here, the component is in the form of a function (ES6 Arrow Function). A component declared in this form is called a functional component. If there is no state and the lifecycle method is not needed, it is a good pattern to declare it as a function type. Functional components are suitable for Presentational Component because they have no state and they depend only on the props that is received from higher components.

1.4.1 Header Component Style

Create a Header.css file in the src/components/Header directory and type the following style:

Press + to interact
.header {
  padding: 25px 0;
  text-align: center;
  background: #222;
}
.header img {
  width: 100px;
  height: 13px;
}

There are a number of ways to apply styles to components, but here we will create each component directory in the src/components directory and pair js and css files each time we create a component.

1.4.2 Import Header component in App Container

Now that you’ve created the Header component, let’s use import in the entry point App.js.

Press + to interact
import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />    
      </div>
    );
  }
}
export default App;

When you save all the modified files, they will be updated automatically and you should see the Tesla logo as follows:

<?xml version="1.0" ?>
<svg width="1600px" height="208px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 13" enable-background="new 0 0 100 13" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M0,0c0.3,1.1,1.3,2.3,2.6,2.6h4.1l0.2,0.1V13h2.5V2.7l0.2-0.1h4.1c1.4-0.4,2.3-1.5,2.6-2.6v0L0,0L0,0z"/>
	<path fill="#FFFFFF" d="M77.8,13c1.3-0.5,2-1.5,2.2-2.6H68.7l0-10.5l-2.5,0v13H77.8z"/>
	<path fill="#FFFFFF" d="M47.3,2.6h9C57.6,2.2,58.8,1.2,59,0L44.8,0v7.7h11.6v2.7l-9.1,0c-1.4,0.4-2.6,1.4-3.2,2.6l0.7,0H59V5.2
		H47.3V2.6z"/>
	<polygon fill="#FFFFFF" points="85.4,5.2 85.4,13 88,13 88,7.8 97.1,7.8 97.1,13 99.7,13 99.7,5.2"/>
	<path fill="#FFFFFF" d="M25.2,2.6h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,1.2,23.9,2.3,25.2,2.6"/>
	<path fill="#FFFFFF" d="M25.2,7.8h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,6.3,23.9,7.5,25.2,7.8"/>
	<path fill="#FFFFFF" d="M25.2,13h9.7c1.3-0.3,2.4-1.5,2.6-2.6h-15C22.9,11.6,23.9,12.8,25.2,13"/>
	<path fill="#FFFFFF" d="M87.7,2.6h9.7c1.3-0.3,2.4-1.5,2.6-2.6H85C85.3,1.2,86.3,2.4,87.7,2.6"/>
</g>
</svg>