Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
7488
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese