Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.6 hours
Building a react website with a pre built template 400x277
  • Overview
  • Transcript

2.2 Creating a React Application

This entire process hinges around creating a React application. So it makes sense to take a few moments to create a new React app and get it up and running with the out-of-the-box boilerplate code.

2.2 Creating a React Application

The next part of the process is simply starting to create our React app. And once we've done that, then we can start converting our HTML template. But before we get that far, I really wanna take a moment to talk about how we're gonna create this app. Now, there's many different ways that you can create a React app. You can download the templates, you can go into GitHub and you can basically download project templates from there. You can go out and actually download React itself and then use some of the tooling around it locally to go ahead and create a React App, using a utility called Create React app. Which is actually what we're gonna do today. But instead of actually downloading it locally and running it, one thing that I'll like to do is I'll like to use a utility called NPX. Now you've probably heard of NPM. If you've never heard of NPX, basically, they work in very similar ways with the difference of, with NPM, you have the option of basically installing a tool or a utility globally on your development machine. And then you can use it whenever you want. So in this case, I would be using the Create React app utility. But instead of actually downloading and installing it, if you use NPX, what it's going to do is it's gonna go out and basically do the same thing. It's gonna download that utility, but then it's also going to execute it. So you can pass additional parameters to it, that will be passed to the utility. So it's pretty simple to use. I'm simply going to go to my Desktop as you can see right here, and I'm going to type npx. I wanna use the Create-React-app utility, and I'm going to pass to it, the name of the project that I want to create. And I'm simply going to call this convert-html-template, just like that. So I'll hit Enter. And then it's gonna go out and it's going to download the Create React app utility. And as you can see here, it's already kind of starting to do I's job. It's going to go through the process of downloading all the dependencies, making sure everything is up to date, and then go ahead. And once it's actually downloaded everything, it's going to execute the Create React app, Utility and create this convert HTML template for us. So once it's done, it should be fairly quick, depending on your internet speed, your download speed. But once it's done, you should get to this point right here, where it's telling you that you can go ahead and start to run your application. We'll do that if you've never done it. It's kind of interesting. So we'll go ahead and get that started. But as you can see here, before you can actually do that, you have to change directories into the directory that was just created for us. Cuz right now we're still in Desktop. So before we do anything, let's go ahead and get into our convert HTML template folder. And then we can say yarn start. And then from that point, If everything works correctly, then we are going to start up a web browser. And here by default, it's on port 3000. And if everything works, you should see a template that looks something like this. Now, if you haven't created a React application in a while, and you pull up an old one, maybe it looks a little bit different. Every so often, the template changes, the logo might change a little bit, and things like that. But for the most part, it's fairly basic, it's fairly simple stuff. So now you can go ahead and leave this up and running if you would like and make changes to the files behind the scenes and this will actually change. So just to prove that, as you can see here, it says you can edit source, App.js and save to reload. So let's go back over here to our terminal. I'm gonna create a new tab here. I'm gonna go back to my Desktop and I'm gonna go into convert. So here I am in here. So now what I wanna do is, I wanna open up the code here. So I'm gonna use code as my editor. And I'm going to ask it to open up the current directory with the period. So this is going to start up here. And once it has opened up, you should see something like this. Depending on your version of Visual Studio Code, some things may be different. I might have some different extensions installed. But for the most part, this is basically what it's gonna look like. So what you'll be able to see now is, you'll be able to see everything that's in this project. So we have our public folder, which is where most of the public facing kind of static files are gonna live. So we are actually gonna use this index.html. We're really not gonna use any of these other files for the most part, we're gonna remove and kind of clean this up in the next step. But just so that you know where everything is, but this is the beginning of our React application here. And we're gonna wind up tying into this root right here. So that'll be kind of nice. Once we get this project up and running, you'll be able to see where our actual React application is being injected. So then once we see that, once we know where all those are, we can look into source. And right now, there's really not a lot of organization here. And we're gonna add some organization to this as we go, just to kinda keep things neat and tidy. But for the most part, everything right now is running in App.js. And if you were to look in here you would see Edit source App.js, and save to reload. And let's just go ahead and say something different here just so you can see it working. Hello from Derek, something like that. We'll go ahead and save that. And once I've saved that, if I come back over to my page, you're gonna see that it is automatically refreshed. So this is kinda a nice feature that you can use for development purposes. And we'll continue to use it as we go throughout this course. So, now that we have the basics here, let's go ahead and start to clean this up and start to build our application.

Back to the top