Create HTML elements with React's createElement API
In this lesson we'll learn how to use raw React APIs to create the most basic Hello World example. React defines it’s own createElement function that we will see works similar to document.createElement. And in place of appendChild we will use ReactDOM's render function.
We'll also learn a little bit about React props and the children prop.
[00:00] We're going to start by making a div with ID of root, and then we'll have a script. Inside of the script, we're going to get the root element with document.getElementById() of root. Then we're going to create a new element that will append to the root that just says, "Hello world."
[00:19] We'll say a const element = document.createElement("div"). Then we'll say element.textContent = "hello world", and element.className = "container", just for fun. Then we'll say rootElement.appendChild(element).
[00:42] We'll save that, refresh, and poof, we have our hello world. Most excellent. Now, with React, it's actually pretty similar. We're going to have a createElement method that we'll call. We can provide a couple properties onto our element, and then we're going to render it.
[00:59] We don't use appendChild, but we'll use a render method. The first thing that we need to do is get ourselves React onto this page. We'll stick those here in script tags. These are going to expose the React global and the ReactDOM global, which we'll use to recreate this using React APIs.
[01:18] I'm going to go ahead and comment these out, and we'll start creating this from React. We'll say our element is equal to React.createElement(), and the element is going to be a div. The className is going to be container. Then the text content is going to be hello world.
[01:43] Then we're going to say ReactDOM.render our element to the root element. If we save this, we're going to get exactly the same thing. Let's go ahead and take a look at what element is. We'll save that, and here we'll see that it's just this object that has this weird type of property, a couple other properties here, and then this props.
[02:09] This one's actually pretty important. It has a children prop, and that's our hello world. That's our last argument here. Then it has a className prop, and that's the container. It looks like we've got a merge of this object here with whatever we pass here.
[02:25] We can actually pass any number of arguments for the rest of this API call. Goodbye world, and I'll save that, refresh here. If we see in our props, we're going to have children as an array that has both of those things.
[02:42] What's interesting here is we could actually remove these, create a children prop here, and past them into there. We'll get exactly the same output. Here, we have the props that has the className and the children.
[02:56] We can switch this batch to just hello world as well, and that's going to give us this back. React createElement API is as simple as the element that you want to create, and then an object that has all of the props that you want to have applied.
[03:16] Just as a convenience, you can provide the children as any number of arguments after the props argument as well.
Hi Juan, Sorry you're lost. The text editor on the left is Atom and the part on the right is Chrome. Maybe this will help...
It seems like there is some info missing from this. Like where to start? Are you supposed to use Create App? Are you doing this in CodeSandbox and just deleting all your code?
Hey Louis, as mentioned in the introduction video and course description, the left side of the screen is just an index.html file and the right side is a regular browser with that file opened.
Thanks Kent, I must have missed that bit. I even double checked!!
This seems to be a good course but I don't know where to start. Is there a good course to setup a React project?
This seems to be a good course but I don't know where to start. Is there a good course to setup a React project?
I think to setup a React Project for learning purpose based on this course, just explore the "Code in editor" which instructor provide.
Is this course still relevant for a beginner?
What is the advantage of this HTML method vs the javascript app method? It seems the app method is much simpler. Compare this Hello World code to what you've got in the html file:
import React from 'react'; import './App.css';
function App() { return ( <div className="App"> <header className="App-header"> Hello World </header> </div> ); }
export default App;
I'm completely lost. what text editor are you using?