How to Create a React App in 2026

That happens because most guides on how to create a React app are still teaching a tool the React team retired. This guide covers the current way: Vite for a plain React app, Next.js when you need a full framework, and the five changes that get an existing Create React App project onto Vite in an afternoon.

Create React App was deprecated on 14 February 2025. To create a React app in 2026, run npm create vite@latest my-app -- --template react for a single-page app, or npx create-next-app@latest for a full-stack framework. Both need Node.js installed first.

Why Create React App No Longer Works

The React team deprecated Create React App on 14 February 2025. In the announcement they encouraged existing apps to move to a framework, or to a build tool such as Vite, Parcel, or RSBuild. New projects should not use it. The package still installs, but it prints a deprecation notice and receives no further development.

The reasons were practical rather than ideological. Create React App shipped in 2016 to solve a real problem: wiring up Babel, Webpack, and hot reloading by hand was hard to get right. By 2024 it had no active maintainers, its Webpack-based dev server had fallen far behind newer tools, and it had no support for React Server Components.

What Actually Broke

Problem	Effect on your project
No active maintainers	Security patches stopped landing
Webpack dev server	Cold starts measured in tens of seconds on large projects
No routing or data fetching included	Every project bolted on its own solution
Configuration locked unless you eject	Ejecting is one-way and leaves you owning the whole build
Compatibility problems with React 19	Installs fail or warn on current React versions

If you have an existing app on Create React App, nothing broke overnight. It still builds. But every month it drifts further from the ecosystem, and the migration gets slightly harder. Plan it, do not panic about it.

What You Need Before You Start

You need two things: Node.js and a code editor. Node.js runs JavaScript outside a browser and includes npm, the package manager that installs React and everything else. Visual Studio Code is the common editor choice and it is free. Nothing else is required.

Check whether Node is already installed before downloading anything:

bash

node -v
npm -v

If both print a version number, you are set. If the command is not found, install Node.js from the official site and choose the LTS release rather than the latest one. LTS stands for Long Term Support, and it is the version most libraries test against.

One warning that saves an evening. If you installed Node years ago and never updated it, update now. Vite needs a reasonably current Node version, and the error it gives when Node is too old does not say so clearly.

How to Create a React App with Vite

Vite is the closest replacement for Create React App and the right default for most people learning React. It creates a single-page app, starts in under a second, and stays out of your way. One command creates the project.

bash

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

Replace my-app with your project name. The double dash before --template is not a typo. It tells npm to pass the flag through to Vite rather than reading it itself, and leaving it out is the single most common mistake here.

If you want TypeScript, use --template react-ts instead. Starting with TypeScript is more work on day one and less work every day after, so pick it if you already know you will need it.

Start the Development Server

bash

cd my-app
npm install
npm run dev

Vite prints a local address, usually http://localhost:5173. Open it and you will see the starter page. Note that port: Create React App used 3000, so older tutorials will send you to the wrong address.

Edits to your files appear in the browser immediately, without a refresh. That is hot module replacement, and it is the main day-to-day difference you will feel compared with the old tooling.

What Each Folder Does

Folder or file	What lives there
src/	Your components and application code. You will spend nearly all your time here
src/main.jsx	The entry point that mounts React onto the page
src/App.jsx	The root component. Start editing here
public/	Static files served as-is, like images and icons
index.html	The real HTML page. Vite puts this at the project root, not inside public/
vite.config.js	Build configuration. You can ignore it for a long time
node_modules/	Installed dependencies. Never edit, never commit

That index.html position catches people moving from Create React App, where it lived in public/. In Vite it sits at the root and acts as the actual entry point for the build.

How to Create a React App with Next.js

Next.js is a framework built on React. It adds routing, data fetching, server rendering, and code splitting as part of the package rather than as separate choices you make yourself. The React team now suggests starting with a framework for production applications.

bash

npx create-next-app@latest

The command asks a series of questions: project name, TypeScript, ESLint, Tailwind, and which router to use. Accept the defaults if you are unsure. You can change nearly all of them later.

So which do you pick? Use Vite when you are learning React, building a dashboard behind a login, or shipping something where search visibility does not matter. Use Next.js when the pages need to rank in Google, when you want server rendering, or when you would otherwise spend a week assembling routing and data fetching yourself. Our comparison of Next.js and React goes deeper on that decision.

There is a third option worth knowing. React Router v7 now offers a framework mode that sits between the two, giving you routing and data loading without the full Next.js opinion set. It is a reasonable middle path for a team that finds Next.js heavy.

Writing Your First Component

A component is a JavaScript function that returns markup. Create a file inside src/, name it after the component, write a function that returns JSX, and export it. That is the entire pattern, and everything else in React builds on it.

Create src/Greeting.jsx:

jsx

// A component is just a function that returns JSX.
function Greeting() {
  return (
    <div>
      <h1>Hello, React</h1>
      <p>This is my first component.</p>
    </div>
  );
}

export default Greeting;

Then use it inside src/App.jsx:

jsx

import Greeting from './Greeting';

function App() {
  return <Greeting />;
}

export default App;

Save both files and the browser updates on its own.

Why You No Longer Import React

Older tutorials start every file with import React from 'react'. You do not need that line anymore. React 17 introduced a new JSX transform in 2020, and the build tool now handles the conversion without the import in scope.

The line is harmless if it is there. But if a tutorial insists it is required, that tutorial was written before 2021, and you should treat the rest of its advice with the same suspicion. This is a fast way to date any React guide you find, including this one.

