Many of you may have been creating a React app for years using the following method:
npx create-react-app my-app
cd my-app
npm start
Unfortunately, this method is now deprecated. If you visit the official React website, you'll read the following recommendation: "If you want to build a new app or website with React, we recommend starting with a framework."
But what if you don't want to use a framework? What if you only need React for client-side rendering components in your monolithic application? Or perhaps you prefer building things from scratch and want to avoid dealing with framework-associated tooling (some of which can be costly and might seem to push Next.js and Vercel products)?
The solution is simple: use a build tool.
Unlike the React team, I'll advocate solely for Vite because it’s the easiest tool and gets the job done efficiently. The Vite team continuously works on improving build and development server speeds, along with many other features. Without further ado, here's how you can create a new React app using Vite:
Steps to Create a React App with Vite:
1. Go to the directory where you plan to store your projects:
cd ~/Projects
2. Start scaffolding your React app:
npm create vite@latest
3. Follow the prompts. First, you’ll be asked for the app name, and a new directory with the same name will be created. Then, you’ll need to select a framework—in this case, choose React.
4. Next, you'll choose a variant. The options include:
- TypeScript
- TypeScript + SWC
- JavaScript
- JavaScript + SWC
- React Router v7
5. Finally, you’ll be prompted to decide whether you want a Git repository initialized and to set npm as the dependency manager. Once the dependencies are installed, you can now navigate to the project directory and run:
cd [your-app-dir]
npm run dev
That's it! Your new React App is up and running.