In the last section when installed the redux simple start or boilerplate package and we installed some 2
dependencies by using NPM installed in this section we're going to talk a little bit more about the 3
application that we're going to build to get way more familiar with react. 4
We just start by pulling up a mockup of the application that we're going to build. 5
So this is it right here. 6
We're going to build this application using only react. 7
So no redux just yet. 8
We're going to get really familiar with react before we delve into redux. 9
So let's talk a little bit about the South location. 10
It's a video player of sorts and it might look a little bit familiar. 11
It's really modeled on YouTube. 12
So at the top we've got a search bar on the right hand side. 13
We have some videos. 14
We have a video player in the middle and underneath it a video title and description of the currently 15
playing video. 16
When the user types into the search bar it's going to update the little video list on the right hand 17
side on the fly. 18
And when they click on a video it will start playing automatically inside the video player section right 19
here where we're can use any dummy data for this application. 20
We're going to use the actual YouTube API. 21
So this is going to be a fully functional re-act application you could deploy if you want to. 22
So with a better idea of what we're building we're going to come over again to come back to this mock 23
several times and talk about you know exactly how we're going to approach this project. 24
But right now let's try getting started with a sample or with a boilerplate package that we just finished 25
installing. 26
So I'm here at the command line side of the project directory and I've already installed all the project 27
dependencies using NPM install. 28
I'm going to now type into a command line just NPM start. 29
This is going to start up the boilerplate package and run a local server. 30
Remember we write javascript files inside of this package then babble and web pack bundle all those 31
all those files together convert them to E.S. 5 something that can be ran inside the browser and then 32
makes a local server available from which we can view all those files. 33
So you can see here that the entire package just finished compiling. 34
So now I'm going to go ahead flip open my browser and I'm going to navigate the default host for this 35
package or this boilerplate which is localhost Colan 80 80 and you can see at the top I have very simply 36
react simple starter. 37
Cool. 38
Let's continue the next section where we'll start making some changes to the files inside the boiler 39
plate bracket. 40
Excuse me the boiler plate package. 41
It's a tongue twister. 42
And see how it affects the output. 43
Are we getting our browser