React.js Essentials

Creating your first stateless React component

Let's take a look at the following example of how to create a React component:

var React = require('react');
var ReactDOM = require('react-dom');

var ReactClass = React.createClass({
  render: function () {
    return React.createElement('h1', { className: 'header' }, 'React Component');
  }
});
var reactComponentElement = React.createElement(ReactClass);
var reactComponent = ReactDOM.render(reactComponentElement, document.getElementById('react-application'));

Some of the preceding code should already look familiar to you, and the rest can be broken down into three simple steps:

1. Creating a React class.
2. Creating a React component element.
3. Creating a React component.

Let's take a closer look at how we can create a ...