Skip to content

Vite React: How to achieve faster and better build

Vite React: How to achieve faster and better build

In this article we will learn how to achieve faster and better build using vite react.

Vite React Introduction

Vite is a build tool and development server created specifically for modern web development workflows. It provides fast and efficient building and bundling of your JavaScript code and other assets.

React, on the other hand, is a JavaScript library for building user interfaces. It provides a declarative approach to building UI components, making it easier to manage and maintain complex UIs.

When using Vite with React, you can take advantage of Vite’s fast and efficient development server to quickly iterate on your React code changes, and use Vite’s built-in hot module replacement to see your changes in real-time without needing to manually refresh the page.

Get Started

To get started with Vite and React, you can use the create-react-app template provided by Vite, or manually set up your project to use Vite as the development server and build tool. From there, you can begin building your React components and taking advantage of Vite’s features to streamline your development workflow.

Here’s a step-by-step guide on how to set up a new React project with Vite:

  1. Install Node.js and npm (if not already installed).
  2. Create a new directory for your project and navigate to it in your terminal.
  3. Initialize a new npm project by running npm init -y.
  4. Install React and ReactDOM by running npm install react react-dom.
  5. Install Vite by running npm install vite --save-dev.
  6. Create a new file called index.html in the root directory of your project, and add the following content:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

This file will serve as the entry point for your app.

  1. Create a new directory called src in the root directory of your project, and create a new file called index.jsx inside it.
  2. Add the following content to index.jsx:
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

This is a basic React component that renders a heading with the text “Hello, World!”.

  1. Open your package.json file and add the following line to the "scripts" object:
"dev": "vite"

This will allow you to run your app in development mode using Vite.

  1. Start the development server by running npm run dev.
  2. Open your browser and navigate to http://localhost:3000. You should see your React app running with the “Hello, World!” heading displayed.

From here, you can begin building your React app using Vite to streamline your development workflow. Vite provides many features such as hot module replacement, fast builds, and support for other languages like TypeScript, making it a great choice for modern web development with React. Hope you liked the article. 🙂

Further readings

How to use React Memo: Actually improve page performance

Please share
Tags: