You then define the methods for the component. In our example, we only have one method, and it’s called render().

Inside render() you’ll return a description of what you want React to draw on the page. In the case above, we simply want it to display an h1 tag with the text Hello world! inside it.

To get our tiny application to render on the screen we also have to use ReactDOM.render():

ReactDOM.render(<Hello/>,document.getElementById("root"));

So this is where we connect our Hello component with the entry point for the app (<div id="root"></div>). It results in the following:

The HTML’ish syntax we just looked at (<h1> and <Hello/>) is the JSX code I mentioned earlier. It’s not actually HTML, though what you write there does end up as HTML tags in the DOM.

The next step is to get our app to handle data.

Handling data

There are two types of data in React: props and state. The difference between the two is a bit tricky to understand in the beginning, so don’t worry if you find it a bit confusing. It’ll become easier once you start working with them.

The key difference is that state is private and can be changed from within the component itself. Props are external, and not controlled by the component itself. It’s passed down from components higher up the hierarchy, who also control the data.

A component can change its internal state directly. It can not change its props directly.

Let’s take a closer look at props first.

Props

Our Hello component is very static, and it renders out the same message regardless. A big part of React is reusability, meaning the ability to write a component once, and then reuse it in different use cases — for example, to display different messages.

To achieve this type of reusability, we’ll add props. This is how you pass props to a component: