CREATING REACT APPLICATION USING VITE.js RATHER THAN CREATE-REACT-APP (CRA)

In this article, I will examine an alternative to Create React App (CRA) for building React applications: Vite.js. I will go over Vite.js's primary advantages over CRA and outline how to use it to build a React application. This tutorial is aimed at frontend developers who currently use CRA or software engineers looking to transition to React.js with a modern build tool.

What is create-react-app (CRA)?

Create React App (CRA) is a comfortable environment for learning React, and is one of the best ways to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

It is important to know that Create React App (CRA) is a well-known, widely used tool with a sizable community that offers a straightforward and subjective setup for React development. It might not be necessary to switch if you are happy with CRA and it satisfies your needs. However, if you value performance, flexibility, and faster development times, using Vite.js with React can be a beneficial alternative.

Why VITE.js?

Vite.js is a desirable option for building web applications due to several advantages, especially when used with React.

• Lightning-fast Development Server:

The development server for Vite.js is renowned for its lightning speed. It uses native ES modules and has a powerful bundler named "esbuild" running in the background. This permits almost instantaneous hot module replacement (HMR), which speeds up loading times and improves the development process.

• Instant Start-up:

Because bundling is not done during development, Vite.js has a rapid startup time. Instead, it serves the application straight from ES native modules in the browser. Faster feedback loops and increased developer productivity result from the elimination of time-consuming packaging and rebuilding operations.

• Improved Build Process:

By utilizing the strengths of native ES modules, Vite.js improves the build process. It provides lightning-fast tree-shaking, minification, and bundling, which leads to lower bundle sizes and better application performance.

• Flexible Configuration:

Vite.js offers a very flexible and adjustable build workflow. It provides a straightforward and user-friendly configuration file that enables you to adjust several features of your project, including build targets, file resolutions, proxying, and more. This flexibility enables you to customize the build process to your unique needs and optimize your application accordingly.

Difference between vite.js and create-react-app

TABLE 1.

Prerequisites

1. Vite requires Node.js version 14.18 or higher.

   You can check if the node is installed by typing the following command.

2.  $node --version
    # v18.12.0
   
    $node -v
    # v18.12.0
   

3. Make sure npm is installed. (After installing Node, npm is been installed automatically.)

   you can check npm by using the following command:

    $npm --version
    # 8.19.4
   
    $npm -v
    # 8.19.4
   

Using Vite to build React App

There are several JavaScript package managers you can use to create your React project using Vite. This package manager includes npm, yarn, and pnpm. A package manager is a tool that allows you to track the dependencies of your project to other packages, which will include the names and versions.

Using npm commands

# make sure you check your node and npm versions to be sure they are installed
npm create vite@latest
# npm 6.x
npm create vite@latest my-react-app --template react
# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react

# next step
cd my-react-app
npm install
npm run dev

Using yarn command

# yarn
yarn create vite
# adding a templete 
yarn create vite my-react-app --template react

cd my-react-app
yarn install
yarn run dev

using pnpm commands

# pnpm
pnpm create vite 
pnpm create vite my-react-app --template react

cd my-react-app
pnpm install
pnpm run dev

See create-vite for more details on each supported template: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.

conclusion

In conclusion, you've known why I've chosen to use Vite.js for creating REACT Apps over CRA, by following this guide, frontend developers can transition from Create React App to Vite.js, experiencing faster development times and optimized bundling. Vite.js offers a modern and flexible build tool for React applications, empowering developers to build performant and efficient web experiences.

Reference

1. Vite

2. esbuild

3. Rollups

4. Vite templates

Thank you for spending time going through my article. Kindly like and share for others to benefit from the good side of Vite.js. You can give me a follow on Twitter, LinkedIn, and GitHub. Leave all your comments and suggestions in the comment section. Let's connect and share more ideas.