Create a React Element

Earlier I mentioned that one of the benefits of using React 0:00 is that it's component based. 0:03 You create your UI as individual self contained components. 0:05 But we're not going to start off by writing components. 0:09 You see, at its core, React is only a library for creating and 0:11 updating HTML elements in your UI, that's all it does. 0:16 So to better understand how React creates UI, 0:19 we're going to begin using the React API to create React elements. 0:22 Which are the smallest building blocks of React apps. 0:27 Once you have a basic understanding of how React describes and 0:30 creates elements in your UI, 0:34 it will be a smoother transition into understanding components and writing JSX. 0:35 The special syntax React uses to create elements and use components. 0:40 React provides the createElement function to create and return elements. 0:45 In app.js, the first thing we'll do is create a new variable named title, 0:50 then we'll call React.createElement. 0:57 createElement accepts three arguments that define the element you want to create. 1:01 The first argument is the type of argument you want to create. 1:09 This is usually a string which represents an HTML element or a tag. 1:13 In this case, I want to create an h1 element so I'll pass it the string h1, 1:18 but this could also be div, span, p, and so on. 1:22 And for readability I'm placing each argument on a separate line. 1:26 Now the second argument you pass to React.createElement is an object 1:30 containing any attribute and value you want to give the element. 1:35 For example to give the h1 element in id we can later target with CSS, 1:38 I'll pass an object and inside it write an id property and set it to main-title. 1:44 You can add as many comma separated properties as you want to this object. 1:52 For instance, I'll add a title attribute with title and set it to, this is a title. 1:55 Now, if we're not giving the element any attributes, 2:03 you can pass it an empty object, or the value null. 2:07 So the third argument you pass to React.createElement, is the contents or 2:14 children of the element you're creating. 2:18 For instance any text that will display between the opening and closing h1 tags. 2:21 It could also be more elements created by React.createElement or 2:26 it could even be null. 2:30 I'll parse it the string, My First React Element. 2:32 Now what if the first important details you should know about React is that React 2:41 does not create actual DOM nodes. 2:46 It's not creating in the way you would expect. 2:48 For instance the title element we defined is not a real h1 element. 2:51 It's actually an object that describes a DOM node. 2:56 It's an object representation of a DOM node. 2:59 To better demonstrate, 3:01 I'll console.log(title) to see what output we get. 3:03 Over in the browser console we see the title react.element recreated, 3:07 represented as an object. 3:12 It has several properties like key, props, and ref. 3:14 Now the important one is to pay attention to right now our type and props. 3:18 Notice how the value for type is h1, the value for 3:24 props is an object containing the id and title properties we passed to 3:27 createElement,, and the value for children is the string, 3:32 My First React Element, which we passed as the third argument. 3:36 So, this React element is an object describing what you want 3:45 to render to the DOM, or Display on the Screen. 3:49 For example, when the h1 get's rendered to the DOM, 3:52 we should have a html element that looks like this. 3:55 The type property, describes what type of element we want to create in h1 element. 3:59 Props are like the properties or 4:04 attributes of that element in this case it will have a title and id attributes. 4:06 And the children property string value will be turned into a text 4:12 node that reads, My First React Element. 4:17 So this concept is the essence of React. 4:20 The elements that React creates are actually plain JavaScript objects 4:24 that describe the element you'd like to display to your UI. 4:29 So how does React render a real DOM node? 4:32 You'll learn about that next. 4:35