How to Create a React App in 2024

In 2024, there are extra methods than ever to get your React tasks began. But which one must you select?

In this text, I’m going to interrupt down all the main methods you should utilize to create a React app and which one it’s best to choose based mostly off of your challenge’s wants.

I’ll additionally embody a fast information on the finish to indicate you precisely how to decide on between every in accordance with the kind of challenge you are constructing.

Let’s get began!

❌ Why You Shouldn’t Use Create React App

In 2023, the Create React App device was deprecated, which implies that it was now not being maintained. Create React App has been the go-to method to make a brand new React challenge, but it surely’s been dethroned by a lot of totally different alternate options.

For that motive, Create React App isn’t an choice I’d advocate for creating a brand new React challenge in 2024.

💨 How to Create a React App with Vite

You could also be asking, “What’s a very good substitute for Create React App?” That choice is Vite.

Vite is right for making client-rendered React tasks that run completely within the browser.

To spin up a brand new React challenge with Vite, you simply should run a single command:

npm create vite@newest my-react-app -- --template react

The beauty of Vite is, as its identify signifies, it is a lot sooner than nearly each different. Where Vite actually shines is how rapidly it runs in growth.

Vite is unopinionated, nonetheless, which implies you’ll seemingly want to put in a collection of third-party libraries for fundamental performance, like routing and information fetching.

If your utility does not have a server or you might be utilizing an exterior API and it does not want server-side rendering, Vite is an ideal alternative.

Additionally, Vite comes with its personal config file, vite.config.js, which could require studying the documentation to be able to configure issues akin to surroundings variables, construct choices, and picture choices.

🥞 How to Create a React App with Next.js

If you are on the lookout for a method to construct a React app that offers you a single-page app (SPA) expertise however with server-side rendering and server elements, Next.js is your alternative.

Next.js is the one choice for the time being that comes with server elements, which lets you mark a element as async and await in some operation on the server.

async perform getData() {
  const res = await fetch('https://api.instance.com/...');
  return res.json();
}
 
export default async perform Page() {
  const information = await getData();
 
  return <essential>{information}</essential>;
}

The advantage of server elements is that you do not have to indicate a loading spinner in your app earlier than fetching information. Server elements can help you ship far much less JavaScript to the shopper, which results in sooner load occasions on your customers.

Server elements do require that you’ve a server, nonetheless, which means that it may possibly’t be deployed as merely as a client-rendered React app made with Vite.

Next.js is highly effective as a result of it comes with a ton of built-in options, akin to a devoted file-based routing, picture optimization, and font loading, to call a couple of.

Next.js additionally lets you faucet into server actions, which is a brand new React characteristic that lets you run server code by calling a perform.

// Server Component
export default perform Page() {
  // Server Action
  async perform create() {
    'use server'
 
    // ...
  }
 
  return (
    // ...
  )
}

Next.js additionally has route handlers, which helps you to to make HTTP requests to an API endpoint. This is one thing that client-rendered React apps cannot do, as a result of there is no server.

With all of Next.js’ advantages, it comes with a steeper studying curve. There are a lot of Next.js-specific ideas that will appear to go towards some React ideas you’ve got already realized.

For instance, inside server elements, you possibly can’t use React Hooks. This implies that you need to depend on patterns akin to storing state within the URL.

Despite the educational curve, Next.js is the most well-liked React framework and is relied upon to construct spectacular React apps that energy small startups to Fortune 500 firms.

If you need to make one thing spectacular with React, you possibly can definitely do it with Next.js.

💿 How to Create a React App with Remix

Remix, like Next.js, is a React-based framework that has a distinct give attention to net requirements to ship a greater consumer expertise. Remix lets you additionally write server and shopper React code.

Remix prides itself on serving static and dynamic content material sooner than Next.js. This means it is equally good at constructing full-stack purposes in addition to static web sites.

Instead of server elements and server actions, Remix merely has actions. Actions lets you deal with information mutations in your server, which is something that is not a GET request. Actions are simply easy capabilities with the identify motion.

To get information, you utilize easy capabilities known as loaders. React Remix makes use of React Router underneath the hood. So for those who’re snug with React Router, you may seemingly really feel at residence with Remix as properly.

export async perform loader() {
  return json(await fakeGetTodos());
}

export default perform Todos() {
  const information = useLoaderData<typeof loader>();
  return (
    <div>
      <TodoRecord todos={information} />
      <Form technique="put up">
        <enter sort="textual content" identify="title" />
        <button sort="submit">Create Todo</button>
      </Form>
    </div>
  );
}

Remix is a little more steady than Next.js and has a much less steep studying curve, nonetheless permitting you to construct simply as spectacular purposes, with the one draw back being that it is not almost as standard as Next.js. So it does not have the identical neighborhood assist and libraries round it.

But for those who do need one thing with server-side rendering and client-side rendering, Remix nonetheless stays an incredible choice to construct your subsequent React challenge.

🚀 How to Create a React App with Astro

The latest method to construct a React challenge is unquestionably probably the most performant. React apps will also be constructed utilizing a framework known as Astro.

Astro’s aim is ship content material to customers rapidly by way of one thing known as “island structure”.

In brief, which means that JavaScript is loaded solely when the consumer wants them, making for a way more optimum consumer expertise. If you need the quickest web site doable, I’d extremely advocate Astro.

Astro helps server-side rendering and is nice for Search engine marketing-focused web sites which are largely static. However, what’s neat about Astro is that it may possibly additionally run code on the server for those who select to. It’s not as standard to construct absolutely dynamic, full-stack purposes with Astro, however it’s doable to take action.

Astro can be very versatile as it is not even tied to React. You needn’t use React in anyway to construct an Astro app, and you should utilize React alongside different frameworks akin to Vue and Svelte throughout the identical app.

If you are constructing an internet site that has posts or content material that makes use of markdown or MDX, Astro needs to be your best choice. It makes use of a characteristic known as “collections” to explain all the information inside your markdown information in order that you realize precisely what content material goes to be rendered in your React elements.

Astro is gaining quickly in reputation, and it is in all probability your best option on the market in case you are inquisitive about making a static web site that does not want a database or authentication, or an internet site that’s largely static.

🤔 So What Should I Choose?

If you’ve got learn up thus far and you are still attempting to determine which framework could be finest so that you can construct a React challenge in 2024, this is the rundown:

• If you are simply beginning out and studying the React fundamentals however need to construct a easy or medium-sized challenge, keep on with Vite.
• If you desire a full-stack framework with all of the bells and whistles, like server elements, and you do not thoughts spending time studying extra ideas, try Next.js.
• If you’ve got tried Next.js and discover a few of its ideas obscure, however nonetheless need to construct a full-stack React utility, positively look into Remix.
• Finally, in case you have a static or content-driven web site, and you do not actually need a database or authentication, I’d extremely advocate utilizing Astro.

🏆 Become a Professional React Developer

Looking for the last word useful resource to study React from begin to end?

✨ Introducing: The React Bootcamp

The bootcamp options each useful resource that will help you succeed with React:

• 🎬 200+ in-depth movies
• 🕹️ 100+ hands-on React challenges
• 🛠️ 5+ spectacular portfolio tasks
• 📄 10+ important React cheat sheets
• 🥾 A whole Next.js bootcamp
• 🖼️ A whole sequence of animated movies

Click beneath to strive the React Bootcamp for your self.

Click to get began