Vite: Building Fast Frontend Tools for React

Vite is a frontend build tool that provides a seamless developer experience by leveraging the latest technologies. It offers excellent support for the React ecosystem, making it easy to create and manage React projects. Let’s dive into the process of creating a React app using Vite.

Getting Started

1. To create a new React app using Vite’s CLI, open your terminal and navigate to your desired projects folder:

cd path/to/your/projects/folder

1. Run the following command to create a new React app:

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

1. If prompted, confirm the installation of required packages by entering ‘y’.

2. Once the installation is complete, follow the next steps as indicated:

cd my-first-react-app
npm install
npm run dev

1. Assuming everything went smoothly, you can now access your app at localhost:5173 and see the Vite React template homepage.

Note: You can replace ‘my-first-react-app’ with your preferred project name.

Exploring the Project Structure

1. public folder: This directory holds static assets for your app, such as images and icons.

2. src folder: Contains the code that powers your app.

   • main.jsx: Entry point of the application, rendering the App component within the DOM.
   • App.jsx: Main React component of the app.
   • index.css: Styling for the app.

Let’s take a look at the code inside main.jsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• Imports React and ReactDOM.
• Imports the App component.
• Imports CSS styling.
• Creates a root element using ReactDOM.createRoot.
• Invokes the render method with the App component enclosed in React.StrictMode.

Code Cleanliness and Developer Tools

• The starter project comes with ESLint for code linting.

• Consider setting up Prettier to maintain clean code formatting.

• React Developer Tools: Install the Chrome extension for tracking and debugging React components as your projects grow in complexity.

For more information, refer to Vite’s Getting Started Page.