1

00:00:00,880  -->  00:00:06,300
Are now at a place where you have a solid foundation of what's going on with three talks read x contains

2

00:00:06,300  -->  00:00:12,930
or application state which is generated by a series of producers that we write that state is then modified

3

00:00:12,930  -->  00:00:19,140
by Culin action creators action creators return actions which flow through middleware and then into

4

00:00:19,140  -->  00:00:23,280
the reducers whenever a new set of state is produced.

5

00:00:23,280  -->  00:00:29,340
It flows into our containers and those containers pre-rendered themselves and the entire process repeats

6

00:00:29,340  -->  00:00:30,930
all over again.

7

00:00:30,960  -->  00:00:34,010
So this is great for working with reaction redux.

8

00:00:34,020  -->  00:00:39,220
But what we haven't really learned so far is how to build really interesting applications.

9

00:00:39,450  -->  00:00:45,650
For example we've covered how to fetch data but we haven't really spoken about how to post data like

10

00:00:45,650  -->  00:00:50,080
you say when we are creating new entries of data on remote server.

11

00:00:50,550  -->  00:00:52,970
In addition the app so we've built so far.

12

00:00:52,980  -->  00:00:55,290
I've always used a single screen.

13

00:00:55,290  -->  00:00:59,760
There is no concept of like navigation within our apps.

14

00:00:59,760  -->  00:01:05,630
Changing the URL of the page never updates the content of the app in any way shape or form.

15

00:01:05,940  -->  00:01:11,220
So we're going to tackle these big gaps in our knowledge head first in this next section.

16

00:01:11,220  -->  00:01:15,710
In particular there is a couple of different topics that we're going to study in great detail.

17

00:01:15,990  -->  00:01:22,260
First we're going to talk about how to navigate a user around our app real javascript applications allow

18

00:01:22,260  -->  00:01:26,670
users to you know navigate around to see different pages of content.

19

00:01:27,000  -->  00:01:33,180
We need to figure out a way to add different pages to our application that the user can see.

20

00:01:33,180  -->  00:01:39,090
Second and this is very closely related to the first item we need to figure out how to load data from

21

00:01:39,090  -->  00:01:43,680
a back end API based on the users current route.

22

00:01:43,950  -->  00:01:48,930
So say when the user navigates around an application to some different page we need to go and fetch

23

00:01:48,930  -->  00:01:52,300
the relevant data before we can render that page.

24

00:01:52,410  -->  00:01:58,110
Finally we need to figure out how to build a useful forms that include at least a touch of validation

25

00:01:58,110  -->  00:01:58,740
.

26

00:01:58,800  -->  00:02:03,360
We view some you know small forms and the previous sections in the form of say you know search bars

27

00:02:03,780  -->  00:02:06,720
but they didn't really have any validation tied to them whatsoever.

28

00:02:06,720  -->  00:02:12,270
And the data that we collected would was was always used for a query like you know get requests we really

29

00:02:12,280  -->  00:02:17,930
need to figure out some way to take the data that the user enters validate it and then post it to a

30

00:02:17,930  -->  00:02:21,170
remote server and you actually save that record.

31

00:02:21,720  -->  00:02:22,170
OK.

32

00:02:22,170  -->  00:02:27,910
So let's talk about the app that we're going to built to explore some of these topics.

33

00:02:27,960  -->  00:02:32,460
I'm going to pull a mock up on my screen here and we're going to go through it.

34

00:02:32,760  -->  00:02:36,290
So this app is going to be a simple blogging application.

35

00:02:36,420  -->  00:02:42,990
So it's going to have the usual create replays update destroy type routes but we're going to go through

36

00:02:42,990  -->  00:02:48,140
it step by step and make sure that's crystal clear exactly how each step works.

37

00:02:48,150  -->  00:02:52,020
So the app is give me you know a little bit vanilla in this section we're not going to focus on styling

38

00:02:52,020  -->  00:02:56,280
very much it's going to kind of plane but we're going to make sure that it's really clear exactly how

39

00:02:56,280  -->  00:03:02,790
to do these very core actions on these very core parts of building a real application.

40

00:03:02,880  -->  00:03:04,590
So let's look at the app.

41

00:03:04,890  -->  00:03:09,020
The first screen is what we're going to refer to as our index view.

42

00:03:09,360  -->  00:03:15,480
The index shows a list of all of our different blog posts that this user currently has.

43

00:03:15,930  -->  00:03:22,710
If they click on a blog post so let's say you know click on this area right in here we should navigate

44

00:03:22,710  -->  00:03:30,210
to what's called a show page and that's this page in the middle of the show page shows a distinctly

