3 Alternative Ways to Create a React Project

create-react-app is the easy default, but it fights you when you outgrow it. Three other ways to start a React project: from scratch with webpack and Babel, with Next.js, and with Vite.

ReactJS is a popular JavaScript library for building user interfaces. According to the statistics from BuiltWith, over 11 million live sites use React. The tutorial on React's official site teaches you to set up a local development environment quickly and easily with create-react-app, so you can focus on React itself rather than the dependencies behind it, such as webpack and Babel. But create-react-app has its own drawbacks:

Difficult to customize build configurations. create-react-app encapsulates all of the modules it uses, so the project's package.json stays neat and clean. The only way to customize the build is npm run eject, which un-abstracts all of those modules — after which you have to maintain them yourself.
The application becomes bloated as it grows. Once a create-react-app project is ejected, you find a lot of modules you don't use, which slows the loading speed.

The following sections walk through three alternative ways to create a React project.

Create a React app from scratch

You can build a React app from scratch and manage the dependencies and config yourself.

Prerequisites

Node.js is installed.
NPM is installed.
A JavaScript IDE, such as VS Code, is installed.

If you don't have them yet, download and install Node.js from the Node.js site. Once Node.js is installed, npm install -g npm in a terminal installs NPM. This guide covers installing and verifying both. I'll use VS Code as the IDE here.

Step 0: Create a project folder and initialize a project

Create a project folder, such as MyReactApp, open it in a terminal, and initialize a project:

npm init -y

This creates a package.json for dependency management.

Step 1: Install the required dependencies

Open the MyReactApp folder in VS Code and install the dependencies in its terminal.

Install webpack. Webpack bundles a project's JavaScript files to minify their size:

npm i webpack webpack-cli webpack-dev-server --save-dev

That gives you webpack, webpack-cli, and webpack-dev-server.

Install Babel. Some browsers can't read JSX, so Babel compiles it to JavaScript they can:

npm i --save-dev @babel/cli babel-loader @babel/preset-env @babel/core @babel/plugin-transform-runtime @babel/preset-react @babel/eslint-parser @babel/runtime

Install React:

npm i react react-dom

Step 2: Configure Babel

Create a .babelrc file in the project root:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

Step 3: Configure webpack

Create a webpack.config.js in the project root:

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main.js",
  },
  target: "web",
  devServer: {
    port: "3000",
    static: ["./public"],
    open: true,
    hot: true,
    liveReload: true,
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
};

Step 4: Add start and build scripts to package.json

Add these to the scripts block:

"start": "webpack-dev-server",
"build": "webpack ."

And update the entry point from "main": "./index.js" to:

"main": "./src/index.js"

Step 5: Add the React files

Create a public folder in the root and an index.html inside it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>
</html>

Create a src folder in the root and an index.js inside it:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Create App.js inside src:

import React from "react";

const App = () => {
  return <div>Hello World!</div>;
};

export default App;

Step 6: Build and start the application

npm run build
npm run start

You now have a React app built from scratch, with the dependencies under your own control.

Create a React project with Next.js

If building from scratch feels too involved, Next.js is a good option. It's a React framework — more than React itself. It solves the bundler and compiler problems create-react-app solves, and it adds three rendering modes: static generation, server-side rendering, and client-side rendering. Rendering on the server can significantly improve performance, giving faster load times and a better user experience. It's also SEO-friendly, so your pages are more likely to rank well. Next.js is flexible enough for a wide variety of applications.

Prerequisites

As with building from scratch, you need Node.js and a JavaScript IDE installed.

Install Next.js

npm install -g next

Create a Next.js app

npx create-next-app@latest MyNextApp --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

A Next.js app called MyNextApp is scaffolded (create-next-app is installed if it isn't already).

Start the development server

cd MyNextApp
npm run dev

A development server starts on port 3000; view the default page at http://localhost:3000.

This is just the default example. Because Next.js extends React, you can do more than create-react-app allows — for instance, choosing between pre-rendering and client-side rendering per page. Pre-rendering includes static generation (all HTML and JavaScript generated at build time) and server-side rendering (generated on the server on each request). Pre-rendering significantly improves React's SEO. Explore it further if it interests you.

Create React with Vite

If you have a modern browser that supports native ES modules, Vite is another great tool for building a React project. It offers faster build times, a better development experience, and more efficient code splitting — and it's simple to start.

Prerequisites

Same as Next.js: Node.js, NPM, and VS Code installed.

Create a Vite project

Open a terminal, navigate to where you want the project, and run:

npm create vite@latest

This creates a new directory named after your project. Open it in VS Code; the package.json inside holds your dependencies.

Start the development server

npm run dev

This opens a browser tab at http://localhost:3000 showing a simple React app. Install more packages with npm install <package-name>, and build a production version with npm run build.

Conclusion

Each of these methods has its own strengths. Building from scratch lets you manage the packages yourself. Next.js offers a complete solution for server-rendered React and suits larger projects, or developers who want a more integrated experience. Vite gives a fast, efficient development experience on modern browsers that support ES modules, which makes it a good fit for small or medium projects where you want more control. The right choice comes down to the requirements of the project itself.