FREELessons: 14Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Touring a New Project

In this lesson, we'll take a tour of our newly created project... and practically wipe it out to start fresh.

2.1 Touring a New Project

In this lesson, we will do two things, we will tour our project and then we will perform the obligatory hello world incantation. That is to ensure that everything that we do from now on is going to work. So the first thing that we are going to talk about is this node_ modules folder. Now, if you're not familiar with node or NPM, every project has dependencies, and this node_modules folder is where those dependencies are installed. So we want to leave the contents of this alone, I mean you can go in and look at all of the files if you want to, but don't change anything because our application depends upon it. And it's not just our application, but also the development tools that are being used behind the scenes are using a lot of those dependencies as well. So it's there, we ignore it, that's just how it is. So now there's this public folder. Now the public folder is essentially what is the result of what we see in the browser. So anything that is going to be served to the browser is inside of the public folder. So that's where you can see the favicon, there's this index.html, there's a couple of logos, there's also a manifest file. We don't need to worry about the manifest file, that is for progressive web applications. But it's nice that it gives us one, because if we wanted to use React for a progressive web app, well, we would at least have that manifest. Let's open up index.html. And you're going to see that there's really not a whole lot there. In fact, most of this are just comments, but what I want to point out is this div with an id of root. Now, this index HTML is what we see in the browser. And if we just look at this code right now, there's definitely not anything here. I mean there's some meta tags, there's some link elements pulling in an icon for mobile, the manifest file. But as far as actual markup and content, there's nothing here, but yet, we see content in the browser. Well, that's one of the beautiful things about React. All of what we see here is the result of compiling a bunch of JavaScript and then injecting the result of that JavaScript inside of this div element with an id of root. So our application generates that content, it is inserted inside of this div, and that is how this works. In fact, we can go ahead and inspect this, and we would see just that. Here is our div with an id of root. Inside of that is a div with the class of App, and then there's the rest of the application. Now the reason why I point that out is because whenever we develop our application, we need to specify where we want our application to be inserted into the document. And we're just gonna keep this div with an id of root because it's there, why not? So that is the public folder. What we see in the browser is the result of being served from the public folder. So then there's this src folder. This is where the source code of our application lives, and you can see that there are quite a bit of files. But what we want to focus on right now is this index.js. This is the entry point of our application. So this index HTML that we see in the browser is going to load JavaScript that starts with this index.js. Now of course, we don't see that in the markup, but the development tools behind the scenes is making all of that work. So we just need to know that our entry point is this index.js file. It's importing React and ReactDOM, that's also importing CSS, it's importing the app here, and then it is rendering it in the document. And we can go ahead and look at those other files if we wanted to. But really, I am just going to select all of those, and let's delete. This is of course going to break our application, but that's just fine. We're going to start completely from scratch, so that we aren't dependent upon anything given to us by the Create React App utility, except for our index.html. So inside of our src folder, we are going to create a new file, and we're gonna call it index.js. And as I mentioned, this is the entry point of our application. Now there are a few things that we need to import just by default. The first is going to be React and that is from the React package, we also want to import ReactDOM. Now this is a utility that gives us a variety of ways of working with the DOM itself. The package that that is from is react-dom, and then we are going to use ReactDOM to render some content. And we're going to start with the content of just Hello, World, let's use it a p element and we will simply say, Hello, World. But then we also need to specify where we want this content to be inserted into the document. And we have that element that has a route ID, so we will just simply call it getElementById pass in root, and that is going to give us our page. We need to go back to the browser, we need to refresh, but after that we see our Hello World content. So let's just go back over this again because I kinda blew through this. So we have our index.js file. This is the entry point of our application. And so this needs to have the code that is going to essentially bootstrap everything that our application is going to need. Now right now, we are just outputting some content that says Hello World. So we are importing React, we are importing ReactDOM. And really in this particular case, we don't even need React, we just need ReactDOM because ReactDOM gives us methods that we can use to interact with the DOM itself. But the only method that we are going to use right now is called render. So we want to render some content. So whenever we call the render method, we pass in the content that we want to render, as the first argument. And then the second argument is where we want to render that content. And then when all of this code executes inside of the browser, we get our result, Hello, World. If we wanted to to inspect this, we aren't going to see anything out of the ordinary. We have that div with an id of root. And then inside of that, we have our p elements with the content of Hello, World. So there we go. We have written a React application. It's not very useful, in fact, it's not useful at all, except for just being a starting point. Now, in the next lesson, we are going to still work with this Hello World concept. But we are going to introduce the idea of components, because React applications are built using a bunch of components together.

Back to the top