React Setup with Vite, Bootstrap, DateFormat, and Router If you’re starting a new React project in 2025, using Vite is one of the fastest and most efficient ways to get up and running. In this guide, we’ll set up a React app with: Vite (for lightning-fast development) React Bootstrap (for ready-to-use styled components) DateFormat (for date formatting) React Router DOM (for navigation between pages) We’ll also include Bootstrap’s CSS so you can start styling immediately.
Requirements :
npm create vite@latest my-app
npm install react-bootstrap bootstrap
npm i dateformat
npm i react-router-dom
Step 1 – Create a React Project with Vite
Open your terminal and run:
npm create vite@latest my-app
Choose React or React + JavaScript when prompted.
Then, navigate into the project folder:
cd my-app
Step 2 – Install React Bootstrap and Bootstrap
npm install react-bootstrap bootstrap
Step 3 – Install DateFormat
npm install dateformat
Step 4 – Install React Router DOM
npm install react-router-dom
Step 5 – Import Bootstrap CSS
In your src/main.jsx (or src/index.jsx), add:
import 'bootstrap/dist/css/bootstrap.min.css';
Step 6 – Test the Setup
1st create: main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "bootstrap/dist/css/bootstrap.min.css";
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);
2nd Create : App.jsx
import { useState } from "react";
import MainComponent from "./components/MainComponent.jsx";
import { BrowserRouter } from "react-router-dom";
function App() {
return (
<>
<div>
<BrowserRouter>
<MainComponent />
</BrowserRouter>
</div>
</>
);
}
export default App;
3rd Create component MainComponent.jsx"
import React, { StrictMode } from "react";
import Header from "./header/Header";
import Body from "./body/Body";
import Footer from "./footer/Footer";
const MainComponent = () => {
return (
<div>
<Header />
<Body />
<Footer />
</div>
);
};
export default MainComponent;
4th Create component Body.jsx"
import React from "react";
import Menu from "./Menu";
import { Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
const Body = () => {
return (
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/menu" element={<Menu />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
};
export default Body;
Run your project:
npm run dev
