React Getting started with React Hello World
Example
Without JSX
Here's a basic example that uses React's main API to create a React element and the React DOM API to render the React element in the browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- Include the React and ReactDOM libraries -->
<script src="https://fb.me/react-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
// create a React element rElement
var rElement = React.createElement('h1', null, 'Hello, world!');
// dElement is a DOM container
var dElement = document.getElementById('example');
// render the React element in the DOM container
ReactDOM.render(rElement, dElement);
</script>
</body>
</html>
With JSX
Instead of creating a React element from strings one can use JSX (a Javascript extension created by Facebook for adding XML syntax to JavaScript), which allows to write
var rElement = React.createElement('h1', null, 'Hello, world!');
as the equivalent (and easier to read for someone familiar with HTML)
var rElement = <h1>Hello, world!</h1>;
The code containing JSX needs to be enclosed in a <script type="text/babel"> tag. Everything within this tag will be transformed to plain Javascript using the Babel library (that needs to be included in addition to the React libraries).
So finally the above example becomes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- Include the React and ReactDOM libraries -->
<script src="https://fb.me/react-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<!-- Include the Babel library -->
<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// create a React element rElement using JSX
var rElement = <h1>Hello, world!</h1>;
// dElement is a DOM container
var dElement = document.getElementById('example');
// render the React element in the DOM container
ReactDOM.render(rElement, dElement);
</script>
</body>
</html>
