Vite vs Create React App: Vite + React Project Setup
What is CRA? -CRA stands for “Create React App.” It is an open-source tool and a set of pre-configured templates and scripts that simplify the process of setting up and building React applications. Create React App is developed and maintained by the React team at Facebook.
What is Vite? — Vite is a build tool and development server for modern web development, primarily focused on JavaScript and TypeScript frameworks like Vue, React, and Svelte. It was created by Evan You, the same individual who created the Vue.js framework. Vite is designed to provide a highly efficient and fast development experience.
Why Vite Is Better Than CRA ?
- Faster Development: Vite has a significantly faster development server , while CRA is slower.
- Efficient Builds: Vite produces smaller and faster production builds.
- Flexible Configuration: Vite offers a more customizable and intuitive configuration system.
- ESM Support: Vite uses native ES modules for better modern browser compatibility.
- Simplified Migration: Upgrading within Vite versions is usually smoother than CRA version migrations.
- Active Development: Vite is actively developed with a focus on improving developer experience and build processes.
React js Project Setup With Vite-
- Step1: npm create vite@latest
After entring above command in terminal you will have space to type your react.js ‘project name’.
2. Step 2 : After entering project name and hiting enter, You will see bellow options in the terminal, here with the help of down arrow select ‘React’ and hit enter.
3. Step 3: Select Typescript or Javascript from given options as per your project requirement.
Your React app is almost ready now, use 3 commands given bellow to get your react app up and running.
a) cd react-app
b) npm install
c) npm run dev
This is how your app will look like.
Follow me here —
Twitter- https://twitter.com/rahulmoreweb3