1
00:00:00,690 --> 00:00:03,250
In the last video we generated our new project.

2
00:00:03,260 --> 00:00:06,110
So I'm not going to change into that new translate folder.

3
00:00:06,230 --> 00:00:10,980
I mean to start up my code editor inside there and then I'll start up my development server with NPM

4
00:00:11,010 --> 00:00:13,280
start.

5
00:00:13,340 --> 00:00:13,730
All right.

6
00:00:13,720 --> 00:00:16,460
So that's going to start of my application.

7
00:00:16,880 --> 00:00:21,660
I'm going to open it up inside my browser member local history thousand and we'll see the full application

8
00:00:21,660 --> 00:00:23,980
appear inside my code editor.

9
00:00:24,000 --> 00:00:27,870
We're gonna go through the typical setup that we go through in just about every application we've put

10
00:00:27,870 --> 00:00:29,230
together so far.

11
00:00:29,340 --> 00:00:31,360
So I'll find my SIRC directory.

12
00:00:31,370 --> 00:00:38,720
I'm going to highlight all the files inside there and delete all them all then create a index file inside

13
00:00:38,720 --> 00:00:41,750
the SIRC directory.

14
00:00:41,750 --> 00:00:50,760
Then inside of here I will import re-act from re-act import Riak Dom from re-act Dom I will import my

15
00:00:50,820 --> 00:00:57,510
app component which will create in just a moment from component's app and then I'll do my usual re-act

16
00:00:57,520 --> 00:01:10,440
Dom render and I'll pass an app with document data queery selector pounde root like so.

17
00:01:10,580 --> 00:01:10,870
All right.

18
00:01:10,880 --> 00:01:12,890
Let's now find our SIRC directory.

19
00:01:12,890 --> 00:01:19,080
Inside there is going to make a new folder called component's inside the compounds directory.

20
00:01:19,080 --> 00:01:25,880
I'll make a outtalk J.S. file and inside of here I will import re-act from re-act and then I will make

21
00:01:25,880 --> 00:01:35,600
a class app extends re-act component or define a render method that will return a div that simply says

22
00:01:35,660 --> 00:01:45,050
app and then I will export default app at the bottom like the net will save both these files and they'll

23
00:01:45,050 --> 00:01:48,660
flip back over to my browser and just make sure I see the text app appear on the screen.

24
00:01:48,710 --> 00:01:49,880
Very good.

25
00:01:49,880 --> 00:01:54,650
Next up we're going to wire up semantic UI we're using semantic UI because that's what's going to get

26
00:01:54,710 --> 00:01:57,200
these actual flags to render on the screen.

27
00:01:57,260 --> 00:02:03,600
So as usual I will google semantic UI CDN on this page.

28
00:02:03,610 --> 00:02:08,300
Search for semantic men and you'll find the Minot's CSSA file right here.

29
00:02:08,440 --> 00:02:09,720
I'll copy the link.

30
00:02:10,360 --> 00:02:11,870
I'll find my public directory.

31
00:02:11,890 --> 00:02:16,440
Open up the index at each file and I'll put my link inside of here.

32
00:02:16,660 --> 00:02:24,450
So link rel style sheet Tref and then copy in that link like so.

33
00:02:24,520 --> 00:02:26,490
And don't forget to close off the link tag.

34
00:02:27,220 --> 00:02:28,780
All right so we'll say this really quick.

35
00:02:28,780 --> 00:02:34,520
I'll flip back over to my browser and I should see that slightly formatted text appear.

36
00:02:34,630 --> 00:02:39,170
Now something we have ran into many times was the root class name on this component.

37
00:02:39,170 --> 00:02:40,240
Second to add that in right now.

38
00:02:40,270 --> 00:02:46,900
I'll simply say UI container like so and then if I save this I should see my app kind of just move in

39
00:02:46,900 --> 00:02:48,620
just a little bit on the screen.

40
00:02:48,940 --> 00:02:50,670
OK so that's a good place to get started.

41
00:02:50,680 --> 00:02:53,220
We'll take a quick pause right here when we come back in the next section.

42
00:02:53,230 --> 00:02:56,500
We're going to start building the actual language selector inside the app component.