SIGN IN SIGN UP

Set up a modern web app by running one command.

103735 0 10 JavaScript
# Create React App [![Build Status](https://dev.azure.com/facebook/create-react-app/_apis/build/status/facebook.create-react-app?branchName=master)](https://dev.azure.com/facebook/create-react-app/_build/latest?definitionId=1&branchName=master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/blob/master/CONTRIBUTING.md)
2016-07-15 20:08:21 +01:00
2016-07-16 23:54:23 +01:00
Create React apps with no build configuration.
2016-07-15 20:08:21 +01:00
- [Creating an App](#creating-an-app) How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) How to develop apps bootstrapped with Create React App.
Create React App works on macOS, Windows, and Linux.<br>
If something doesnt work, please [file an issue](https://github.com/facebook/create-react-app/issues/new).<br>
If you have questions or need help, please ask in our [Spectrum](https://spectrum.chat/create-react-app) community.
2017-02-15 23:54:14 +00:00
## Quick Overview
2016-07-15 20:08:21 +01:00
2016-07-22 02:52:28 -07:00
```sh
2018-01-08 17:03:44 +00:00
npx create-react-app my-app
cd my-app
2016-07-22 02:52:28 -07:00
npm start
```
If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that npx always uses the latest version.
2016-07-22 02:52:28 -07:00
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
2018-01-14 11:52:10 +00:00
2016-07-22 13:43:50 +01:00
Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br>
When youre ready to deploy to production, create a minified bundle with `npm run build`.
2016-07-22 02:52:28 -07:00
<p align='center'>
2019-10-20 17:06:22 +01:00
<img src='https://cdn.jsdelivr.net/gh/facebook/create-react-app@27b42ac7efa018f2541153ab30d63180f5fa39e0/screencast.svg' width='600' alt='npm start'>
</p>
2016-07-22 13:36:36 +01:00
### Get Started Immediately
You **dont** need to install or configure tools like Webpack or Babel.<br>
They are preconfigured and hidden so that you can focus on the code.
Create a project, and youre good to go.
2018-01-08 17:50:50 +00:00
## Creating an App
2016-07-22 02:52:28 -07:00
**Youll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine** (but its not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
2016-07-15 20:08:21 +01:00
To create a new app, you may choose one of the following methods:
### npx
2016-07-15 20:08:21 +01:00
2016-07-16 23:54:23 +01:00
```sh
2018-01-08 17:03:44 +00:00
npx create-react-app my-app
2016-07-16 23:54:23 +01:00
```
2016-07-15 20:08:21 +01:00
2019-10-21 12:57:35 +05:00
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a package runner tool that comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
2018-01-08 17:03:44 +00:00
### npm
```sh
npm init react-app my-app
```
_`npm init <initializer>` is available in npm 6+_
### Yarn
```sh
yarn create react-app my-app
```
_[`yarn create <starter-kit-package>`](https://yarnpkg.com/lang/en/docs/cli/create/) is available in Yarn 0.25+_
2016-07-22 14:05:00 +01:00
It will create a directory called `my-app` inside the current folder.<br>
2016-07-25 18:15:55 -07:00
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
2016-07-22 02:52:28 -07:00
```
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
2016-07-22 02:52:28 -07:00
```
No configuration or complicated folder structures, only the files you need to build your app.<br>
2018-01-08 17:03:44 +00:00
Once the installation is done, you can open your project folder:
```sh
cd my-app
```
Inside the newly created project, you can run some built-in commands:
2016-07-15 20:08:21 +01:00
### `npm start` or `yarn start`
2016-07-15 20:08:21 +01:00
2016-07-21 18:30:52 -06:00
Runs the app in development mode.<br>
2016-07-16 23:54:23 +01:00
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
2016-07-15 20:08:21 +01:00
The page will automatically reload if you make changes to the code.<br>
2016-07-22 14:03:55 +01:00
You will see the build errors and lint warnings in the console.
2016-07-22 13:36:36 +01:00
<p align='center'>
2019-10-20 17:06:22 +01:00
<img src='https://cdn.jsdelivr.net/gh/marionebl/create-react-app@9f6282671c54f0874afd37a72f6689727b562498/screencast-error.svg' width='600' alt='Build errors'>
</p>
2016-07-15 20:08:21 +01:00
### `npm test` or `yarn test`
Runs the test watcher in an interactive mode.<br>
2017-04-27 22:45:30 -05:00
By default, runs tests related to files changed since the last commit.
[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests)
### `npm run build` or `yarn build`
2016-07-15 20:08:21 +01:00
2016-07-18 23:14:08 +01:00
Builds the app for production to the `build` folder.<br>
2016-07-16 23:54:23 +01:00
It correctly bundles React in production mode and optimizes the build for the best performance.
2016-07-15 20:08:21 +01:00
2016-07-18 23:14:08 +01:00
The build is minified and the filenames include the hashes.<br>
2017-05-19 23:17:03 +01:00
Your app is ready to be deployed.
## User Guide
2016-07-22 13:11:13 +01:00
2018-10-19 20:08:48 -04:00
You can find detailed instructions on using Create React App and many tips in [its documentation](https://facebook.github.io/create-react-app/).
2016-07-22 13:11:13 +01:00
## How to Update to New Versions?
2018-10-19 20:08:48 -04:00
Please refer to the [User Guide](https://facebook.github.io/create-react-app/docs/updating-to-new-releases) for this and other information.
2016-07-22 02:52:28 -07:00
## Philosophy
- **One Dependency:** There is only one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
2016-07-22 02:52:28 -07:00
- **No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
2016-07-22 02:52:28 -07:00
- **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
2016-07-22 02:52:28 -07:00
2018-01-08 17:50:50 +00:00
## Whats Included?
2016-07-22 02:52:28 -07:00
2018-01-08 17:50:50 +00:00
Your environment will have everything you need to build a modern single-page React app:
2016-07-22 02:52:28 -07:00
2018-10-21 13:03:26 -03:00
- React, JSX, ES6, TypeScript and Flow syntax support.
- Language extras beyond ES6 like the object spread operator.
- Autoprefixed CSS, so you dont need `-webkit-` or other prefixes.
- A fast interactive unit test runner with built-in support for coverage reporting.
- A live development server that warns about common mistakes.
- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
2018-11-27 13:19:31 -08:00
- An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_)
- Hassle-free updates for the above tools with a single dependency.
2016-07-22 02:52:28 -07:00
2018-01-08 17:50:50 +00:00
Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together.
2016-07-22 02:52:28 -07:00
The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) and customize it, but then you will need to maintain this configuration.
2018-01-08 17:50:50 +00:00
## Popular Alternatives
2018-01-08 17:55:58 +00:00
Create React App is a great fit for:
- **Learning React** in a comfortable and feature-rich development environment.
- **Starting new single-page React applications.**
- **Creating examples** with React for your libraries and components.
2019-02-06 02:56:36 -05:00
Here are a few common cases where you might want to try something else:
2016-07-21 17:29:35 +01:00
- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html).
2016-07-21 17:29:35 +01:00
- If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if youre **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's Webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html).
2016-07-21 17:29:35 +01:00
- If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/).
2016-07-21 17:29:35 +01:00
- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles.
2016-07-22 14:03:55 +01:00
- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time.
2016-07-22 14:03:55 +01:00
- Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/).
2016-07-22 14:03:55 +01:00
2018-01-08 17:50:50 +00:00
All of the above tools can work with little to no configuration.
2016-07-22 14:03:55 +01:00
2018-01-08 17:50:50 +00:00
If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html).
2018-01-08 17:07:08 +00:00
## React Native
Looking for something similar, but for React Native?<br>
Check out [Expo CLI](https://github.com/expo/expo-cli).
2016-07-19 14:08:41 -07:00
## Contributing
2016-07-16 23:54:23 +01:00
We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started.
2016-07-17 21:34:01 +01:00
## Credits
2017-03-14 18:55:22 +00:00
This project exists thanks to all the people who [contribute](CONTRIBUTING.md).<br>
<a href="https://github.com/facebook/create-react-app/graphs/contributors"><img src="https://opencollective.com/create-react-app/contributors.svg?width=890&button=false" /></a>
2017-03-14 18:55:22 +00:00
2019-12-13 14:23:13 -05:00
Thanks to [Netlify](https://www.netlify.com/) for hosting our documentation.
2016-07-17 21:34:01 +01:00
## Acknowledgements
We are grateful to the authors of existing related projects for their ideas and collaboration:
- [@eanplatter](https://github.com/eanplatter)
- [@insin](https://github.com/insin)
- [@mxstbr](https://github.com/mxstbr)
## License
Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE).