Reactjs create and include header footer files

Hello friends, welcome again on my blog. Today in this blog post, I am going to tell you, how to Reactjs create and include header footer files?

For reactjs new comers, please check the below link: Reactjs Tutorials

Here you can Free Reactjs Templates: Reactjs Free Templates

Friends here is the working code snippet for and please use carefully to avoid mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npx create-react-app reactfirstwebsite

cd reactfirstwebsite

npm start

2. Now friends we need to run below commands into our reactjs project terminal for bootstrap module:

npm install bootstrap --save

npm start

3. Now friends first we need to create new file Header.js inside src folder and add below code inside src/Header.js file:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

class Header extends React.Component
{
  render()
  {
    return (
      <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </nav>
      
    )
  }
}
export default Header;

4. Now friends first we need to create new file Footer.js inside src folder and add below code inside src/Footer.js file:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

class Footer extends React.Component
{
  render()
  {
    return (
        <div class="jumbotron text-center">
        <p>Footer</p>
      </div>
    )
  }
}
export default Footer;

5. Finally friends we need to add below code into our src/App.js file to get final output on web browser:

import React from 'react';
import './App.css';

import 'bootstrap/dist/css/bootstrap.min.css';

import Header from './Header'; //Include Heder
import Footer from './Footer'; //Include Footer

 
class App extends React.Component {
  
  render() {
    return (
     <div className="maincontainer">
      <Header></Header>
      <h1 className="mr-5 mt-5">TheRichPost</h1>
       <div className="container mb-5 mt-5">
        <h1 className="mr-5 mt-5">This is main container!!</h1>
      </div>

        <Footer></Footer>
    </div>
   )
  };
}

export default App;

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will good or bad.

Jassa

Thanks