Vite vs Create React App in 2024 (2024)

Consider using Vite for these reasons:

1. If you are a developer who has more experience in web development and if you build more complex apps, you can work with the Vite, since it speeds up development.
2. If you wish to experiment with different frameworks under a single CLI, go ahead with Vite as it has support for several frameworks.

If you are a beginner React developer, you should first try Create React App, before moving with the Vite. This is because it has zero configuration, so you don’t necessarily have to spend time setting up your project, but rather use it immediately upon creation.

For this demo, I am going to use a modern build system called Bit. It lets you design and build applications using independent components that are often composable in nature.

It lets you design, develop, build and version components in an isolated space, while keeping track of all component dependencies. If a component usage is updated, Bit will leverage its CI server — Ripple CI to automatically update all the dependencies.

By default, Bit lets you build a React App component powered using Vite:

So you can build your components using Bit, and work on them independently and leverage Ripple CI to ensure your component tree remains up to date:

Step 1: Pre-Requirements

To build a React app with Vite, use the command shown below to install Bit on your local development environment.

npx @teambit/bvm install

Then, you’ll have to create the following steps:

1. Create an account on Bit

2. Create a Bit Organization

3. Create a Bit scope

Step 2: Workspace creation

Now, use the below command to create a Bit workspace.

bit new react my-workspace --env teambit.react/react-env --default-scope anjanaOrg.demo

You can replace “yourOrgnizationName.your-scope” with your relevant Bit Organization name and the scope name. Also, you can change the workspace name by replacing “my-workspace”

A Bit workspace serves as a disposable environment dedicated to working on your Bit components.

Each Bit component contains its environment that contains all the details that need to be run independently. Therefore, Bit Workspace is only for development, not project configuration.

Now you can use the below command to launch the app.

bit start

Go to http://localhost:3000 in your browser. Currently, your workspace is empty as no component is being tracked.

Step 3: Creating a React Bit Component

Next, let’s create a simple React component that’ll be consumed in our app. This can be done using the command:

bit create react ui/input_list

Like that, you can create another component for the List and count.

After you create those components, you will see there are 5 main files in each component folder.

1. Index file: component root file.

2. Component file: Add the core business logic of the component.

3. Composition: Define component variants here.

4. Spec file: Component testing file.

5. Documentation file: Used to explain the component’s usage with live examples.

Step 4: Creating Component and Composition files.

input_list.tsx — for adding tasks to a To-Do List with user input.

import React, { useState } from 'react';
export type InputListProps = {
 onAddTask: (task: string) => void;
};
See Also
Best 4 Alternatives to Create React App
export const InputList = ({ onAddTask }: InputListProps) => {
 const [task, setTask] = useState<string>('');
 const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 setTask(e.target.value);
 };
 const handleAddTask = () => {
 if (task.trim() !== '') {
 onAddTask(task);
 setTask('');
 }
 };
 return (
 <div style={{ 
 display: 'flex', 
 flexDirection: 'column', 
 alignItems: 'center', 
 justifyContent: 'center', 
 backgroundColor: '#6495ED', 
 padding: '20px', 
 borderRadius: '8px', 
 margin: '15px'
 }}>
 <input type="text" value={task} onChange={handleInputChange} placeholder="Enter your first task..."/>
 <button type="button" onClick={handleAddTask}>Add to the To-Do List</button>
 </div>
 );
};

input_list.composition.tsx — I have used only one variant for the InputList component and it manages a list of tasks through InputList, allowing dynamic task addition.

import React, {useState} from 'react';
import { InputList } from './input_list';
export const InputComposition = () => {
 const [tasks, setTasks] = useState<string[]>([]);
 const handleAddTask = (task: string) => {
 setTasks([...tasks, task]);
 };
 return (
 <InputList onAddTask={handleAddTask} />);
};

list.tsx — Displaying tasks with styled layout, enhancing UI in web applications.

