Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Course Project Tour

Our app is rather simple, and in this lesson I'll show you what we're building so that we can plan a course of action. I'll also show you the packages you need to build a universal JavaScript app.

1.2 Course Project Tour

Before we start writing our application, let's take a few moments to actually look at what we are going to build so that we have an idea of what our end goal is. And then we will spend a few moments talking about the dependencies that you will need not just for this application but really for any universal JavaScript app. So this is it, we basically have two pages. We have an index page that's going to display a list of things, and then we can drill down into one of these guitars and find out a little bit more information. So these are four of the guitars in my collection. And if you look at the source code you're going to see all of the HTML, that's because that this is being rendered on the server. And so that means that we could actually make a request for one of these guitars, like the first one, and we would be able to see that. Whereas if this was just a purely client-side React app that would definitely not work. Now the data for this application is nothing more than a JavaScript file that has an array of objects. So that's what we are going to be using for our data store. I wanted something that was relatively simple to implement because I didn't want us to have to set up a database in order to get running. So this way we can instantly just start writing our app and we have data to work with. Of course we're going to start completely from scratch. All of the code, we will start really with the first file which is going to be the index.html file. So now let's look at our dependencies. So we of course need React for this application to work. We also need react-dom and we also need to react-router, because the router is going to be responsible for, of course, routing the client portion of our application. That's also going to be responsible for doing the same thing on the server. For every request that we are going to make, we're going to hand off to react-router to see if that request actually matches one of the routes that we have to find. And that's how we know what page to render on the server. So those are definite needs. And we also need Babel as well. So everything here, babel-cli, babel-core, babel-loader, babel-preset-es2015, because we are going to be using es2015 syntax, and the babel-preset-react. All of these are needed for a universal JavaScript application. Now, express and ejs, not so much. I mean, you can use those to make your server application easier and we of course do that in this lesson. But you don't have to have those if you don't want to, the same for http-server. I use this when we start building the client portion of our application, but whenever we switch to server-side rendering this is the command that we use. And then you will also want some bundling component and I'm using webpack for that. You don't have to use webpack, you can use whatever solution that you want, but webpack is the new hotness so that is what we will be using in this course. And that's basically it. So we will get started writing the application in the next lesson.

Back to the top