React Header and Footer

In this tutorial, you will add in a header and a footer to our React application using two React components. This will illustrate the use of multiple components put together form the application's view. You will also add in the Font Awesome icons and Bootstrap-social for use within your application. At the end of this tutorial, you will be able to:

• Use multiple components and their views to put together the view of the application
• Make use of Font Awesome icons and Bootstrap-social within your React application

Using Font Awesome Icons and Bootstrap-Social

• First use yarn or npm to fetch Font Awesome and Bootstrap-social to the project by typing the following at the prompt:
$ npm install font-awesome bootstrap-social --save

• Then, open index.js file and update it as follows to enable your application to use Font Awesome and Bootstrap Social:

Adding a Header and a Footer

• Create a new file named HeaderComponent.js and add the following to it:

• Then, add another file named FooterComponent.js and add the following to it:

Integrating Header and Footer into the React Application

• Now we open MainComponent.js and update it to integrate the header and footer into our application:

• Then update App.css to add some new CSS classes for use in our application:

(source: Front-End Web Development with React on Coursera)