Code Editor
Web Browser

You have learned that React.createClass must be passed an "instructions object," like this one:

{ render: function () { return <h1>Hello world</h1>; } }

You haven't learned why that object is a set of instructions! It doesn't look like instructions. How does it work?

Whenever you make a React component instance, that component inherits all of the properties on its class's instructions object.

Your instructions object has one property: a function named render. Therefore, <MyComponentClass /> has a function named render. You could make a million different <MyComponentClass /> instances, and each one would inherit this same exact render function.

This lesson's final exercise is to render your component.

Fortunately, your component already has a render function! It inherited it from MyComponentClass. Now you just have to call that render function.

To call a component's render function, pass that component to ReactDOM.render:

ReactDOM.render( <MyComponentClass />, document.getElementById('app') );

ReactDOM.render will tell <MyComponentClass /> to call its render function.

<MyComponentClass /> will call its render function, returning <h1>Hello world</h1>. ReactDOM.render will take that <h1>Hello world</h1> and add it to the virtual DOM, eventually making it visible on the screen.

Report a Bug
If you see a bug or any other issue with this page, please report it here.