1

00:00:00,760  -->  00:00:05,910
In the last section when installed the redux simple start or boilerplate package and we installed some

2

00:00:05,910  -->  00:00:10,500
dependencies by using NPM installed in this section we're going to talk a little bit more about the

3

00:00:10,500  -->  00:00:14,770
application that we're going to build to get way more familiar with react.

4

00:00:14,930  -->  00:00:21,040
We just start by pulling up a mockup of the application that we're going to build.

5

00:00:22,050  -->  00:00:23,760
So this is it right here.

6

00:00:24,180  -->  00:00:27,120
We're going to build this application using only react.

7

00:00:27,120  -->  00:00:28,550
So no redux just yet.

8

00:00:28,560  -->  00:00:32,410
We're going to get really familiar with react before we delve into redux.

9

00:00:32,550  -->  00:00:35,100
So let's talk a little bit about the South location.

10

00:00:35,130  -->  00:00:39,000
It's a video player of sorts and it might look a little bit familiar.

11

00:00:39,000  -->  00:00:41,040
It's really modeled on YouTube.

12

00:00:41,190  -->  00:00:44,730
So at the top we've got a search bar on the right hand side.

13

00:00:44,760  -->  00:00:46,280
We have some videos.

14

00:00:46,620  -->  00:00:52,320
We have a video player in the middle and underneath it a video title and description of the currently

15

00:00:52,320  -->  00:00:54,370
playing video.

16

00:00:54,870  -->  00:00:59,760
When the user types into the search bar it's going to update the little video list on the right hand

17

00:00:59,760  -->  00:01:01,600
side on the fly.

18

00:01:01,720  -->  00:01:06,840
And when they click on a video it will start playing automatically inside the video player section right

19

00:01:06,840  -->  00:01:11,340
here where we're can use any dummy data for this application.

20

00:01:11,340  -->  00:01:13,540
We're going to use the actual YouTube API.

21

00:01:13,560  -->  00:01:20,810
So this is going to be a fully functional re-act application you could deploy if you want to.

22

00:01:20,940  -->  00:01:25,460
So with a better idea of what we're building we're going to come over again to come back to this mock

23

00:01:25,470  -->  00:01:29,260
several times and talk about you know exactly how we're going to approach this project.

24

00:01:29,390  -->  00:01:35,760
But right now let's try getting started with a sample or with a boilerplate package that we just finished

25

00:01:35,760  -->  00:01:36,880
installing.

26

00:01:37,470  -->  00:01:41,940
So I'm here at the command line side of the project directory and I've already installed all the project

27

00:01:41,940  -->  00:01:45,080
dependencies using NPM install.

28

00:01:45,690  -->  00:01:52,340
I'm going to now type into a command line just NPM start.

29

00:01:52,410  -->  00:01:56,540
This is going to start up the boilerplate package and run a local server.

30

00:01:56,790  -->  00:02:04,830
Remember we write javascript files inside of this package then babble and web pack bundle all those

31

00:02:05,280  -->  00:02:10,650
all those files together convert them to E.S. 5 something that can be ran inside the browser and then

32

00:02:10,650  -->  00:02:15,610
makes a local server available from which we can view all those files.

33

00:02:15,810  -->  00:02:19,600
So you can see here that the entire package just finished compiling.

34

00:02:19,600  -->  00:02:26,460
So now I'm going to go ahead flip open my browser and I'm going to navigate the default host for this

35

00:02:26,460  -->  00:02:37,260
package or this boilerplate which is localhost Colan 80 80 and you can see at the top I have very simply

36

00:02:37,440  -->  00:02:39,650
react simple starter.

37

00:02:39,740  -->  00:02:41,720
Cool.

38

00:02:41,760  -->  00:02:45,990
Let's continue the next section where we'll start making some changes to the files inside the boiler

39

00:02:46,290  -->  00:02:47,070
plate bracket.

40

00:02:47,310  -->  00:02:49,680
Excuse me the boiler plate package.

41

00:02:49,690  -->  00:02:50,940
It's a tongue twister.

42

00:02:50,940  -->  00:02:52,320
And see how it affects the output.

43

00:02:52,320  -->  00:02:53,250
Are we getting our browser