How create a new project using React + Vite + Bootstrap with TypeScript

 

Learn to install React, Vite, Bootstrap

In this article you will learn how to install a new project React using Vite and configuring Bootstrap on the latest version. 

What is vite?

Vite is a high-performance asynchronous and event-driven framework for building web applications in the Node.js runtime. It provides a fast development experience by leveraging modern JavaScript features such as ES modules and native browser support for dynamic imports. Vite is known for its quick startup time and efficient hot module replacement (HMR) capability, making it an attractive choice for developers looking to build modern web applications.

What I need? 

For use React you will need have installed node JS.

Proccess

1.- Create a new folder

If you use Linux follow this step but  If you don't use Linux you can omit this step.

Create a new folder with write permision example:

   

     sudo mkdir /home/benjamin/react-demo/

Give write permission to folder

   

     sudo chmod -R 777 /home/benjamin/react-demo/

2.- Create vite and Type script project

Run this command inside the newly created folder.

   

     npm create vite@latest

You will have to select Framework: React

You will have to select variant: TypeScript

If everything goes well, you will see this screen.

2.- Install dependencies

In this case a folder called vite-project was created

Enter to folder name and run command:

   

     npm install

After installation it will show the following:

2.- Run application

For run application type command: 

   

     npm run dev

It will show the following.

You will have to enter the url where it says local. It will show the follow screen.

You will see this folder an files structure

3.- Install bootstrap

For install bootstrap you have to type on console:

   

     npm install bootstrap

4.- Add bootstrap to main

For include bootstrap to main file you have to search file called "src/main.tsx" and import from like this.

   

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import 'bootstrap/dist/css/bootstrap.min.css' // Here bootstrap is imported

import App from './App.tsx'

createRoot(document.getElementById('root')!).render(

  <StrictMode>

    <App />

  </StrictMode>,

)

Now you can use bootstrap into your project.