DEV Community

Cover image for Build A React Component with Vite
Vishal singh
Vishal singh

Posted on

Build A React Component with Vite

React

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks.

Vite

Vite is a next-generation, front-end tool that focuses on speed and performance. It consists of two major parts: A development server that provides rich feature enhancements over native ES modules: fast Hot Module Replacement (HMR), pre-bundling, support for typescript, jsx, and dynamic import.

Why Vite

Vite is a rapid development tool for modern web projects.
It focuses on speed and performance by improving the development experience.

Image description

Compatibility Note:
Vite requires Node.js version 18+. 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

Step-by-Step Guide(React + Vite)

React with Vite is a powerful combination for building fast and efficient web applications. Vite is a build tool that focuses on speed and development experience, utilizing ES modules for faster builds. Here's a basic guide on how to set up a React project with Vite:

  1. Create a new React project:

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + React project, run:



npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

Next Step:
Image description

Next Step:
Image description

Image description

  1. Install Vite: Once you have a React project set up, navigate into the project directory and install Vite:


npm install
Enter fullscreen mode Exit fullscreen mode
  1. Configure Vite for React: Vite has built-in support for React, so you don't need any additional configuration for basic usage. However, you can use a 'vite.config.js' file in the project root for custom configurations if needed.

vite.config.js:



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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})
Enter fullscreen mode Exit fullscreen mode
  1. Modify package.json scripts: Update the 'scripts' section in your 'package.json' file to use Vite for development:

package.json:



{
  "name": "react-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.1.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

  1. Move React entry file (optional):
    By default, Vite expects the entry point of your application to be index.html. If your React project's entry point is index.js or something else, you may need to move it to index.html. Alternatively, you can configure Vite to use a different entry point.

  2. Start the development server:
    Now you can start the development server with Vite by running:



npm run dev
Enter fullscreen mode Exit fullscreen mode

This will start a local development server with hot module replacement (HMR) enabled for fast development.

  1. Build your project: When you're ready to build your project for production, you can run:


npm run build
Enter fullscreen mode Exit fullscreen mode

This will generate an optimized production build of your React application in the dist directory.

With these steps, you should have a basic React project set up with Vite, ready for development and production deployment.
You can check the Vite documentation for more advanced configurations and optimizations(https://vitejs.dev/guide/).

Top comments (0)