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:
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:
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:
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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; |
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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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; |
Step 4: Now we have to import bootstrap in src/index.js.
src/index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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(); |