* **[Apollo](http://dev.apollodata.com/react/):** Easy to set up and use GraphQL client.
* **[Axios](https://github.com/mzabriskie/axios):** Promise based HTTP client for the browser and node.js.
* **[Relay Modern](https://facebook.github.io/relay/docs/relay-modern.html)** - A JavaScript framework for building data-driven React applications.
* **[Relay Modern](https://facebook.github.io/relay/docs/en/new-in-relay-modern.html)** - A JavaScript framework for building data-driven React applications.
* **[razzle](https://github.com/jaredpalmer/razzle)** - Create server-rendered universal JavaScript applications with no configuration
* **[Neutrino](https://neutrino.js.org/)** - Create and build modern JavaScript applications with zero initial configuration
## Client-side Kits
## Other Starter Kits
* **[kyt](https://github.com/nytimes/kyt)** - The framework that the New York Times uses to develop and build their web properties. It's somewhat opinionated but configurable, and includes starter kits with options to build full-stack or static/client-side apps with the following tools: Express, React, static assets, latest ES, CSS/Sass Modules, Jest, code-splitting, ESLint/Prettier, StyleLint, PostCSS, and inline SVGs.
* **[React CDK](https://github.com/kadirahq/react-cdk)** - Component Development Kit for React
* **[React Static Boilerplate](https://github.com/koistya/react-static-boilerplate):** Static site generator based on React, Gulp/Webpack, React Hot Loader, Babel, postCSS/cssnext. Best suited for deploying React.js site to GitHub Pages or Amazon S3.
* **[React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate):** React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build workflow out of the box. ( React, Redux, Reselect, Redux Actions, ES6, ESLint, Webpack with integrated environment config support )
* **[Create React App + Redux + React Router](https://github.com/notrab/create-react-app-redux)**: Based on Create React App, this boilerplate comes with Redux, Redux Thunk and React Router all configured ready to go.
* **[React, TypeScript, JSPM starter-kit](https://github.com/piotrwitek/react-ts-jspm-starter-kit):** Unopinionated starter kit to build modular web apps with React & TypeScript powered by JSPM/SystemJS 0.17.X (ES2016, hot-reload, browser-sync, bundle for prod scripts)
* **[Subschema](https://subschema.github.io/subschema)** - Subschema is a Dependency Injection Library for React, included is a project starter, with webpack, karma and babel.
* **[React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate):** React Redux Boilerplate is a workflow boilerplate providing a virtual development environment and production ready build workflow out of the box. (React, Redux, Reselect, Redux Actions, ES6, ESLint, Webpack with integrated environment config support)
Ready to grow boilerplate with react-router, redux, saga, webpack 2, jest w/ coverage and enzyme.
* **[generator-enigma](https://www.npmjs.com/package/generator-enigma)** a minimalist React application scaffolding tool that sets up a ready-to-deploy web app, complete with testing via Jest and optional `react-router` boilerplate.
* **[Component-Template](https://github.com/reactstrap/component-template)** - A create-react-app based starter kit for building, documenting, & publishing React Components. Includes React Router v4, Bootstrap 4 and Reactstrap.
* **[Create React App + Redux + React Router](https://github.com/notrab/create-react-app-redux)**: Based on Create React App, this boilerplate comes with Redux, Redux Thunk and React Router all configured ready to go.
* **[react-slingshot](https://github.com/coryhouse/react-slingshot):** React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app.
* **[Este](https://github.com/este/este):** Dev stack and starter kit for functional and universal (browser, server, mobile) React applications. Everything you need to start is included.
* **[Rekit](https://github.com/supnate/rekit)** - Toolkit and boilerplates for building scalable web applications with React, Redux and React-router.
* **[webcube](https://github.com/dexteryy/Project-WebCube)** - A JS infrastructure for modern Universal JS web app/sites and static websites. Provides built-in support and simplification for Redux sub-app, reducer bundle, router, immutable, eslint + prettier, docker, monorepo and many other tools.
## Full-stack Kits
* **[kyt](https://github.com/nytimes/kyt)** - The framework that the New York Times uses to develop and build their web properties. It's somewhat opinionated but configurable, and includes starter kits with options to build full-stack or static/client-side apps with the following tools: Express, React, static assets, latest ES, CSS/Sass Modules, Jest, code-splitting, ESLint/Prettier, StyleLint, PostCSS, and inline SVGs.
* **[react-universally](https://github.com/ctrlplusb/react-universally)** A starter kit for universal react applications with React, Express, React Router (v4), ES2017, Flow, Jest, Service workers, Data-fetching and code-splitting.
* **[web-service-template](https://github.com/nandai/web-service-template)** Membership single-page application with React and TypeScript.
* **[starter-react-flux](https://github.com/SokichiFujita/starter-react-flux)** A generator for React and Flux project with Flux-Utils, Jest, Immutable.js, React Addons, Webpack, ESLint, Babel and ES2015.
* **[react-slingshot](https://github.com/coryhouse/react-slingshot):** React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app.
* **[react-async-starter](https://github.com/didierfranc/react-async-starter):** React + Redux + Fetch + ES7 Async with Webpack, Babel and hot reloading.
* **[spa-starter-kit](https://github.com/vutran/spa-starter-kit):** Full stack Docker node.js container with React, webpack, babel, sass, ESLint, React Hot Loader, Redux for a single-page application.
* **[react-flux-starter-kit](https://github.com/coryhouse/react-flux-starter-kit):** React, Flux, React Router with Browserify, Bootstrap, and ESLint, all wired up via Gulp. Includes link to associated course.
* **[exnext-quickstart](https://github.com/nkbt/esnext-quickstart):** Compilation, testing, code validation (ESLint) and hot reloading
* **[react-component-template](https://github.com/nkbt/react-component-template):** Base for npm-publisheable standalone React Components with tests, ES6 coverage
* **[Base](https://github.com/adeperio/base):** An open-source, security focused, web application starter kit.
Built with ReactJS, Flux, Express, and Postgres.
* **[Este](https://github.com/este/este):** Dev stack and starter kit for functional and universal (browser, server, mobile) React applications. Everything you need to start is included.
* **[essential-react](https://github.com/pheuter/essential-react):** A minimal skeleton for building testable React apps using ES6
* **[jspm-react](https://github.com/capaj/jspm-react):** Lightweight boilerplate on JSPM/Systemjs with hot-reloading modules for the browser
* **[kontraktor-intrinsic-jsx](https://github.com/RuedigerMoeller/InstrinsicReactJSX):** Native Java-implementation of JSX Transpiler + Bundler + Server (no nashorn or node/babel required)
* **[React-Phonegap App](https://github.com/kjda/ReactJs-Phonegap):** Phonegap App built with react using Flux.
* **[react-express-template](https://github.com/khaled/react-express-template):** Web app starter template with React, React Router, ES6 (via Babel), CoffeeScript, Express/Node.js, Semantic-UI, Gulp, LiveReload, and more
* **[generator-react-webpack](https://github.com/newtriks/generator-react-webpack):** [Yeoman](http://yeoman.io/) generator for React and Webpack.
* **[generator-react-express](https://github.com/JedWatson/generator-react-express):** [Yeoman](http://yeoman.io/) generator for React and Express with browserify, react-router and bootstrap.
* **[generator-react-component](https://github.com/JedWatson/generator-react-component):** [Yeoman](http://yeoman.io/) generator React Component projects with Gulp, Browserify, Live Reload and publishing to GitHub Pages.
* **[Racket](https://github.com/mohebifar/racket):** [Yeoman](http://yeoman.io/) generator for creating a universal React Redux web application.
* **[Genesis Skeleton](http://genesis-skeleton.com/):** Modern, opinionated, full-stack starter kit for rapid, streamlined application development (supports React).
* **[react-starter-template](https://github.com/johnthethird/react-starter-template):** Starter template with Gulp, Webpack and Bootstrap.
* **[react-browserify-template](https://github.com/petehunt/react-browserify-template):** Quick-start with Browserify.
* **[react-router-bootstrap-seed](https://github.com/okigan/react-router-bootstrap-seed):** Starter template with react-router, react-bootstrap and react-bootstrap-router (build with Gulp).
* **[generator-react-gulp-browserify](https://github.com/randylien/generator-react-gulp-browserify)** [Yeoman](http://yeoman.io/) generator for React, Gulp, Browserify and Twitter Bootstrap Sass official.
* **[generator-react-boilerplate](https://github.com/mitchbox/generator-react-boilerplate)** [Yeoman](http://yeoman.io/) generator for React, Gulp, Browserify, Bootstrap and Fluxxor.
* **[react-starterify](https://github.com/Granze/react-starterify):** React JS application skeleton using Browserify and other awesome tools
* **[fluxury](https://github.com/jim-y/fluxury):** A React/Flux starter kit with NPM (build tool), Browserify, ImmutableJS, JSXHint and React-Router completely written in ES6 (Babelify transform).
* **[react-app-boilerplate](https://github.com/christianalfoni/react-app-boilerplate):** Browserify workflow with automatic JSX transformation, dependency handling for fast builds and jasmine test environment.
* **[nuts](https://github.com/micahlmartin/nuts):** A fully-featured starter kit that uses webpack, react, flux, backbone, mongo, and kue. Includes server-side and client-side rendering.
* **[generator-rc](https://github.com/react-component/generator-rc):** A scaffold to develop react component quickly.
* **[MimosaReactBackbone](https://github.com/dbashford/MimosaReactBackboneTodoList):** A TodoMVC React/Backbone app w/ Mimosa for tooling.
* **[TodoMVC - NestedReact](https://github.com/gaperton/todomvc-nestedreact):** TodoMVC React app built with [NestedTypes](https://github.com/Volicon/NestedTypes) and [NestedReact](https://github.com/Volicon/NestedReact).
* **[react-boilerplate](https://github.com/AbeEstrada/react-boilerplate):** It is a basic React project boilerplate, it uses JSX, React Router, Browserify, Reactify (ES6) and SASS.
* **[koa-react-full-example](https://github.com/dozoisch/koa-react-full-example)** Boilerplate of a Koa React integration. Also shows a way to integrate koa-passport, react-router and react-bootstrap and a few other common modules. Includes an authentication flow.
* **[generator-simple-react-browserify](https://github.com/luisrudge/generator-simple-react-browserify)** Really simple React + Browserify app generator for yeoman. Start here if you're trying to actually learn something.
* **[react-starterkit-with-reflux](https://github.com/maisnamraju/react-starterkit)** It's a fork of [react-starterkit](https://github.com/wbkd/react-starterkit) with React, Reflux, ES6 with Babel, Fontawesome, SASS, Bootstrap SASS(not react-bootstrap), and Browserify.
* **[react-jspm](https://github.com/chenxsan/react-jspm)** Boilerplate for developing React with jspm and SystemJS module loader.
* **[electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate)** A React + Flux Electron application boilerplate based on React, Flux, React Router, Webpack, React Hot Loader
* **[Coils](https://github.com/zubairq/coils):** React/SQL full stack realtime framework in Clojure
* **[isomorphic-flux-react-react-router](https://github.com/jahrlin/isomorphic-flux-react-react-router):** A clean, unbloated starter template without any unnecessary complexity for isomorphic web apps using React, Flux, react-router. Uses gulp and webpack for builds, jest for testing and SASS for CSS preprocessing.
* **[generator-sui-react](https://github.com/SUI-Components/generator-sui-react):** A [Yeoman](http://yeoman.io/) generator for Schibsted User Interface (sui) ReactJS components. The generator provides a basic structure to start developing a component, including coding standard rules, naming conventions and a unit testing suite.
* **[Universal-routed-flux-demo](https://github.com/pierreavizou/universal-routed-flux-demo)** Example app to get started building universal flux applications, with Reactjs, React Router and es6.
* **[react-starter](https://github.com/aliakakis/react-starter/)** React starter project with ES2015, Browserify, Babel, mobservable.
* **[react-flux-flow-webpack-jest-es6](https://github.com/msalia/react-flux-flow-webpack-jest-es6)** A complete React, Flux, Flow, Webpack, Jest and ES6 starter kit.
* **[react-boilerplate](https://github.com/mxstbr/react-boilerplate)** Quick setup for performance orientated, offline-first React.js applications featuring Redux, hot-reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha.
* **[vortigern](https://github.com/barbar/vortigern)** A universal boilerplate for building web applications w/ TypeScript, React, Redux and more.
* **[react-redux-starter-kit](https://github.com/davezuko/react-redux-starter-kit):** Terrific universal Redux + React Router starter kit with Babel, SASS, hot reloading, testing, linting. Unopinionated as possible.
* **[prax](https://github.com/mitranim/prax):** Sane functional programming style architecture for realtime apps, with single immutable state, event system, reactive views, support development through pure functions.
An Universal ReactJS/Redux Boilerplate with Babel, Webpack 2, Webpack backend bundling, React Hot Loader 3, sass or cssnext, testing, linting...
* **[FUJITSU K5 Playground](https://playground.cloud.global.fujitsu.com)** A SPA and BFF generator with React, Flux, Swagger, Node.js, Material-ui, Jest, Webpack, ESLint and Babel.
* **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** CLI to initialize universal create-react-app without ejecting. Supports Server-side rendering with Code-splitting, and Node Stream rendering.
* **[EDGE Platform](https://github.com/sebastian-software/edge)** Universal React/SSR + Apollo GraphQL + JS/CSS Code Splitting + Fine-Tuned Webpack + Localization/Internationalization. Most things are external dependencies. Boilerplate available.
* **[bae](https://github.com/siddharthkp/bae)** Zero config toolkit. SSR (with data fetching) + routing + streaming + styling (with styled-components) + HMR out of the box.
The easiest way to get started on a new React project is by using a starter kit.
> Note:
>
> This page describes setting up a single-page application with everything you need for a comfortable development workflow, including linting, testing, production optimizations, and more. Full-featured tools like these require some time and disk space to install.
>
>If you are looking for a lightweight environment to experiment with React, check out the [Try React](/docs/try-react.html) page instead. **A [single HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) is enough to get you started!**
>
> Finally, if you're not building a single-page application, you can either [add React to your existing build pipeline](/docs/add-react-to-an-existing-app.html) or [use it from CDN](/docs/cdn-links.html) and [without a build step](/docs/react-without-jsx.html).
## Create React App
[Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.
```bash
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
```
If you have npm 5.2.0+ installed, you may use [npx](https://www.npmjs.com/package/npx) instead.
```bash
npx create-react-app my-app
cd my-app
npm start
```
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/) under the hood, but works with zero configuration.
When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
## Other Starter Kits
We have created [a curated list of third-party starter kits that we officially recommend](/community/starter-kits.html).
They slightly differ in their focus but are all production-ready, well-maintained, and don't require configuration to get started.
You can also check out a list of [other kits](/community/starter-kits.html#other-starter-kits) contributed by the community.
## Advanced
If you prefer to configure a project manually, see [Installing React](/docs/add-react-to-an-existing-app.html#installing-react) in the next section.
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
Here are a couple of ways to get started:
* [Try React](#trying-out-react)
* [Create a New App](#creating-a-new-application)
* [Add React to an Existing App](#adding-react-to-an-existing-application)
## Trying Out React
If you're just interested in playing around with React, you can use CodePen. Try starting from [this Hello World example code](http://codepen.io/gaearon/pen/rrpgNB?editors=0010). You don't need to install anything; you can just modify the code and see if it works.
If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.
## Creating a New Application
[Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.
```bash
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
```
If you have npm 5.2.0+ installed, you may use [npx](https://www.npmjs.com/package/npx) instead.
```bash
npx create-react-app my-app
cd my-app
npm start
```
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/) under the hood, but works with zero configuration.
When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
## Adding React to an Existing Application
You don't need to rewrite your app to start using React.
We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.
@ -138,34 +89,4 @@ Learn [how to tell if your website is serving the right version of React](/docs/
### Using a CDN
If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `umd` folders, which are hosted on a CDN:
The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
To load a specific version of `react` and `react-dom`, replace `16` with the version number.
If you use Bower, React is available via the `react` package.
#### Why the `crossorigin` Attribute?
If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
```html
<scriptcrossoriginsrc="..."></script>
```
We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `umd` folders. See the [CDN](/docs/cdn-links.html) page for links.
The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
To load a specific version of `react` and `react-dom`, replace `16` with the version number.
### Why the `crossorigin` Attribute?
If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
```html
<scriptcrossoriginsrc="..."></script>
```
We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
@ -176,7 +176,7 @@ React was originally created for the DOM but it was later adapted to also suppor
Renderers are also located in [`packages/`](https://github.com/facebook/react/tree/master/packages/):
* [React DOM Renderer](https://github.com/facebook/react/tree/master/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/top-level-api.html#reactdom) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
* [React DOM Renderer](https://github.com/facebook/react/tree/master/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/react-dom.html) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
* [React Native Renderer](https://github.com/facebook/react/tree/master/packages/react-native-renderer) renders React components to native views. It is used internally by React Native.
* [React Test Renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package.
@ -189,6 +189,21 @@ Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select
>```js
><selectmultiple={true}value={['B','C']}>
>```
## The file input Tag
In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
```html
<inputtype="file"/>
```
In React, an `<input type="file" />` works similarly to a normal `<input/>` with one important difference: **it is read-only**. (You can't set the value programmatically.) Instead, you should use the File API to interact with the files.
The following example shows how a `ref` can be used to access file(s) in a submit handler:
`embed:forms/input-type-file.js`
[Try it on CodePen](codepen://forms/input-type-file)
The easiest way to get started with React is to use [this Hello World example code on CodePen](codepen://hello-world). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
The easiest way to get started with React is to use [this Hello World example code on CodePen](codepen://hello-world). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/try-react.html) section.
Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createContainer`](https://facebook.github.io/relay/docs/api-reference-relay.html#createcontainer-static-method).
HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
In this document, we'll discuss why higher-order components are useful, and how to write your own.
- [19:15](https://youtu.be/wUpPsEcGsg8?t=19m15s) - Adding new React features
For a realistic overview of what it _feels_ like to contribute to React for the first time, check out [this entertaining ReactNYC talk](https://www.youtube.com/watch?v=GWCcZ6fnpn4).
### Meeting Notes
React team meets once a week to discuss the development of React, future plans, and priorities. You can find the meeting notes in a [dedicated repository](https://github.com/reactjs/core-notes/).
@ -62,7 +62,7 @@ We split JSX over multiple lines for readability. While it isn't required, when
### JSX is an Expression Too
After compilation, JSX expressions become regular JavaScript objects.
After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
Try React online or set up your local development environment.
## Online
If you're just interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world) or [CodeSandbox](https://codesandbox.io/s/new).
## Minimal HTML Template
If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
## Next Steps
### Quick Start
- Head over to the [Quick Start](/docs/hello-world.html) section for a step-by-step introduction to React concepts.
- Try the [Tutorial](/tutorial/tutorial.html) for a hands-on practical example.
### Complete Development Environment
The lightweight solutions above are the best fit if you are new to React or just experimenting.
When you are ready to build your first application with React, check out the install guides below. These setups are designed to get you up and running with a great developer experience and are ready for production. They include linting, testing, and optimizations built-in; however, they require more time and disk space to set up and install.
- [Add React to a New App](/docs/add-react-to-a-new-app.html): Create a new app with a fully-featured starter kit.
- [Add React to an Existing App](/docs/add-react-to-an-existing-app.html): Add React to a build system or a larger app.
Dzung Nguyen
7 years ago