Bootstrap 4.5JavascriptReactjs

Create your first page in reactjs with bootstrap

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?

How to create 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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.