How to install React

How do you install React?

React is a library, so saying install might sound a bit weird. Maybe setup is a better word, but you get the concept.

There are various ways to setup React so that it can be used on your app or site.

The current stable React release is 19 (19.3 as of September 2026). One thing changed since I first wrote this post: Create React App, the tool everybody used to scaffold a React app, was deprecated in February 2025. The React docs now tell you to start with a framework, Next.js being the first one they list, or with a build tool like Vite if you don’t want a framework. This post covers the build tool path, plus the ways to try React without installing anything.

Add React to an existing page

The simplest path is to add React to a page that already exists. This works well when React only owns part of the UI, not the whole site.

There is one thing to sort out first: JSX. The <button> syntax you write in a React component is not JavaScript, so something has to compile it. If your project already has a bundler, you’re set. If it doesn’t, the React docs suggest setting up Vite (see the next section) and pointing it at your existing page.

With that in place, install the packages:

npm install react react-dom

Then mount your app with createRoot from react-dom/client:

import { createRoot } from 'react-dom/client'
import { StrictMode } from 'react'

function Button() {
  return <button>Click me!</button>
}

const root = createRoot(document.getElementById('root'))
root.render(
  <StrictMode>
    <Button />
  </StrictMode>
)

Why two packages? React itself is independent from the browser. You can use it outside the DOM, for example with React Native. react-dom adds the browser bindings.

For a quick prototype without a bundler, you can still load React from a CDN. The old way, two script tags pointing at the UMD builds, does not work anymore: React 19 stopped publishing UMD builds. The React team recommends an ESM CDN like esm.sh instead, with a script type="module":

<div id="root"></div>

<script type="module">
  import { createElement } from 'https://esm.sh/react@19'
  import { createRoot } from 'https://esm.sh/react-dom@19/client'

  createRoot(document.getElementById('root')).render(
    createElement('h1', null, 'Hello!')
  )
</script>

No JSX here, since nothing compiles it, so we call createElement directly. That path is fine for demos. For anything you want to keep, use a build tool.

Use Vite for a client-only React app

For a modern client-only React app, Vite is the usual choice.

Vite’s latest stable is 8. It needs Node ^20.19.0 or >=22.12.0. Check your Node version first:

node -v

If you need Node, get it from https://nodejs.org. That also installs npm.

Scaffold the app:

npm create vite@latest todolist -- --template react
cd todolist
npm install
npm run dev

npm create vite@latest downloads the latest create-vite and runs it, without leaving anything installed on your system. The double dash is needed so npm passes --template react through to it (react-ts is the TypeScript variant). The tool asks two questions, which linter you want and whether to install and start right away. If you say yes to the second one, the cd, npm install and npm run dev above happen for you.

Vite creates the project folder, sets up React, and starts a local dev server. Open the URL it prints, usually http://localhost:5173.

Useful commands:

• npm run dev: start the development server
• npm run build: build production files into dist
• npm run preview: preview the production build locally

If you already have an older React app, check the version with console.log(React.version), then update:

npm install react@latest react-dom@latest

CodeSandbox

An easy way to have a React project without installing anything locally is to go to https://codesandbox.io/s and choose “React”.

CodeSandbox is a great way to start a React project without having to install it locally.

Codepen

Another great solution is Codepen.

You can use this Codepen starter project which already comes pre-configured with React, with support for Hooks: https://codepen.io/flaviocopes/pen/VqeaxB

Codepen “pens” are great for quick projects with one JavaScript file, while “projects” are great for projects with multiple files, like the ones we’ll use the most when building React apps.

One thing to note is that in Codepen, due to how it works internally, you don’t use the regular ES Modules import syntax, but rather to import for example useState, you use

const { useState } = React

and not

import { useState } from 'react'

Want me to talk about your product? You can sponsor this site.