# How to install React
> Learn how to set up React, from loading it with script tags on a page to scaffolding a full project with create-react-app, CodeSandbox, or Codepen.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-12-24 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-installation/
How do you install [React](https://flaviocopes.com/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.
## Load React directly in the web page
The simplest one is to add the React [JavaScript](https://flaviocopes.com/javascript/) file into the page directly. This is best when your React app will interact with the elements present on a single page, and not actually controls the whole navigation aspect.
In this case, you add 2 script tags to the end of the `body` tag:
```html
...
...
```
> The `16.7.0-alpha.2` version in the links points to the latest Alpha of 16.7 (at the time of writing), which has Hooks available. Please change it to the latest version of React that is available.
Here we loaded both React and React DOM. Why 2 libraries? Because React is 100% independent from the browser and can be used outside it (for example on Mobile devices with React Native). Hence the need for React DOM, to add the wrappers for the browser.
After those tags you can load your JavaScript files that use React, or even inline JavaScript in a `script` tag:
```html
```
To use [JSX](https://flaviocopes.com/jsx/) you need an extra step: load [Babel](https://flaviocopes.com/babel/)
```html
```
and load your scripts with the special `text/babel` MIME type:
```html
```
Now you can add JSX in your app.js file:
```js
const Button = () => {
return
}
ReactDOM.render(, document.getElementById('root'))
```
Check out this simple Glitch example:
Starting in this way with script tags is good for building prototypes and enables a quick start without having to set up a complex workflow.
## Use create-react-app
`create-react-app` is a project aimed at getting you up to speed with React in no time, and any React app that needs to outgrow a single page will find that `create-react-app` meets that need.
You start by using [`npx`](https://flaviocopes.com/npx/), which is an easy way to download and execute [Node.js](https://flaviocopes.com/nodejs/) commands without installing them. `npx` comes with `npm` (since version 5.2) and if you don't have [npm](https://flaviocopes.com/npm/) installed already, do it now from (npm is installed with Node).
If you are unsure which version of npm you have, run `npm -v` to check if you need to update.
> Tip: check out my OSX terminal tutorial at if you're unfamiliar with using the terminal, applies to Linux as well - I'm sorry but I don't have a tutorial for Windows at the moment, but Google is your friend.
When you run `npx create-react-app `, `npx` is going to _download_ the most recent `create-react-app` release, run it, and then remove it from your system. This is great because you will never have an outdated version on your system, and every time you run it, you're getting the latest and greatest code available.
Let's start then:
```bash
npx create-react-app todolist
```
This is when it finished running:
`create-react-app` created a files structure in the folder you told (`todolist` in this case), and initialized a [Git](https://flaviocopes.com/git/) repository.
It also added a few commands in the `package.json` file, so you can immediately start the app by going into the folder and run `npm start`.
In addition to `npm start`, `create-react-app` added a few other commands:
- `npm run build`: to build the React application files in the `build` folder, ready to be deployed to a server
- `npm test`: to run the testing suite using [Jest](https://flaviocopes.com/jest/)
- `npm eject`: to eject from `create-react-app`
Ejecting is the act of deciding that `create-react-app` has done enough for you, but you want to do more than what it allows.
Since `create-react-app` is a set of common denominator conventions and a limited amount of options, it's probable that at some point your needs will demand something unique that outgrows the capabilities of `create-react-app`.
When you eject, you lose the ability of automatic updates but you gain more flexibility in the [Babel](https://flaviocopes.com/babel/) and [Webpack](https://flaviocopes.com/webpack/) configuration.
When you eject the action is irreversible. You will get 2 new folders in your application directory, `config` and `scripts`. Those contain the configurations - and now you can start editing them.
> If you already have a React app installed using an older version of React, first check the version by adding `console.log(React.version)` in your app, then you can update by running `yarn add react@16.7`, and yarn will prompt you to update (choose the latest version available). Repeat for `yarn add react-dom@16.7` (change "16.7" with whatever is the newest version of React at the moment)
## CodeSandbox
An easy way to have the `create-react-app` structure, without installing it, is to go to 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](https://codepen.io).
You can use this Codepen starter project which already comes pre-configured with React, with support for Hooks:
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
```js
const { useState } = React
```
and not
```js
import { useState } from 'react'
```