7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.3 Creating a React App

Once you have all the necessary tools installed, it's time to create a boilerplate React app. In this lesson, we will walk through the parts of an out-of-the-box React app and trim it down to the absolute basics.

1.3 Creating a React App

The next thing that we wanna do is actually create the basic boilerplate or kinda skeleton of our application, and we're gonna use tools to do that. So what I wanna do now is I wanna show you how to use a tool that you have installed. Or didn't maybe know that you installed, to go ahead and create a new react app on our machine. Now, there's many different ways that you can do this. And one of the ways that is very frequently advertised across the internet is to download a utility and install globally on your machine on your development machine called the Create react app. And this is a very useful tool and I highly recommend using it, but I don't recommend installing it on your machine. And that might sound a little strange, but the reason that I say that is because if you install it on your machine, it just becomes another thing that you have to maintain and update regularly and so on and so forth. So a better route to go is to use an NPM package runner, if you will, and that is called NPX. So what we're gonna do now is we're going to run the NPX command, and we're gonna tell it which package or which tool we want to execute. In this case, it's the create-react-app, and then we can now what that's basically going to do is it's going to download it to your machine that's going to execute this tool and then we can pass what whatever parameters we normally would. So in this case, we're gonna keep things fairly simple, and we're just gonna give it the name of the application that we want to create. So I'm simply going to say I want to create a react guest book, and go ahead and hit Enter. So what this is going to do is it's going to download and install all the necessary packages that are going to be needed, and get everything set up and running for you. Now this may take a few moments, but your patience will be rewarded. And once it's completed we'll come back, and we'll take a look and see what we have. As you can see now, the process has completed, and you can see that we have some commands that we can use, we can use yarn start, build, test, eject. We're really only gonna work or really talk a little bit about start in this particular course cuz, we just wanna get things up and running and kinda see where we can go from there. So as you can see at the bottom, it says, why don't you change directory into the directory that it created for us, and then go ahead and run yarn start. So let's go ahead and do that, we're gonna change directories into react guestbook, and then we are going to run yarn start. And once we do this, you are going to see that it's going to run our application. It's going to open up a browser or a tab if you already have a browser open, and it's going to run the application that comes by default. And as you can see here, we have it up and running. Now, this is the basic boilerplate application that comes with the process of creating or using the create react app. And this is what we have, and it's kinda nice because it does some auto reload stuff for you, so it's very good for development purposes. And as you can see here, it says that you can edit src/App.js and save to reload. So let's go ahead and go back into our terminal here, I'm going to create a new tab and we're going to go into my desktop. And we're gonna go into react guestbook, and let's go ahead and open up code in this directory and see what we have. So once we have that open, you're gonna see here that we have several things here that were created for us by default. You can see we have our node_modules, and that's where all of our dependent packages are gonna live that we can use by default in our React application. We have our public directory, which is where all of our kind of public files will be. You'll see images, icons, you can put CSS in there, JavaScript files, HTML as you can see that's in there, and we can put all of those things in that directory. We're not gonna worry about that too much, but we'll come back and take a look at it in a minute. Then we have our source or src folder, and this is where all of the source of our application is going to be. So you can see a couple different app files here, one for CSS, the actual JavaScript and test here. Then we have our index CSS, index.js and this logo file, that logo file is the one that is actually spinning here in our application. So, we've got a nice little basic jump start here. Now, one thing that we can do before we really get going in our application is, we can kinda clear some of this stuff out that we're not gonna need. So let's go ahead and start with that, so the first thing that I wanna do is I wanna go into src. And we can keep the css I suppose for now, but we're really not gonna be using that very much. And I'll show you why in the next lesson, but we're not gonna be using this logo. So let's go ahead and get rid of that, then we're not gonna need the serviceworker either, so we'll go ahead and delete that. And let's see here, what else? The index.css, yeah, we really don't need that either, we'll delete that. Then App.test, we're not gonna be doing any testing in this particular course. There's other courses on Tuts+ if you wanna learn some more on testing, but we're gonna get rid of that, and you know what? Really, honestly, the App.css, we're not gonna use that either, so let's go ahead and delete that. So basically, we're down to bare bones now, we have App.js, we have index.js, and we have index.hmtl. So let's kinda walk through the kind of flow of how these React apps work. So typically what you have is you have an idex.html file or some sort of HTML file that's gonna get served up to your browser. And then you're gonna have a div somewhere in there that has an ID because we wanna be able to target that particular div And it's given a name, so in this case root, so remember that as we go. Now in our source, you're gonna see in our index.js, we're gonna have a couple things going on here. There's some importing of things, things that we've actually got rid of a little bit so we can clean some of this up too. We got rid of that file. We got rid of our service worker, we don't need that anymore, we can start to delete some of these things. And now what we're able to do here is we're able to see that we've imported React from react.React dom from react DOM, and we've imported app from app, and here is our app right here. And once again, we got rid of a couple things for that we don't need anymore. And we're actually going to delete all of this in here, and we don't need this class name in here either right now. We're simply gonna have a plain div, and let's just go here and say Hello, Guestbook. We'll go ahead and save that, so we made a couple of changes here, we've drastically simplified our app component. In index all we're doing now is we're saying once we load up this index, all we wanna do is we want to use react Dom which we've imported here from react Dom. To render our app component on our document, where we find this element with an ID of root. And as you saw before in here, we have a single element that has an ID of root. So once we've made all those changes, we can make sure that we save everything. And if we have done correctly, we can go back into our applications you can see here that it's auto reloaded based on those changes we've made. And now we just see hello guest book, so we're basically down to the bare bones to the absolute minimum that we can do here. Now before we end here, I wanna do one other little thing that I like to do. It's a little bit of housecleaning, basically, I like to create a simple structure. Now this is gonna be a simple app, but usually what I like to do is, I like to go into my source and I like to create a new folder. We're gonna call this components, I like to keep all of my components in a folder. And depending on how complex my application is gonna be, maybe I have a components folder. Maybe I have a pages folder in different folders to help me structure where I'm going to put different things so that I can start to easily lay things out know where everything is going to be. But I think that's gonna be simple enough, now you can move your app JS into there if you would like. Because that is technically a component, but I'm just gonna leave it there for now just as kind of a placeholder. So now we're ready to go, we have our app up and running. Now we can start to talk a little bit about what React hooks are and start to build them into our application.

Back to the top