Creating a React app with Vite is a straightforward process that offers fast development and optimized builds compared to creating React app through CRA command.
Vite is a build tool that focuses on speed and efficiency, making it an excellent choice for React developers. Here's a step-by-step guide to creating a React app with Vite:
Step 1: Install Node.js and npm:
Ensure you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from https://nodejs.org/.
Step 2: Install Vite Globally:
Open a terminal and install Vite globally using the following command:
npm install -g create-vite
Step 3: Create a new React app:
Create a new React app using Vite by running the following command in your terminal:
npm create vite@latest app-name -- --template react
Step 4:Run npm install to add missing dependencies
Step 5: In terminal navigate to the project directory
cd app-name
Step 6: Start the development server:
Run the following command to start the development server:
npm run dev
This will launch your React app in development mode. By default, it will be available at http://localhost:3000/.
Step 7: Explore the project structure:
Vite generates a project structure that is minimal and efficient. Key directories and files include:
src: Contains your React components and application logic.
public: Houses static assets that should be publicly accessible.
index.html: The main HTML file for your app.
main.js or main.jsx: The entry point for your application.
Step 8: Build the production version:
When you're ready to deploy your app, build the production version by running:
npm run build
This will create an optimized build in the dist directory.
Top comments (0)