Code Editor

React applications are made out of components.

What's a component?

A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML.

The terms "component," "React component," and "component instance" all refer to the same thing.

Take a look at the code below. This code will create and render a new React component:

var React = require('react'); var ReactDOM = require('react-dom'); var MyComponentClass = React.createClass({ render: function () { return <h1>Hello world</h1>; } }); ReactDOM.render( <MyComponentClass />, document.getElementById('app') );

A lot of that code is probably unfamiliar. However you can recognize some JSX in there, as well as ReactDOM.render.

We are going to unpack that code, one small piece at a time. By the end of this lesson, you'll understand how to build a React component!

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