The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
Create React App is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration. It requires Node 4 or higher.
Note that it has some limitations and is only useful for single-page applications. If you need more flexibility, or if you want to integrate React into an existing project, consider other options below.
If you're just getting started, you can download the starter kit. The starter kit includes prebuilt copies of React and React DOM for the browser, as well as a collection of usage examples to help you get started.
In the root directory of the starter kit, create a
helloworld.html with the following contents.
<!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> <script src="https://email@example.com/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
<script type="text/babel"> and include Babel to actually perform the transformation in the browser. Open the html from a browser and you should already be able to see the greeting!
Your React JSX code can live in a separate file. Create the following
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Then reference it from
<script type="text/babel" src="src/helloworld.js"></script>
Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.
You can also use React with package managers like npm or Bower. You can learn more in our Package Managers section.
Check out the tutorial and the other examples in the starter kit's
examples directory to learn more.
Good luck, and welcome!