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.
If you're just interested in playing around with React, you can use CodePen. Try starting from this Hello World example code. 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, 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.
npm install -g create-react-app create-react-app hello-world cd hello-world 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 webpack, Babel and ESLint under the hood, but configures them for you.
You don't need to rewrite your app to start using React.
We recommend adding React to a small part of your application, such an individual widget, so you can see if it works well for your use case.
While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:
To install React with Yarn, run:
yarn init yarn add react react-dom
To install React with npm, run:
npm init npm install --save react react-dom
Both Yarn and npm download packages from the npm registry.
The Babel setup instructions explain how to configure Babel in many different build environments. Make sure you install
babel-preset-es2015 and enable them in your
.babelrc configuration, and you're good to go.
The smallest React example looks like this:
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
This code renders into a DOM element with the id of
root so you need
<div id="root"></div> somewhere in your HTML file.
By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.
If you use Create React App,
npm run build will create an optimized build of your app in the
UglifyJsPlugin into your production Webpack configuration as described in this guide.
Run Browserify with
NODE_ENV environment variable set to
production and use UglifyJS as the last build step so that development-only code gets stripped out.
If you don't want to use npm to manage client packages, the
react-dom npm packages also provide single-file distributions in
dist folders, which are hosted on a CDN:
<script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
<script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
To load a specific version of
15 with the version number.
If you use Bower, React is available via the