import React from 'react';
export type ListProps = {
 tasks: string[];
};
export const List = ({ tasks }: ListProps) => {
 return (
 <div style={{
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center',
 backgroundColor: '#6495ED',
 padding: '20px',
 borderRadius: '8px',
 margin: '15px',
 }}>
 <ul>
 {tasks && tasks.map((task, index) => (
 <li key={index}>
 {task}
 </li>
 ))}
 </ul>
 </div>
 );
};

list.composition.tsx- I have used only one variant for the List component and it renders a List with tasks using stateful functionality.

import React, { useState } from 'react';
import {List} from './list';
const ListComposition = () => {
 const [tasks] = useState<string[]>([]);
 return (
 <div>
 <List tasks={tasks} />
 </div>
 );
};
export default ListComposition;

list_count.tsx — Displays the number of items in a list.

export type ListCountProps = {
 tasksCount: number;
};
export function ListCount({ tasksCount }: ListCountProps) {
 return (
 <div style={{
 textAlign: 'center',
 color: '#6495ED',
 margin: '10px',
 }}>
 <p>{Number of items in the list: ${tasksCount || 0} }</p>
 </div>
 );
}

list_count.composition.tsx — I have used only one variant for the ListCount component and initializes the tasksCount state as 0 and renders ListCount with this count.

import React, { useState } from 'react';
import { ListCount } from './list_count';
export const BasicListCount = () => {
 const [tasksCount] = useState(0);
 return (
 <ListCount tasksCount={tasksCount} />
 );
}

After you have created those components successfully, you can use the below commands to create new versions for components and export components to the bit cloud.

bit tag
bit export

The above commands enable code isolation, reusability, and versioning. Also, Tagging allows you to snapshot specific versions of components, making it easy to track changes.

Step 05: Creating a React App

Currently, we are creating multiple reusable components that can be used in any project. So, let’s build a simple React app using those components.

With Bit, you can create a React app using the below command. And it will install and use Vite by default.

bit create react-app apps/react_vite_app

You can use any name for the app by replacing “react_vite_app”. This command generates a React app that works seamlessly integrating your components.

Also, you can see the vite configuration file named vite.config.js which is created by default. So, it means Vite is already installed on your app with the above command.

So, now we just need to build our app.

Then open your component file(react_vite_app.tsx) and include the below code segment into it.

import {useState} from 'react';
import { InputList } from '@anjanaorg/vite_react.ui.input_list';
import { List } from '@anjanaorg/vite_react.ui.list';
import {ListCount} from '@anjanaorg/vite_react.ui.list_count';
export function ReactViteApp() {
 const [tasks, setTasks] = useState<string[]>([]);
 const parentContainerStyle: React.CSSProperties = {
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center',
 justifyContent: 'center',
 height: '100vh',
 };
 const listContainerStyle: React.CSSProperties = {
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center',
 justifyContent: 'center',
 };
 const handleAddTask = (task: string) => {
 setTasks([...tasks, task]);
 };
 return (
 <div style={parentContainerStyle}>
 <h1>This is a Vite-React with Bit Demo</h1>
 <div style={listContainerStyle}>
 {tasks.length === 0 ? 'Your List is empty' : <List tasks={tasks} />}
 </div>
 <div style={{ display: 'flex', marginTop: '20px' }}>
 <InputList onAddTask={handleAddTask} />
 <ListCount tasksCount={tasks.length} />
 </div>
 </div>
 )
}

As you can see, I have imported and reused the components we’ve built before.

Next, launch the app by running the following command:

bit run demo

After executing this command, you’ll have the opportunity to observe your application on its live server(http://localhost:3000/).

Choosing between Vite and Create React App (CRA) is pivotal in 2024. While CRA offers simplicity and strong React support, Vite stands out for speed and flexibility.

Vite’s quick build and hot reloading, along with multi-framework support, make it ideal for larger projects. The active Vite community contributes to its growth.

If you want you can explore what we’ve built check out Bit Scope.

Thank you for reading.