How does this React example work?

Question

I'm currently trying to learn React, and maybe I'm just sleepy and missing something, but I need to ask:

In this code example(from React's "Getting Started" pages), why is "World" printed? From what I can see, where this.props.name is passed, the function is looking for children, not picking up additional text input. At least that's how I interpret the docs re: React.createElement.

This code is "working as intended", printing "Hello World"...but can anyone tell me exactly why it works? I would expect to just see "Hello", and maybe a console error about "World" not being defined. To whoever answers, thank you in advance for your explanation. ;)

var Hello = React.createClass({
 displayName: 'Hello',
 render: function() {
  return React.createElement("div", null, "Hello ", this.props.name);
 }
});

ReactDOM.render(
 React.createElement(Hello, { name: "World"}),
 container
);

Answer 1

As you can see, inside the render function, there's an additional parameter passed into the createElement function.

First parameter is the component class which you would like to instantiate and second are the props. Here we have a name prop defined with a value of "World".

Since the Hello component takes in the prop called name, it will render it out along with the "Hello " that the component is told to contain. It is a simple div element.

Here you can see the parameters defined and explained for the createElement function that React exposes.

Namely:

React.createElement("div", null, "Hello ", this.props.name);

Element Type - div
Props - null
Two children - "Hello " and this.props.name (which is "World")