From the course: Building Modern Projects with React

The React entry point - React.js Tutorial

From the course: Building Modern Projects with React

Start my 1-month free trial Buy for my team

The React entry point

“

- [Instructor] All right, so now that we've learned a little bit more about how we're going to build a React project from scratch and what we have to gain from this, let's get started here by creating the React entry point. So again, this is just going to be an index.html file that will take charge of loading a script that will actually render our React app. So I'm going to start off here by creating a new folder, and I'm going to call this folder something like react-from-scratch. And then inside this folder, I'm going to create a new file, and I'll call that index.html. And for now, we'll also create a new file called index.js, and that's going to be the main script, right? Sort of the JavaScript entry point that will kick off the rendering process. So now that we have those things, let's start off by creating a simple HTML file that will load our app. So this is going to be a very simple HTML file. It's just going to have DOCTYPE html, it's going to have the basic HTML tag with language equal to English there, unless of course you're making this in a different language. And then we're going to have the basic head tags and the basic body tags. Now, the head tags are going to serve the same purpose in a React app as in just a basic static site. They're going to have things like the meta tags, right? Just informing the browser what the character set is, for example. So we'll just use UTF-8 for that. And then after that, we're going to say meta, and this is just going to be for basic styling, we're going to say name equals viewport. And then we're going to say content=width=device-width. And initial scale equals 1.0, all right? So again, that's just basic styling stuff. And the reason that I'm leaving these things in here is just to show you that, again, this is the same kind of thing, these serve the same kind of purpose as they would on a regular static site. And last but not least, we'll add a title here, which is, again, just going to be what shows up in the tab. And we'll just say something like My React App in there. Cool, so now that we've got the head tag filled out, let's move on to the body tag. This is where we're going to have our very important div that we're going to render our app inside of. So here's what this is going to look like. We're going to say div, and we're going to give this an ID because we want to make sure we can uniquely identify this thing, and we'll just call that root. And then underneath that, here's where we're going to actually load the script by saying script, oops, let me try that again there, script srce=, and for now what we're going to do is we're just going to say something like index.js. So that'll load the index.js file that we just had right next to it. And then we're going to have script right there. So what we're going to do now, right, now that we've set up this very simple HTML file, and again, this is kind of the point, right? Right now we only have this empty div, but the React scripts that we're going to write, which is really the entire point of React, are going to take care of rendering and filling this div with all of the content that our app needs to contain. So here's what this is going to look like. Let's actually just go over to index.js. And for now, just to show that everything's working, we'll say console.log, and we'll say, "This is the React rendering script." And now that we've done that, let's just save that. All right, so now that we have the html and script files created, we're just going to open up this HTML file in a browser. Now, if you're developing locally, that is, on your machine instead of in Codespaces, I'm using Codespaces, all you need to do is right-click on the index.html file, do Copy Path, and then paste that into a browser, and that will open up this file. Now, just to make sure that you actually see it, let's actually just add an h1 heading here that says something like, "My React App," and you should see that rendered. In a Codespaces environment, what you're going to need to actually do is you're going to have to right-click on this file and go to Open with Live Server. And what that's actually going to do, that's (laughing) going to make it possible for you to actually view those files in your browser, as you can see. And you're just going to want to click on react-from-scratch. And what you'll see is that, sure enough, that renders the index.html file. This is just the h1 heading that we added there. And if you open up the inspector window and go to Console, sure enough you can see that it says, "This is the React rendering script." All right, so in other words, what we've done here is we've just created a simple HTML file that loads a JavaScript file and runs it. So the next thing that we're going to need to do is make it so that that JavaScript file will actually render our React app inside this HTML file instead of having this h1 heading thing just define there statically.

Contents