45

00:03:30,210  -->  00:03:32,560
different view to the user.

46

00:03:32,560  -->  00:03:36,810
You know we're not showing a list of blog posts anymore we're showing just a single post right here

47

00:03:36,810  -->  00:03:39,850
in the middle.

48

00:03:39,930  -->  00:03:47,550
Finally the user can create new posts by clicking the ADD post button on the index screen over here

49

00:03:49,080  -->  00:03:55,740
which will take them to a kind of compose form where they'll create a new record a new blog post.

50

00:03:55,920  -->  00:04:02,700
The user can enter a title categories for the blog post and the actual content for the blog posts so

51

00:04:02,700  -->  00:04:04,770
you know the bulk of the text.

52

00:04:04,790  -->  00:04:07,520
That would consist of the actual blog post.

53

00:04:07,860  -->  00:04:13,170
Once they click the save button it will save the record to a back and server and then it will navigate

54

00:04:13,170  -->  00:04:16,610
them back to the index page.

55

00:04:16,620  -->  00:04:24,590
They can also click the cancel button here just as easily and go back to the index page as well.

56

00:04:24,600  -->  00:04:28,780
One thing they want to pull your attention to is the text at the top of each mark.

57

00:04:29,040  -->  00:04:31,690
I've labeled what I call here as a route.

58

00:04:31,740  -->  00:04:37,770
So this right here being forward slash means if I navigated to say like you know Blog Post dot com.

59

00:04:37,780  -->  00:04:40,090
Let's say that we were making a Web site called blog posts.

60

00:04:40,220  -->  00:04:47,430
I'm going to just the address Blog Post dot com would give us the route forward slash you know the root

61

00:04:47,430  -->  00:04:48,090
directory.

62

00:04:48,090  -->  00:04:50,690
The very core of the app.

63

00:04:50,850  -->  00:04:56,130
So when a user first navigates to our app and they are at this very core route right here they should

64

00:04:56,130  -->  00:05:00,150
end up seen the list of blog posts the index view.

65

00:05:01,020  -->  00:05:08,730
Similarly when they navigate to something like posts 5 where 5 is the of the blog post and so we might

66

00:05:08,730  -->  00:05:12,390
be you know post 5 post 1000 post.

67

00:05:12,450  -->  00:05:15,100
2400 15 or what have you.

68

00:05:15,120  -->  00:05:20,010
They should see a blog post that corresponds with that particular ID.

69

00:05:20,220  -->  00:05:25,890
So the idea here is that these parts of these the route that we're going to find have an actual impact

70

00:05:25,920  -->  00:05:29,250
and meaning within the application.

71

00:05:29,250  -->  00:05:36,390
Finally the last one post-New should just show a new form for the user to you know create the actual

72

00:05:36,390  -->  00:05:37,830
blog post.

73

00:05:38,580  -->  00:05:43,620
Ok so overall the blog posts are this opera here is going to behave much as you would really expect

74

00:05:43,830  -->  00:05:48,070
an app in this type of you know this type of application to behave.

75

00:05:48,090  -->  00:05:49,980
It's again not a kind of playing out.

76

00:05:50,010  -->  00:05:54,720
So we're really focusing on the functionality and making sure that we get these very core interactions

77

00:05:55,410  -->  00:05:58,550
done correctly as as correctly as possible.

78

00:05:59,140  -->  00:06:04,410
OK so with this in mind we're definitely come back to the mockup here several times so I'm going to

79

00:06:04,410  -->  00:06:06,050
keep it close at hand.

80

00:06:06,590  -->  00:06:12,340
The one thing that I do want to do in this section that is very code related is just to get our boilerplate

81

00:06:12,360  -->  00:06:13,820
package installed.

82

00:06:14,070  -->  00:06:21,270
So just as before in our previous packages or previous projects I'm at the redux simple starter link

83

00:06:21,270  -->  00:06:26,400
right here and make sure that you're on redux simple starter and you can use whatever set of installation

84

00:06:26,400  -->  00:06:28,070
directions you like right here.

85

00:06:28,080  -->  00:06:34,140
Just make sure that you grab a new copy of the repo so that we can get started in the next section so

86

00:06:34,140  -->  00:06:35,460
I'm going to go ahead and clone it

87

00:06:38,580  -->  00:06:42,920
and then I'm going to change into the directory and run an NPM install.

88

00:06:42,930  -->  00:06:48,960
Make sure that your dependencies installed and while that happens I will catch you in the next section

89

00:06:48,970  -->  00:06:49,390
.