Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Getting Started

Our first step is to just get our app up and running. In this lesson, we'll write the bare HTML and JavaScript needed for a working app.

2.1 Getting Started

In this lesson we are going to start writing our application and we're going to focus on the client first. So in the next few lessons we're going to build the client and then we're going to turn to the server and make it work there as well. So I have already installed all of the dependencies so that you don't have to see that on screen. So we can just get started building our application. So the first thing I'm going to do is create a new folder called source. And we're going to put everything inside of this source folder. And we need a starting point for our application and that would be an index HTML file. So let's create another folder inside of source, called public. So anything that's going to be served to the client is going to be inside of this public folder and let's create a new file called index html. Now there's not really going to be anything of significance here. We are going to of course have our head elements, and I'm going to go ahead and paste in a link element to pull in bootstrap so that we have some CSS there. Let's also have our body and then the div element for our application, this is where our application is going to live. Let's just call that guitar-app and then we also want to pull in a JavaScript file. Now we don't have this yet, but we're going to use Web Pack to bundle all of our JavaScript together so that all we have to do is reference that file here and this is going to be inside of a folder called js. And we can call this file whatever we want, but we're going to go with bundle for the lack of a better term. So this will give us our boilerplate html and really we don't have to do anything else here. So let's go ahead and close that. And the next thing that we need to set up in order to just get our application running is our application routes. So let's create another folder inside of source and I'm just going to call this routing. So, anything inside of this folder is of course gonna have to do with routing, and let's create a new file called approutes.js. And this is where we are gonna pull in several things. The first, is gonna be react from react. We also want to pull in some things from react router and of those would be the router. We want the browser history and route, and the index route as well. And those are from react router. And there's a few other things that we will eventually pull in. But for right now we can get started writing our class. So we want to export this class and we're going to call it approutes. And this is a component. This is one of the nice things about react router is that most everything is going to be a component. So we want to extend react component and our render method is going to, of course, return. And here we are going to use the router component and we're going to say history=browserHistory. But then we get to set up the actual routes and for right now the only one that we are worried with is what I call the default route. This is the root of our application, if you will. The path is simply going to be a slash. In here we get to specify the component that we want that it's going to handle this route. So we say component and we don't have this component yet, but we're going to say that this is our app. And one of the really nice things about our routes is that we can nest routes together and we will eventually do that. But for right now we're just going to leave this alone because we want to write this app component. So inside of our source folder, let's create another folder called components. So we're going to put all of our components in here, but I like to be a little more organized. I'm going to create another folder called pages. So the app component is essentially going to be our layout page or a template page so that all of the routes that we define inside of this default route is going to use this component as a template. So let's create a new file, we're going to call it app.js and this is going to be rather simple, we wants to, of course, pull in react from react. And then we're going to start writing our app class and we want to export this. It's called app and it extends react component and our render method is going to return some html. We'll have a div element with a class name of let's call this app-container because this is going to be a container for all of the other pages. And we can go ahead and add some content here, we can say that this is the default content. Of course, right now, this is the only content that's going to show, but there's a little bit more that we can do here. But before we get into that let's go back to our app routes. And let's talk about our default route. So whenever we navigate to the root of our application, then the react router is going to use our app component in order to render that request. So what we have written here in at js is going to be rendered. Now we can also come in here and specify child routes. So let's say that's we have a path of /guitar and then we also have the ID, we can specify the component that we want to handle that request and we could just call it guitar. So whenever we navigate to /guitar, /ID or however we specify the ID, then react router is going to see that this route meets that path criteria, but it's also a child of this other route. So it's going to start with our default route. It's going to use app and then it's going to process the next route and it's going to use guitar as a child of app. So inside of our app component we can actually specify where we want that child content to be rendered, and we do that with a prop called simply children. Now children can be undefined, and it will be initially because we aren't going to define any child routes. So if children isn't defined, we can also specify some default content, which we have just done. It's very simple content, but we will at least see something in the browser. So now we need to go back to app routes and we need to import app. Although you know what, we defined app routes inside of the routing folder that is outside of components, but this is a component. So let's move the routing folder to components. So that's now our path is going to be going back to components and then pages, and then app. Although we need it from there. So import apps from pages app. And we should be good to go there. So now we just need to Bootstrap our application. So let's create a file inside of source called the client app. I believe I called it inside of the web pack config. We can look and yes that is indeed the file. We can come in here, we can change it, whatever we wanted to. If we wanted just clients, but I like client app because that tells what this is for. So basically what we want to do here is when the window loads, which we will use addEventListener you could use the on load event handler if you wanted to do that, but I'd like to use addEventListener. We're going to render our application routes. So that means that we need to import react from react. We also need to import reactDOM from react dom. And we also need to bring in our app routes. So AppRoutes and then the path from that is going to be /components/routing/AppRoutes. So we should have everything that we need so that all we have to do here is say ReactDOM. We will call the render method. We are going to render our AppRoutes because the react router is then going to be responsible for rendering the appropriate things. And we are going to render all of these inside of our guitar-app element, that's what we defined inside of our index html file which if we look at that there that is. So now we just need to run the Web Pack and hopefully everything is going to work there. So let's also watch, just so that we don't have to do this over and over again, and no errors, so that was good. Let's go to my other command prompt and we will say npm start, that will start the web server. And now, let's just refresh and we should see this is default content and we do. So, we now have a working application, of course it's very simple and all it is showing is a single line of text. So, in the next lesson we are going to add our data and start writing some real views

Back to the top