Passing Data with Props

Props pass data from a parent component down to a child. You write them like HTML attributes when you use the component, and you read them as a parameter inside the component. Props are read-only, so a child can use a value but cannot change it.

jsx

// Default values go in the function signature.
function Greeting({ name = 'friend', role }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>You are signed in as {role}.</p>
    </div>
  );
}

export default Greeting;

Used like this:

jsx

<Greeting name="Sara" role="editor" />

Note where the default value sits. Older guides teach Component.defaultProps for this. React 19 removed defaultProps for function components, so default parameters in the function signature are now the only supported approach. Code copied from a 2023 tutorial will silently stop applying its defaults.

Adding State with useState

State is data a component owns and can change. Props come from outside and stay fixed. State lives inside and updates over time. The useState hook adds it, returning the current value and a function that updates it.

jsx

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

One rule matters more than the rest. Never change state directly. Writing count = count + 1 does nothing visible, because React tracks changes through the setter function. Always call setCount.

For state that several distant components need, React includes the Context API, and larger applications often reach for a library like Zustand or Redux Toolkit. Neither is worth adding on day one. Start with useState, and add more only when passing props through four layers starts to annoy you.

Migrating an Existing Create React App Project

Most Create React App projects move to Vite in a few hours, not days. The work is mechanical: swap the dependencies, move one HTML file, rename your entry files, change the environment variable prefix, and update your scripts. Application code usually needs no changes at all.

1. Install Vite and remove react-scripts. Add vite and @vitejs/plugin-react as dev dependencies, then uninstall react-scripts.
2. Move public/index.html to the project root. Remove the %PUBLIC_URL% placeholders and add a script tag pointing at /src/main.jsx.
3. Rename entry files to .jsx. Vite needs the extension on any file containing JSX. This is the step that produces the most confusing errors when skipped.
4. Change environment variables from REACT_APP_ to VITE_. Read them with import.meta.env.VITE_NAME rather than process.env.
5. Update your npm scripts. start becomes vite, build becomes vite build.

Then run the dev server and fix what breaks. Jest tests are the usual sticking point, since Vite pairs more naturally with Vitest. Budget an extra half day if your test suite is large, and migrate the tests separately rather than blocking the whole move on them.

Frequently Asked Questions

Is Create React App still supported in 2026?

No. The React team deprecated it on 14 February 2025 and it receives no further development. The package still installs and prints a deprecation warning. Existing projects continue to build, but they get no security patches and hit compatibility problems with React 19. New projects should use Vite or a framework instead.

What should I use instead of Create React App?

Vite for single-page applications, and Next.js when you need routing, server rendering, and data fetching handled for you. The React announcement also named Parcel and RSBuild as build tool options. Vite has the largest community and the most tutorials, which matters when you get stuck.

What is the command to create a React app now?

Run npm create vite@latest my-app -- --template react for a Vite project, or npx create-next-app@latest for Next.js. The double dash in the Vite command passes the template flag through to Vite rather than to npm, and omitting it is the most common error.

Do I need to know JavaScript before learning React?

Yes, and skipping it costs more time than it saves. You need functions, arrays, objects, destructuring, arrow functions, and array methods like map and filter. React uses these constantly. Most people who find React confusing are actually finding modern JavaScript confusing.

What is the difference between Vite and Next.js?

Vite is a build tool that creates a client-side app and leaves architecture decisions to you. Next.js is a framework that decides routing, rendering, and data fetching on your behalf. Vite gives more freedom and more assembly work. Next.js gives less freedom and much less setup.

Why does my React app open on port 5173 instead of 3000?

Because Vite uses 5173 as its default, while Create React App used 3000. Nothing is wrong. Tutorials telling you to open localhost:3000 were written for the older tooling. You can change the port in vite.config.js if you need to.

Do I still need to import React in every file?

No. React 17 introduced a new JSX transform in 2020, and build tools now handle the conversion without the import. You still import hooks and other named exports, such as import { useState } from 'react'. A tutorial that insists the plain React import is required predates 2021.

Should I learn class components or function components?

Function components with hooks. Class components still work and you will meet them in older codebases, so recognizing the syntax is useful. But every current tutorial, library, and React feature targets function components, and learning classes first makes hooks harder to understand rather than easier.

How long does it take to migrate from Create React App to Vite?

A few hours for most projects. The dependency swap, HTML move, file renames, and environment variable changes are mechanical, and application code rarely needs edits. Large Jest test suites are the exception and usually add half a day, since Vite pairs more naturally with Vitest.

Can I still use npx create-react-app?

The command runs and prints a deprecation warning. It will scaffold a project that installs unmaintained dependencies and may fail against React 19. There is no benefit to doing this in 2026, and every tutorial you find later will assume different tooling.

Where to Go Next

That terminal warning at the start of this guide is worth taking seriously, because it is the difference between learning React as it works now and learning it as it worked in 2022. The tooling changed. The library itself did not change nearly as much, which is the good news for anyone partway through an old course.

So build something small this week. A counter, then a list you can add to, then a form that saves what you type. Each one teaches state and props better than reading about them does. After that, add routing with React Router, and only then look at whether you need a framework at all.

If you are still deciding whether React fits your project, we cover what React actually is and how React and Node.js differ in more detail. And if the goal is a job rather than a project, our breakdown of what a front end engineer does sets out which of these skills employers actually check for.

One question worth sitting with before you start the next tutorial. When was it last updated, and does it tell you to import React at the top of every file?