Different ways to Create a React Project
In a previous post, we explored how to create a React project from scratch using Webpack and Babel. While understanding the underlying configuration is essential for any architect, the modern ecosystem offers several tools that automate this setup, allowing us to focus on writing components rather than configuring build scripts.
Depending on the scale and requirements of your application, you should choose a tool that aligns with modern best practices.
The Modern Standard: Vite
Vite (French for "fast") has become the industry standard for Single Page Applications (SPAs). Unlike older bundlers that process the entire application before serving, Vite leverages native ES Modules in the browser during development. This results in nearly instant server start times and blazing-fast Hot Module Replacement (HMR).
To start a React project with Vite, run:
npm create vite@latest my-react-app -- --template reactVite is lightweight and agnostic; it supports React, Vue, Svelte, and others. It is currently the go-to tool for developers who want a fast, modern development experience without the complexity of a full-stack framework.
Note: Although Vite is a modern and powerful build tool, the React team recommends building applications using a framework. Starting from scratch may feel simple at first, but as requirements grow, you’ll eventually need to implement framework-level features such as routing, code splitting, server-side rendering (SSR), and more.
Using Full Stack Frameworks
As applications grow, developers inevitably encounter the same challenges: complex routing, efficient data fetching, server-side rendering (SSR), and performance bottlenecks. Several frameworks address these concerns using well-established patterns. When building for production, choosing a framework is not just a matter of convenience, but a strategic decision to ensure your architecture is ready for the modern web.
Next.js (App Router)
Next.js is currently the most popular React framework. It provides a "batteries-included" experience, handling SEO, image optimization, and file-based routing out of the box.
To initialize a Next.js project:
npx create-next-app@latestReact Router (v7)
React Router is the most widely used routing library in the React ecosystem and can be combined with Vite to build a full-stack React framework. It focuses on standard Web APIs and provides several ready-to-deploy templates for different JavaScript runtimes and platforms.
To start a new project using React Router v7:
npx create-react-router@latest my-appRemix
Remix is a framework that emphasizes web standards and the server-client relationship. It excels at handling data transitions and simplifies state management by using traditional HTML forms and browser behaviors.
To get started with Remix:
npx create-remix@latest