JSFiddle
The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
Starter Pack
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://npmcdn.com/[email protected]/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>
The XML syntax inside of JavaScript is called JSX; check out the JSX syntax to learn more about it. In order to translate it to vanilla JavaScript we use <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!
Separate File
Your React JSX code can live in a separate file. Create the following src/helloworld.js.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Then reference it from helloworld.html:
<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.
Using React with npm or Bower
You can also use React with package managers like npm or Bower. You can learn more in our Package Managers section.
Next Steps
Check out the tutorial and the other examples in the starter kit's examples directory to learn more.
Good luck, and welcome!