1
00:00:00,570 --> 00:00:05,360
In this video we're going to continue doing a little bit of low level set up on our project in particular.

2
00:00:05,390 --> 00:00:11,030
We're going to start putting together our post list component once we've got this component put together

3
00:00:11,090 --> 00:00:15,470
and shown inside the app will then start to call an action creator to go off and fetch the data we care

4
00:00:15,470 --> 00:00:19,920
about and will start talking about some interesting data fetch stuff around redux.

5
00:00:20,180 --> 00:00:21,840
All right so let's get to it.

6
00:00:21,860 --> 00:00:22,950
I can cite my editor.

7
00:00:22,970 --> 00:00:27,160
I'm going to find the components directory and inside there I'm going to create a new file called the

8
00:00:27,170 --> 00:00:30,430
post list G-S file.

9
00:00:30,590 --> 00:00:38,920
Then inside of your I'm going to import re-act from react and I would make this a class based component.

10
00:00:38,960 --> 00:00:41,830
You'll see why in just a moment.

11
00:00:42,250 --> 00:00:51,920
So the find my render method I will return a div with a text post list and then at the bottom I'll do

12
00:00:51,920 --> 00:00:58,900
an export default lowest list like so next step I'm going to take my post lists and import it into the

13
00:00:58,900 --> 00:01:01,450
app and show it inside the component.

14
00:01:01,480 --> 00:01:09,450
So inside the app I will import post list from Host List and then finally I'll replace the text right

15
00:01:09,450 --> 00:01:16,020
there with the post list I'm going to make this a multi-line GSX expression.

16
00:01:16,020 --> 00:01:19,480
So parentheses and closing parentheses.

17
00:01:19,470 --> 00:01:23,540
And don't forget to clean up that trailing semicolon at the end.

18
00:01:23,540 --> 00:01:25,840
All right so let's test this out really quickly.

19
00:01:26,120 --> 00:01:27,710
I flip back over to the application.

20
00:01:27,860 --> 00:01:30,000
I see pulseless on the screen.

21
00:01:30,000 --> 00:01:30,290
All right.

22
00:01:30,330 --> 00:01:36,230
Lesing I want to do as a little bit of setup is to wire up the semantic UI library or the CSSA library.

23
00:01:36,240 --> 00:01:45,810
One more time to remember to open up a new tab will search Google for semantic UI Cdn or find the Cdn

24
00:01:45,810 --> 00:01:52,450
link or search for semantic men CSSA on this page.

25
00:01:52,450 --> 00:01:57,960
There it is right there saw a copy of that link and then as usual we'll open up our public index.

26
00:01:58,020 --> 00:02:06,070
H.M. file right underneath the MedTech I'll put a link in here with a rel style sheet and an H.F. of

27
00:02:06,070 --> 00:02:08,840
that link will close a tag off on the far right hand side.

28
00:02:10,210 --> 00:02:10,630
All right.

29
00:02:10,690 --> 00:02:13,720
So if I flip back over everything should look pretty nice.

30
00:02:13,720 --> 00:02:15,520
I see the new font appear on the screen.

31
00:02:15,670 --> 00:02:16,030
OK.

32
00:02:16,030 --> 00:02:17,080
So let's pause right here.

33
00:02:17,080 --> 00:02:20,320
When we come back the next section we're going to start talking about the different methodologies that

34
00:02:20,320 --> 00:02:23,500
we're going to use to eventually fetch some data inside of redux.

35
00:02:23,500 --> 00:02:24,960
So we'll see you in just a minute.