The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
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://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/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!