Setting Up Enviroment

 Setting Up Environment

Tools Needed for Learning

1. Nodejs
2. Visual Studio Code

Create Reactjs Project

    open command prompt and paste this line

npx create-react-app myreactjstheme

Opening you first Reactjs App

go to myreactjsthem folder

open terminal in that folder 

then try

D:/myreactjstheme> code .

Installing bootstrap package 

Run following command in terminal of folder

npm install 

npm run start

npm install react-bootstrap@next bootstrap@5.1.1

go to public index.js file and paste bootstrap css file link there in header section

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

open browser and past this url http://localhost:3000

Cleaning app & write you own code

open App.js file and replace its code with 

function App() {
  return (
    <div >
     <h1>my reactjs theme</h1>
    </div>
  );
}
export default App;

Create Nav bar for our theme

goto link below and pick a navbar you like

https://react-bootstrap.netlify.app/components/navbar/

import Navbar from 'react-bootstrap/Navbar'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'


function App() {
  return (
    <div >
      <h1>hy app</h1>
      <>
  <Navbar bg="dark" variant="dark">
    <Container>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    </Container>
  </Navbar>
  <br />
  <Navbar bg="primary" variant="dark">
    <Container>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    </Container>
  </Navbar>
  <br />
  <Navbar bg="light" variant="light">
    <Container>
    <Navbar.Brand href="#home">Navbar</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
    </Nav>
    </Container>
  </Navbar>
</>
    </div>
  );
}
export default App;

output will look like this