Today, we will see how to install & setup vite + react + typescript with bootstrap 5. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
Create Vite Project For React
Install vite via npm:
npm create [email protected]
Install vite via yarn:
yarn create vite
Select react.
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
vue
❯ react
preact
lit
svelte
Select react js with typescript.
✔ Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
react
❯ react-ts
Move to project directory and install dependencies.
cd react-project
npm install
npm run dev
Install Bootstrap 5 in react
npm install react-bootstrap bootstrap
After install import bootstrap 5 in main.tsx.
src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
You can remove index.css file.
Import react bootstrap 5 button and test.
src/App.tsx
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';
import { Button } from 'react-bootstrap';
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" className="logo" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React with ypescript + Bootstrap 5</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
<Button variant="primary">Primary</Button>{' '}
<Button variant="secondary">Secondary</Button>{' '}
<Button variant="success">Success</Button>{' '}
<Button variant="warning">Warning</Button>{' '}
<Button variant="danger">Danger</Button>{' '}
<Button variant="info">Info</Button>{' '}
<Button variant="light">Light</Button>{' '}
<Button variant="dark">Dark</Button> <Button variant="link">Link</Button>
</div>
);
}
export default App;