CDN-hosted React
We provide CDN-hosted versions of React on our download page. These pre-built files use the UMD module format. Dropping them in with a simple <script> tag will inject the React and ReactDOM globals into your environment. It should also work out-of-the-box in CommonJS and AMD environments.
Using React from npm
You can use React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages.
1 2 3 4 5 6 7 8 | // main.jsvar React = require('react');var ReactDOM = require('react-dom');ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example')); |
Configure babel with a .babelrc file:
1 | { "presets": ["react"] } |
If you are using ES2015, you will want to also use the
babel-preset-es2015package.
To install React DOM and build your bundle with browserify:
1 2 | $ npm install --save react react-dom babelify babel-preset-react$ browserify -t [ babelify ] main.js -o bundle.js |
To install React DOM and build your bundle with webpack:
1 2 | $ npm install --save react react-dom babel-preset-react babel-loader babel-core$ webpack main.js bundle.js --module-bind 'js=babel-loader' |
If you are using ES2015, you will want to also use the
babel-preset-es2015package.
Note: by default, React will be in development mode, which is slower, and not advised for production. To use React in production mode, set the environment variable NODE_ENV to production (using envify or webpack's DefinePlugin). For example:
1 2 3 4 5 | new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") }}); |
Update your HTML file as below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <!-- No need for Babel! --> </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body></html> |
Using React from Bower
Bower is a package manager optimized for the front-end development. If multiple packages depend on a package - jQuery for example - Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load. For more info, visit http://bower.io/
If you'd like to use bower, it's as easy as:
1 | bower install --save react |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="bower_components/react/react.js"></script> <script src="bower_components/react/react-dom.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body></html> |
Using master
We have instructions for building from master in our GitHub repository.
Please login to continue.