Earlier I mentioned that one of the benefits of using React

is that it's component based.

You create your UI as individual self contained components.

But we're not going to start off by writing components.

You see, at its core, React is only a library for creating and

updating HTML elements in your UI, that's all it does.

So to better understand how React creates UI,

we're going to begin using the React API to create React elements.

Which are the smallest building blocks of React apps.

Once you have a basic understanding of how React describes and

creates elements in your UI,

it will be a smoother transition into understanding components and writing JSX.

The special syntax React uses to create elements and use components.

React provides the createElement function to create and return elements.

In app.js, the first thing we'll do is create a new variable named title,

then we'll call React.createElement.

createElement accepts three arguments that define the element you want to create.

The first argument is the type of argument you want to create.

This is usually a string which represents an HTML element or a tag.

In this case, I want to create an h1 element so I'll pass it the string h1,

but this could also be div, span, p, and so on.

And for readability I'm placing each argument on a separate line.

Now the second argument you pass to React.createElement is an object

containing any attribute and value you want to give the element.

For example to give the h1 element in id we can later target with CSS,

I'll pass an object and inside it write an id property and set it to main-title.

You can add as many comma separated properties as you want to this object.

For instance, I'll add a title attribute with title and set it to, this is a title.

Now, if we're not giving the element any attributes,

you can pass it an empty object, or the value null.

So the third argument you pass to React.createElement, is the contents or

children of the element you're creating.

For instance any text that will display between the opening and closing h1 tags.

It could also be more elements created by React.createElement or

it could even be null.

I'll parse it the string, My First React Element.

Now what if the first important details you should know about React is that React

does not create actual DOM nodes.

It's not creating in the way you would expect.

For instance the title element we defined is not a real h1 element.

It's actually an object that describes a DOM node.

It's an object representation of a DOM node.

To better demonstrate,

I'll console.log(title) to see what output we get.

Over in the browser console we see the title react.element recreated,

represented as an object.

It has several properties like key, props, and ref.

Now the important one is to pay attention to right now our type and props.

Notice how the value for type is h1, the value for

props is an object containing the id and title properties we passed to

createElement,, and the value for children is the string,

My First React Element, which we passed as the third argument.

So, this React element is an object describing what you want

to render to the DOM, or Display on the Screen.

For example, when the h1 get's rendered to the DOM,

we should have a html element that looks like this.

The type property, describes what type of element we want to create in h1 element.

Props are like the properties or

attributes of that element in this case it will have a title and id attributes.

And the children property string value will be turned into a text

node that reads, My First React Element.

So this concept is the essence of React.

The elements that React creates are actually plain JavaScript objects

that describe the element you'd like to display to your UI.

So how does React render a real DOM node?

You'll learn about that next.