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
3 comments
Bhai this is very good but can you make one more video without using bootstrap.
Yes, why not.
Thank you for your comment. 🙂
Bhai koi footer me link bhi add kar do same site ka pls