Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

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.