Create your first page in reactjs with bootstrap

Hello to all, welcom to therichpost.com. Today in this post, I will tell you, how to Create your first page in reactjs with bootstrap?

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Post Working:

Guys in this post, I am creating my first demo page in reactjs with bootstrap, For better understanding please watch above video.

Here is the code snippet and please use carefully:

1. Firslty, we need fresh reactjs setup and for this we need to run below commands into our terminal and also we have latest node installed on our system:

npx create-react-app reactfirstpage

cd reactfirstpage

npm start

2. Now we need to run below command to get bootstrap modules into our reactjs application:

npm install bootstrap --save

3. Finally, we need to add below code inside our src/App.js file to get final output on browser:

import React from 'react';

import './App.css';
//Bootstrap caaling
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="MainDiv">
    <div class="jumbotron text-center bg-sky">
        <h3>Reactjs</h3>
        
      </div>
      <nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" >Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" >About</a>
          </li>
        </ul>
      </nav>
      <div className="container">
        <h1>First Page</h1>
      </div>
      </div>
  );
}

export default App;

Now we are done with first page in reactjs with bootstrap. If you have any doubt then please watch above attached video because I make video for better understanding.

Guys feel free to ask queries and share your views below. Guys you can also send me your suggestions and requirements and then I wake more posts and videos on your suggestions and requirements.

Jassa

Thanks