Previous Lecture Complete and continue  

  Hello World 👋

  1. Import React.js and React DOM libraries
  2. Create HTML
  3. Create React element
  4. See Hello World

Okay, okay, okay. Welcome to Module One: Baby Steps with React. So, first of all, let's build Hello World. Let's get it off our shoulders. Let's get it off our minds, because if we don't build Hello World, guess what? The gods of programming will frown upon us. :)

So, let's keep it simple, stupid. We can download the libraries, but we can also link them from CDNs. The result, the goal and the result is to just get the code. And, by linking or downloading the files, you would get the React and ReactDOM object as global, so window.react will be accessible to you.

And, after you have those includes in your index.html, what you can do, you can put the code right there inside of the file as well. Let's just keep it as simple, as stupid as possible for this Hello World. Later we will split them into multiple files. For now, let's keep it simple. Pay attention, this create tag must be after the div container. So, the div container with the ID content, that's where our React element will be mounted. This is very important. I will also remind you about this later in this module, about the order of the code.

So, now inside of that script, inside of that JavaScript snippet, that place in the index.html, let's go head and type React.createElement, and then put h1. So, the first argument, the very first argument to create element, it's the type of the element. So, h1, it could be p, it could be div, it could be a, all the standard HTML elements are supported as the types of those elements. Second argument, let's just leave it as null. I will explain it later. Remember KISS, KISS all the way, and the third, that's our Hello World. So, the third, it's a text you can guess.

Now, let me show you one more way how to do exactly the same thing, React.DOM.h1. So, inside of that React.DOM you have the list of all the objects. So, actually what create element is doing, basically create element and DOM.h1, they're aliases for each other. One is calling the other. So, DOM.h1 is a little bit shorter. In this case, there are only two arguments. Again, I will talk about the null a little bit later. Hello World, that's what we need for now.

So, okay, we have our elements, so now what do we need to do? It's not gonna show up on the page. We need to mount it. So, mounting, it's like linking that React element, which is so far has been just created as just an object. It's of a special type h1, but it's not gonna show up on the page, so what we need to do, we need to pick another library, ReactDOM, which if you remember, you hotlinked from the CDN, and then we would use this function, it's called render. And, we would pass an element, pass our h1 element, and then we would pass DOM node by using document.getElementById. And, this will actually enable us to see Hello World. Ta-dam! Congratulations, you just built your first React code. I wanted to say component, but it's not a component yet. It's just an element. We mounted it. Components will be in the second module. But, so far so good.

0 comments