1
00:00:00,870 --> 00:00:02,550
We've now got our two services put together.

2
00:00:02,550 --> 00:00:05,360
So now it's time to start working on our ReACT application.

3
00:00:05,380 --> 00:00:06,590
We start working on the react app.

4
00:00:06,600 --> 00:00:07,620
Just a quick note.

5
00:00:07,890 --> 00:00:11,860
If you don't know react or if you don't want to work with it at all that is not a problem.

6
00:00:11,880 --> 00:00:16,020
This skip the videos or about to go through that focus on this react application and you can download

7
00:00:16,050 --> 00:00:19,250
all the completed react code in just a couple videos.

8
00:00:19,260 --> 00:00:23,340
Now at some point in time this application I will ask you to make a couple of changes to this react

9
00:00:23,340 --> 00:00:23,950
project.

10
00:00:24,030 --> 00:00:27,650
But in general it'll be a small set of changes so it shouldn't be too bad.

11
00:00:28,830 --> 00:00:29,100
OK.

12
00:00:29,160 --> 00:00:31,410
So with that might let's get started.

13
00:00:31,410 --> 00:00:36,150
The first thing we're going to do is come up with a general component design for our ReACT application

14
00:00:36,780 --> 00:00:39,630
on the left hand side I've got a mockup of our app on the right hand side.

15
00:00:39,630 --> 00:00:43,240
I've got a component hierarchy that I think we should try to implement.

16
00:00:43,240 --> 00:00:48,780
So at the very top is gonna be our classic app component we're then going to have a post create component

17
00:00:49,210 --> 00:00:54,320
the post great component as your guest is going to show that form right there.

18
00:00:54,540 --> 00:00:59,220
Well then also have a post list component the plus list component is going to render everything on the

19
00:00:59,220 --> 00:01:05,250
bottom half the page the post list is going to be in charge of showing the actual post themselves.

20
00:01:05,250 --> 00:01:11,740
And for every post will also show a comment list and a comment create component comment list is going

21
00:01:11,740 --> 00:01:16,340
to be in charge of rendering out a list of comments that have already been associated with the post.

22
00:01:16,350 --> 00:01:21,130
So right now in this mock up there's only one comment listed but we could easily have five 10 20 however

23
00:01:21,130 --> 00:01:26,110
many comments listed right there and then comment create as you would guess is going to be this form

24
00:01:26,170 --> 00:01:27,750
down here at the very bottom.

25
00:01:27,910 --> 00:01:32,680
So comment create will be in charge of creating an actual comment and associating it with a given post

26
00:01:34,160 --> 00:01:34,370
all right.

27
00:01:34,400 --> 00:01:35,970
So that's our component design.

28
00:01:35,990 --> 00:01:37,990
Let's now flip on over torch terminal.

29
00:01:38,030 --> 00:01:41,610
We're gonna start up our code editor inside of our ReACT project directory.

30
00:01:41,660 --> 00:01:48,140
We're going to start up a react application and start doing a little bit of initial setup all right.

31
00:01:48,170 --> 00:01:49,940
So I'll flip back over to my terminal.

32
00:01:50,090 --> 00:01:56,260
Here's my client project directorates that's where my react project is going to open up my code editor

33
00:01:56,270 --> 00:02:00,380
inside their and then I'll flip back over to my terminal.

34
00:02:00,520 --> 00:02:02,640
We're gonna do a very quick npm install here.

35
00:02:02,650 --> 00:02:08,390
We're gonna get the axles module just so we can make requests over to our Express API in a little bit.

36
00:02:08,460 --> 00:02:09,820
So I'll do a quick npm install

37
00:02:13,150 --> 00:02:19,040
and then after that is complete I'll make sure I do it in NPM start to start my project up and come

38
00:02:19,040 --> 00:02:21,750
on come on every go.

39
00:02:21,750 --> 00:02:24,330
So NPM start all right.

40
00:02:24,340 --> 00:02:27,910
So it's going to start up our ReACT application hopefully on port three thousand.

41
00:02:27,910 --> 00:02:30,560
Yep there it is right there.

42
00:02:30,580 --> 00:02:30,910
All right.

43
00:02:30,910 --> 00:02:35,440
So I'm not going to open up my editor inside of our ReACT project so make sure you're inside of your

44
00:02:35,440 --> 00:02:37,820
client directory inside of your editor.

45
00:02:37,840 --> 00:02:43,490
And then going to open up my s see directory and I'm going to delete everything inside there.

46
00:02:45,810 --> 00:02:49,880
The reason for that is that every now and then the react boiler plate changes just a little bit.

47
00:02:49,890 --> 00:02:53,190
There's a ton of regenerated code inside there that we really don't need.

48
00:02:53,190 --> 00:02:58,160
So it's a lot easier to just start off from scratch than inside my s RC folder.

49
00:02:58,170 --> 00:03:08,700
I'll make an index dot J File also make a app dot j ust file so our app dot J S file as your guest is

50
00:03:08,700 --> 00:03:10,330
going to be our app components.

51
00:03:10,470 --> 00:03:12,190
We're going to create the component side of here.

52
00:03:12,330 --> 00:03:17,580
We're then going to import it into the index not j ust file and then render it into some actual DOM

53
00:03:17,610 --> 00:03:21,360
element let's first start inside of APT.

54
00:03:21,400 --> 00:03:32,100
J.S. at the very top I will import react and react well then do an export default and for it now all

55
00:03:32,100 --> 00:03:39,450
destroy tentative that says most app or how about blog app doesn't really make a difference.

56
00:03:39,460 --> 00:03:45,050
Well then save this file I'm going to change back over to the index not just file that we just created

57
00:03:46,570 --> 00:03:53,810
I'm going to import react from react and react Dom from react dash Dom.

58
00:03:53,970 --> 00:04:02,510
Well then get my app component and then finally we'll do a react Dom dot render.

59
00:04:02,660 --> 00:04:08,270
I'm going to try to show an instance of my app component I want to render it into my index dot e-mail

60
00:04:08,300 --> 00:04:14,920
file that I go into my public directory find that file just as a quick reminder we are given this div

61
00:04:14,920 --> 00:04:18,730
right here at an idea route which is traditionally where we're going to render our route component to

62
00:04:19,720 --> 00:04:23,270
so as a second argument to react on dot render pass passing a reference

63
00:04:26,970 --> 00:04:30,730
to that root element like so yeah.

64
00:04:30,790 --> 00:04:38,020
So let's say this and then gonna go back over to my browser going to refresh the page looks like the

65
00:04:38,020 --> 00:04:41,560
entire process crashed because we deleted that indexed dot J as file.

66
00:04:41,560 --> 00:04:42,160
No problem.

67
00:04:42,160 --> 00:04:51,770
Holdco backward my terminal and restart the development server so once that is restarted go log app.

68
00:04:51,770 --> 00:04:52,030
All right.

69
00:04:52,120 --> 00:04:57,160
So humble beginnings we still have a lot of components to put together so quick pause start working

70
00:04:57,250 --> 00:04:59,560
on that entire component hierarchy in just a moment.