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.
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:
Once installed, we strongly recommend setting up a production build process to ensure you’re using the fast version of React in production.
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-env 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 the development version of React larger and slower so you should use the production version when you deploy the app.
Learn how to tell if your website is serving the right version of React, and how to configure the production build process most efficiently:
If you don’t want to use npm to manage client packages, the
react-dom npm packages also provide single-file distributions in
umd folders. See the CDN page for links.
© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.