npm create vite@latest my-react-app --template
npm create vite@latest

 

Project Setup

1. Initialize a New Project:
   • npm init vite@latest my-project-name --template react
   • yarn create vite my-project-name --template react
   • pnpm create vite my-project-name --template react

Development

2. Install Dependencies:

   • npm install
   • yarn
   • pnpm install

3. Run Development Server:

   • npm run dev
   • yarn dev
   • pnpm dev

Build and Production

4. Build for Production:

   • npm run build
   • yarn build
   • pnpm build

5. Preview Production Build:

   • npm run preview
   • yarn preview
   • pnpm preview

Scripts (package.json)

Vite Configuration

6. Configuration File:
   • Vite configuration is typically done in vite.config.js or vite.config.ts.

Environment Variables

7. Define Env Variables:
   • Create .env, .env.local, .env.production, or .env.development files.

Adding Plugins

8. Install Plugins:
   • Install the plugin via npm/yarn/pnpm and configure it in vite.config.js.

Example: Adding React Refresh

Common Dependencies

9. React Router:

   • npm install react-router-dom
   • yarn add react-router-dom
   • pnpm add react-router-dom

10. State Management (e.g., Redux):

• npm install @reduxjs/toolkit react-redux
• yarn add @reduxjs/toolkit react-redux
• pnpm add @reduxjs/toolkit react-redux

Linting and Formatting

11. ESLint:

    • npm install eslint
    • yarn add eslint
    • pnpm add eslint
    json

    Copy code

    { "scripts": { "lint": "eslint . --ext .js,.jsx,.ts,.tsx" } }

12. Prettier:

    • npm install prettier
    • yarn add prettier
    • pnpm add prettier

Testing

13. Testing Library:
    • npm install @testing-library/react
    • yarn add @testing-library/react
    • pnpm add @testing-library/react

Typescript

14. Add TypeScript:

    • npm install typescript @types/node @types/react @types/react-dom
    • yarn add typescript @types/node @types/react @types/react-dom
    • pnpm add typescript @types/node @types/react @types/react-dom
     

    { "scripts": { "type-check": "tsc --noEmit" } }

Running Scripts

15. Run any npm script:
    • npm run <script-name>
    • yarn <script-name>
    • pnpm <script-name>

By following this cheat sheet, you can effectively manage and run your React Vite projects.