React Setup

Admin

2 weeks ago

Required:

Install

node
npm

Step 1: Install React Router (For Navigate to pages:page link)
Open your terminal and navigate to your React project directory. Then, run the following command to install React Router:

npm install react-router-dom

1	npm install react-router-dom

Step 2: Install React Bootstrap and Bootstrap

You can install both react-bootstrap and bootstrap using npm. Open your terminal and run the following command in your project directory:

npm install react-bootstrap bootstrap

1	npm install react-bootstrap bootstrap

Now will setup

Step 1: First we will create a header, so create a folder ‘components‘ under the src folder:

src/component

1	src/component

and create a file Header.js (The first letter should be capitalised and extension could be js or JSX)

src/components/Header.js

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function Header() {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="/">MyApp</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/about">About</Nav.Link>
          <Nav.Link href="/services">Services</Nav.Link>
          <Nav.Link href="/contact">Contact</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default Header;

import React from 'react';

import { Navbar, Nav } from 'react-bootstrap';

function Header() {

return (

<Navbar.Brand href="/">MyApp</Navbar.Brand>

<Navbar.Toggle aria-controls="basic-navbar-nav" />

<Navbar.Collapse id="basic-navbar-nav">

<Nav.Link href="/">Home</Nav.Link>

<Nav.Link href="/about">About</Nav.Link>

<Nav.Link href="/services">Services</Nav.Link>

<Nav.Link href="/contact">Contact</Nav.Link>

</Nav>

</Navbar.Collapse>

</Navbar>

);

}

export default Header;

Step 2: create 2 pages Home & About, so create a folder named ‘pages‘ under ‘src‘. here we will keep our pages. (you can choose any name in place of pages)

src/pages/About.jsx

import React from 'react';

const About = () => {
  return (
    <>
    <div><h1>About us Page </h1></div>
    <div><h3>dfgdfg fghfv </h3></div>
    </>
  );
}

export default About;

import React from 'react';

const About = () => {

return (

<div><h1>About us Page </h1></div>

<div><h3>dfgdfg fghfv </h3></div>

</>

);

}

export default About;

src/pages/Home.jsx

import React from 'react';

const Home = () => {
  return (
    <>
    <div><h1>AHopme Page </h1></div>
    <div><h3>hfgoh fghfv </h3></div>
    </>
  );
}

export default Home;

import React from 'react';

const Home = () => {

return (

<div><h1>AHopme Page </h1></div>

<div><h3>hfgoh fghfv </h3></div>

</>

);

}

export default Home;

Step 3: Now we have to import both pages and header in src/App.js App.js and index.js are our main files so every component has to import here

App.js

import logo from './logo.svg';
import Header from './components/Header';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import './App.css';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
    <Header />  {/* Render the Header here */}
      <Routes>
          <Route path='/' element={<Home/>} />
          <Route path='/about' element={<About />} />          
          {/* Other components */}        
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import logo from './logo.svg';

import Header from './components/Header';

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';

import './App.css';

import About from './pages/About';

function App() {

return (

<Header /> {/* Render the Header here */}

{/* Other components */}

</Routes>

</BrowserRouter>

);

}

export default App;

Step 4: Now we have to import bootstrap in src/index.js.

src/index.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

import React from 'react';

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

import 'bootstrap/dist/js/bootstrap.bundle.min';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

Step 1: Install React Router (For Navigate to pages:page link) Open your terminal and navigate to your React project directory. Then, run the following command to install React Router:

Step 2: Install React Bootstrap and Bootstrap

Now will setup

Step 1: First we will create a header, so create a folder ‘components‘ under the src folder:

Step 2: create 2 pages Home & About, so create a folder named ‘pages‘ under ‘src‘. here we will keep our pages. (you can choose any name in place of pages)

Step 3: Now we have to import both pages and header in src/App.js App.js and index.js are our main files so every component has to import here

Step 4: Now we have to import bootstrap in src/index.js.

Step 1: Install React Router (For Navigate to pages:page link)
Open your terminal and navigate to your React project directory. Then, run the following command to install React Router: