This article was updated on 16th April, 2016. Specifically: installation instructions, code samples, ES5/ES6 syntax, precompiling JSX.
React is an open source library for building user interfaces. It lets you create views easily while making sure your UI stays in sync with the underlying data model. This article, targeted towards beginners, covers the basics of React and JSX syntax.
Getting Started with React
[author_more]
Probably, the easiest way to get started with React, is to include the necessary libraries from a CDN (we will do this in our examples). Alternatively, you can use npm or download the React starter kit from the official website.
To kick things off, let's create a directory for our project which contains a file named index.html:
mkdir react-test && cd react-test
touch index.html
Open index.html in your favorite editor and add the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="greeting-div"></div>
<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello, Universe</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>
Let's have a look at what's going on.
- React follows component oriented development. The general idea is to break your whole UI into a set of components. In our case we have just one component named
Greeting. In React, you create a component by callingReact.createClass(). Every component has arender()method which returns markup to render. In the above snippet we simply returned<p>Hello, Universe</p>, which is then displayed in the view. - A component doesn't do anything until it's rendered. To render a component you call
ReactDOM.render()with the component to render as the first argument. The second argument is the HTML element in which you would like to render your component. In our case we render ourGreetingcomponent into the<div>with an ID ofgreeting-div. - You might be wondering what
<greeting>really is? This syntax is known as JSX (JavaScript XML) which lets you build DOM nodes with HTML-like syntax. JSX is completely optional and you don't need it in order to use React, but it has a lot of nice features and there is no reason not to take advantage of it. - Since the browser doesn't understand JSX natively, we need to transform it to JavaScript first. This is handled by including Babel 5's in-browser ES6 and JSX transformer called
browser.js. Babel will recognize JSX code in<script type="text/babel"></script>tags and transform it into JavaScript on the fly. Transforming JSX in the browser works quite well during development. However, you will need to pre-compile your JSX code into JS before deploying to production so that your app renders faster. We will see how to do that later on.
Now you can open index.html in your browser and see the message "Hello, Universe" displayed (exciting, huh?).
Show me what the above snippet would look like without JSX.
ES5
var Greeting = React.createClass({
render: function() {
return React.createElement("p", null, "Hello, Universe");
},
});
ReactDOM.render(
React.createElement(Greeting),
document.getElementById('greeting-div')
);
ES6
class Greeting extends React.Component {
render() {
return React.createElement("p", null, "Hello, Universe");
}
}
ReactDOM.render(
React.createElement(Greeting),
document.getElementById('greeting-div')
);
Introducing Properties
React relies on unidirectional data flow. This means that data flow occurs in only one direction i.e. from parent to child via properties. These properties are passed to child components via attributes in JSX. Inside the component you can access the passed properties via the props property of the component. When the properties change, React makes sure to re-render your component so that your UI is up-to-date with the data model. Let's modify the previous snippet to show a random message every two seconds.
Continue reading %Getting Started with React and JSX%