How to create a new React App in 2024

24.11.2023 — React — 6 min read

In this article, we're going to look at the various choices we have for creating React apps moving into 2024.

We'll move in ascending order of complexity so first we'll check out the simplest and quickest options and then move on to more complicated ones.

Option #1: Online Development Environments

Online sandbox development environments are really convenient as they take away the overhead of project setup allowing you to concentrate on the actual coding part.

The most popular options here are:

All these three are recommendations mentioned in the official React documentation.

These are good options if you want to quickly try out React features and concepts without worrying about the overhead of a local development environment setup.

Option #2: Local React setup using Vite or Parcel

If you want to setup a React project locally but do not want to use a full-fledged framework then your best bet is using module bundlers like Vite or Parcel.

How to use Vite to create a new React app

Vite seems to be the current community standard for spinning up a simple React project. The React docs recommend using Vite for setting up a modular JavaScript environment that can install and run React and other fellow NPM packages.

The best feature of Vite is that it has a pre-created template for spinning up either a JavaScript or TypeScript based React project. This makes the whole setup process really straight-forward.

Lets look at how you can create a new React app project with Vite.

Run one of the below commands in your terminal.

npm create vite@latest

#or

yarn create vite

This will initialize a wizard that will prompt you some questions. The first one will be to enter a name for the project. Choose a relevant name here. For the purposes of this tutorial, lets just choose "vite-project".

The second one will be to "Select a framework". Go ahead and select "React" from the list using arrow keys.

screenshot of Terminal window showing framework options while setting up a React project using Vite.

The next question will ask you to "Select a variant". Select "JavaScript" here.

You can select TypeScript as the variant if that's your jam! Also "SWC" stands for Speedy Web Compiler which is a faster alternative to Babel.

And that's it! Your basic React setup is complete. 🎉

In the command prompt, go to the new project directory and then run npm install followed by npm run dev. This will start a Vite server on localhost. If you visit the localhost website, you should have the basic Vite+React app skeleton ready and working.

screenshot of browser showing a React app hosted on a Vite-based localhost server.

How to use Parcel to create a new React app

Parcel is also a module bundler that serves as a blazingly-fast and feature-rich front-end toolkit and is also a recommendation in the official React documentation.

Unlike Vite, it doesn't have a pre-built template for creating a new React project so there are some extra steps involved for setting one up.

Lets see how we can create a new React app with Parcel.

First run the below command:

npm init -y

Then install React and React DOM.

npm i react react-dom

Then we'll install Parcel as a dev dependency.

npm i parcel -D

Now we'll setup some boilerplate code. Create an src directory within your project folder and within it, create 3 files, index.html, index.js and App.js. Copy the below content into those files.

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Parcel App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

src/index.js

import { createRoot } from "react-dom/client";
import { App } from "./App";

const container = document.getElementById("app");
const root = createRoot(container)
root.render(<App />);

src/App.js

export function App() {
  return <h1>Hello world!</h1>;
}

Now last step, open your package.json file and add the source and then within scripts, add start and build script commands.

package.json

{
  "name": "my-project",
  ...
  "source": "src/index.html",
  ...
  "scripts": {
    ...
    "start": "parcel",
    "build": "parcel build"
  },
  ....
}

That's it! Just run npm start and the server will start running on localhost. Visit the page and you should see something like this:

screenshot of browser window showing a React app hosted on a Parcel-based localhost server.

Option #3: Frameworks

The most recommended approach mentioned in the official React docs is to use one of three popular third-party frameworks namely Next.js, Remix and Gatsby.

While you can create any type of web application with these frameworks, Next.js and Remix are full-stack frameworks used for creating web applications while Gatsby is used for building fast CMS-based websites.

These frameworks provide a solid opinionated foundation for developing React applications and come packed with all the bells and whistles you'd expect from a framework.

While they pack a lot of power, it also means that it'll take more time for you to get up to speed with how to use these frameworks as compared to just using React.

Option #4: Try React locally in the browser

The React documentation also offers the option to try and play with React locally in the browser using this HTML file as a reference.

But this is only for getting to know React basics and not really something you can use in production. Setting up a proper environment with module bundlers or using a framework is the way to go, to create production-ready React apps.

This is why even though this option is extremely simple to use, I have mentioned it towards the end of this post since there are better options available that are equally simple.

What about Create-React-App?

The React documentation seems to have stopped recommending CRA as the official way to create React apps in lieu of more feature-rich and faster options. While CRA remains functional as of now, its future is unknown. Chances are that the React team is going to re-purpose it as a "launcher". Here is a discussion between the community and React team with more information.

Hope this helps!🙏

Namaste🙏! I'm Saurabh Misra, a full-stack software developer.

I have been building software since 14 years. This blog serves as a means for me to share my knowledge and expertise with the software development community. I write tutorials based on JavaScript, PHP, SQL Server and Wordpress. If you're interested in getting notified when I write something new, you're more than welcome to subscribe to my newsletter. No spam. Unsubscribe at any time.