Web Class – Creating a “Hello World!” App in React

Transcript

In this video we’re going to use Atom’s terminal to start making your brand new app. And we are going to render your first React component. I hope you’re excited. Okay, so what we have here is our Atom browser, our Atom editor, and a web browser on the right side. In the Atom browser, open up your terminal and if you forgot, that is the plus button up here or it is Control + back tick. And what we’re going to to do is get into your project’s directory. Now some people like to put their projects in their home folder. I put mine in a directory called coding, because this is my coding project. So I’m going to do cd, and cd is short for make the terminal go into this directory. You can think of it as equivalent to double clicking a folder in your computer. So cd Documents/coding. And now I’m in the coding directory. Once you’re in your projects directory, we’re going to make a new directory. For the most part, web applications tend to be centralized in one directory, so as long as you have one directory that contains all of your source code, then you should be good to go.

This app is going to be simple. It’s gonna be called hello world. So let’s make a directory called that. The command for that is mkdir. It stands for make directory. So make directory hello-world. And let’s cd into that directory. And here we are. We are in the hello-world directory.

And now let’s make an html file. So remember the syntax for making a file is touch index.html. Now let’s go see our project. We can open up our entire project in Atom by clicking on File, Open, and then just navigate to your project. I clicked on hello-world and now I see the project browser on the left side where I have a folder called hello-world and then I had my index.html, which is empty.

Let’s populate with some simple html. Start with the doctype. And then I start with html. Language is English. Direct to close it. The head, I don’t really know what should go in there, so I’m gonna just leave it empty. We’re gonna have a body. And let’s just say div. Hello World, close div.

You might wonder, why are we writing in html when this is a React course? Well, I’m gonna show you how to make, write React code right in an index of html file, even though this isn’t how it’s done in the real-world at all. But just to get your feet wet with React, and not have to commit to the giant boiler plate known as Create React App.

What I’m gonna do now is, I’m gonna show this in Finder. And I’m just gonna open it. So I’m gonna drag it over to my Chrome, because right now my default browser’s set to Firefox, so I drag it to Chrome. Get rid of that guy for a second. And you can see that I have Hello World rendering. Well that’s nice.

What about React? Well to get React, we are going to do this one time download of the library. So go to reactjs.org. And click on get started. Okay, so it’s a little bit actually to the right. Click on this version up here, so 16.2.0. Now it’s important that you do use the same version of React as I am, at least version 16. This minor version, the two, it could be three, four, five. What I’m concerned with is the major version, because every time they increment this number, it has always had breaking changes. Now I will do my best to keep this course as up to date as possible. But for the time being, 16 is the latest, so go ahead and use 16, because if 17 is out by the time you are viewing this, and you use 17, but follow the 16 tutorial, things might be broken. And I don’t want that to happen to you ’cause it’s really hard to debug when you have different versions. What we’re gonna do is get two libraries, react-dom and react. So you want the development version, ’cause we are in development. So right click on this and click on save link as. Okay and what we’re gonna do is navigate to our folder. Coding, and it’s under hello-world. Save that there. And then do the same thing with react.development.js.

Okay so now you should have two files in your hello-world project. Or three files, index.html, react-dom.development.js, and react.development.js. Okay so what we’re going to do now, let’s get this a little bit smaller so there’s more room. What we’re going to do now is use these scripts. So the syntax for using the script is, script source equals and since they’re right in the same directory, we can navigate to that react-dom.development.js. Close the script tag and let’s do it again with react.development.js. End the script tag. Save it.

Okay and now, let’s actually write some JavaScript. Script, let’s see. Type is text javascript. And just to make sure that this javascript is working, it added it twice, just do a console.log. It’s working. Okay, so no contractions there. Okay, let’s make this window a little bit smaller so I can make this a little bit bigger. Great. And so if I refresh this and I inspect it, I’m gonna take a look at the console, it has an error. So it says react.dom was loaded before react. Make sure you load react, before loading react.dom. Okay, so let’s go ahead and do that. I don’t like big red errors. So hit save. And I refresh. And now they’re saying to download React DevTools. Well I already have that, so let’s ignore that, but we do have our console log that said, it is working.

Okay so the first thing we’re going to do is we are going to make a div, which we already have. Let’s delete the contents of this div and give it an id of root. Now the only reason we are giving this an id is because we need to select it. So let’s make a variable called mount. So const mountElement equals document.getElementById root. And in case you’re not familiar with with ES6, const is another, is a block scoped variable declaration. So in the past, in ES5 and below, you used to declare variables using var. Var is still valid, but var has a lot of different overhead that a lot of people don’t really understand. So what I like to do is I like to use const to signify that I have a constant variable that is not meant to change.

If you have variable that will change, you would use let. And of course, you are perfectly free to use var anywhere you see const or let. And I’ll go forward with using const because it’s good to use ES6 when you can. And what we are going to do is we are going to mount a React element onto the dom. And before we had hello-world, well let’s go ahead and do that. So the syntax with that is ReactDOM.render and we are going to create an element. So React.create.element. Let’s make an h2 and we’re gonna put null here. Don’t worry about what it is right now, but the third argument is the text that we wanna put in, so Hello world. And notice the difference in capitalization, that lowercase w, no exclamation point. Before, I did not have that. So let’s go ahead and save.

Pretty air does it’s work and I actually forgot a argument. We need to put mountElement. Okay, so what is this code doing? It’s creating a React element of the h2 variety and it’s mounting it to this mountElement variable, which is the root, the div with the id of root. Okay, so let’s see it in action. All right so we see it is working. We see this Hello world. We can inspect it. And we say an h2 with Hello world and let’s take a look at our React DevTools. Unfortunately, since we are serving from our file system, we actually can’t use React DevTools.

Notice this little error here that says you might need to use a local http server instead of file://. Well that’s what we’re doing right here. That doesn’t mean that we can’t use React DevTools when we develop, it just means that we would need to have an actual development server. And once we actually get into the nitty gritty of building our app, then we will be able to use that development server so that we can use React DevTools, because that is invaluable for programming in React. Okay, so what have we learned? Well we made a basic html file. There’s nothing really exciting about that. All we did to make React work is we included the react.development.js. We included the react-dom library and then we just have a basic script tag that just has a console.log. It declares a mountElement where we’re going to mount our entire app. And then ReactDOM goes ahead and renders this React component right onto the mountElement. So if we take a look at the inspector again, we see our h2 right under the div with the id of root.

Share this article

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of