This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React v4 course:
The "Setup index.html" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian sets up an index.html using VS Code's built in emmet integration. We'll be building a Pet Finder application throughout the workshop.

Get Unlimited Access Now

Transcript from the "Setup index.html" Lesson

>> Brian Holt: We're gonna start by writing React with no build step whatsoever. I'll be honest, you probably will never write React like this again. But it's really good for you demystify how React is working behind the scenes. A lot of people criticize most React tutorials that they just kind of throw you off the deep end and say here's everything already set up for you and here's a bunch of magic that you have no idea what it's doing.

[00:00:23] We're gonna peek behind the curtains, see how everything's working. And then once you get annoyed with how it's working, we're going to put all the nice convenience layers back on top of it. So I'm gonna come in to my terminal here, and we're gonna make a directory called, I'm just gonna call it Frontend Masters.

>> Brian Holt: Okay, so I have this new directory called Frontend Masters. This is gonna be the root of my project. And the first thing that I'm gonna do is I'm going to create another directory called src for source, right? This is where all my source files are gonna go.

[00:01:07] This isn't necessarily a React thing, this is how I just choose to organize my projects. So I'm gonna make a new file called index.html. So now inside of here I have this one HTML file. And I'm gonna open this in my editor. So I'm gonna actually open the whole directory here in VS Code.

[00:01:32] People often accuse me of shilling for Microsoft because I use VS Code. I was using VS Code when I was still at Netflix, this is my favorite editor. I was a Sublime hardcore user for a long time. I was as TextMate user before that. But VS Code is just so compelling to use.

[00:01:50] So if you're not using VS Code, I'm going to highly suggest it. Unless you're using VIM, then you can just play off in your wonderland with your magic fingers.
>> Speaker 2: [LAUGH]
>> Brian Holt: I don't know how to do that stuff. Okay, so we're gonna open our index.html file here, okay?

[00:02:09] Right now it's just an empty file. We're going to create an empty shell. Which there's a thing here called Emmet. So if I hit html:5 and then hit Tab, it generates the entire outline of a document for me. This is just something that VS Code has included for it, but everything has bindings for Emmet.

[00:02:32] It's, I think, So if you wanna install that in your favorite editor, just go to They'll show you how to do that. But if you're using VS Code, it's just built into it.
>> Brian Holt: If you don't feel like installing Emmet, you don't have to. I don't think I'll really be using it after this, so you can just copy what's there.

[00:02:56] Today, we are going to be building a pet adoption app, so that you can adopt your own pets. And we're gonna be using real data from a real API, the Petfinder API. So we're gonna call our app whatever you wanna call it. I just called mine Adopt Me!

[00:03:12] You can call it whatever you want. True story, I taught a workshop in Iceland. This is a US-only API that we're gonna be using. But someone, when I was taught this workshop in Iceland, saw a dog on, while they were building this application. Flew to San Franciso, adopted the dog, and took it back to Iceland.

[00:03:31] So I like to say that I saved lives.
>> Speaker 2: [LAUGH]