Setup Vite & React project

Create Vite project

npm create vite@latest && npm i

Setup Git

git init && git add . && git commit -m "Initial commit"

Update Vite config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
})

We’ll add the server.port and server.open options to open Vite in port 300 by default and also to have it launch a browser when running npm run dev.

Remove unnecessary files

rm -rf src/App.css src/assets

Update App.tsx to:

import React from 'react'

const App: React.FC = () => {
  return (
    <>
      <h1 className="text-2xl font-bold">Hello World</h1>
    </>
  )
}

export default App

Update <title> of index.html

Setup project

• Setup Prettier
• Setup ESLint in TypeScript project
• Setup Tailwind in Vite
• Setup React-Bootstrap in Vite project
• Install useful tools for React project