1 00:00:00,860 --> 00:00:06,210 Unless sexually generated a new project I'm not going to change into that new project directory. 2 00:00:06,410 --> 00:00:11,860 And then all startup might react server inside there with NPM start. 3 00:00:11,880 --> 00:00:12,200 All right. 4 00:00:12,210 --> 00:00:13,160 So there we go. 5 00:00:13,170 --> 00:00:15,890 We've now got a fresh reactor application up and running. 6 00:00:16,320 --> 00:00:21,480 I'm now going to also make sure they open up my code editor on that new project directory. 7 00:00:21,690 --> 00:00:26,130 So I'm going to find that components folder components project directory we just put together and I'm 8 00:00:26,130 --> 00:00:32,250 going to open that thing up like so then finally inside my SIRC directory I'm going to find all the 9 00:00:32,280 --> 00:00:36,200 automatically generated files inside of here and I'm going to delete all them. 10 00:00:36,240 --> 00:00:38,400 So you can start from scratch. 11 00:00:38,490 --> 00:00:39,300 All right. 12 00:00:39,360 --> 00:00:45,420 So remember the first take that we're going to do on this project we're going to put together a single 13 00:00:45,420 --> 00:00:50,520 component and we're going to write out all of the different GSX we need inside there to make these three 14 00:00:50,580 --> 00:00:52,840 different comments all in one go. 15 00:00:53,190 --> 00:00:58,170 So I'm going to flip back over to my code editor and inside of my sarcy directory I'm going to create 16 00:00:58,200 --> 00:01:00,470 a new file called index. 17 00:01:00,570 --> 00:01:05,580 Yes like so then at the top of this file will put in a little bit of familiar code. 18 00:01:05,860 --> 00:01:12,950 So I'll say import re-act from reacts or do import re-act Dom from re-act dash Dom. 19 00:01:12,940 --> 00:01:23,780 I'll then make a new app component and inside there right now I'll return a simple div that says I there. 20 00:01:24,150 --> 00:01:27,160 And then finally at the bottom of the file I'll do react. 21 00:01:27,220 --> 00:01:32,370 Dom does render all sad once render an instance of my app component. 22 00:01:32,370 --> 00:01:40,030 Now I want to render it into document dumb queries selector not going to find that same div with an 23 00:01:40,030 --> 00:01:41,510 idea of root like so. 24 00:01:42,360 --> 00:01:46,920 All right so the code that you see right here is what we just wrote into our last project in writing 25 00:01:46,920 --> 00:01:51,270 all this stuff out is going to become second nature for you very quickly. 26 00:01:51,270 --> 00:01:53,450 So if it seems tedious to write this all out right now. 27 00:01:53,460 --> 00:01:56,390 Don't sweat it you're going to get so much practice writing this. 28 00:01:56,490 --> 00:02:00,930 All right so going to save this file and then we should build to flip back over to our browser and see 29 00:02:00,930 --> 00:02:01,420 the text. 30 00:02:01,440 --> 00:02:02,810 Hi there appear on the screen. 31 00:02:03,000 --> 00:02:05,070 OK so it looks good. 32 00:02:05,170 --> 00:02:09,490 So now we need to start replacing the simple div that we have inside of here with the list of comments 33 00:02:09,490 --> 00:02:10,420 instead. 34 00:02:10,420 --> 00:02:15,640 Now I know to be honest with you this is not really a course about basic styling and CSSA and stuff 35 00:02:15,640 --> 00:02:16,470 like that. 36 00:02:16,570 --> 00:02:21,790 We are going to talk at great length about how to integrate CSSA in different forms into a Riak project 37 00:02:22,030 --> 00:02:26,980 but we're not going to spend a tremendous amount of time writing out CSSA from scratch. 38 00:02:27,070 --> 00:02:28,250 So does that mean. 39 00:02:28,260 --> 00:02:33,400 Well basically when I looked at this list of blog comments right here there is going to be a fair amount 40 00:02:33,400 --> 00:02:38,370 of CSSA styling that we're going to have to do rather than writing out all these CSSA from scratch. 41 00:02:38,380 --> 00:02:44,470 We're going to instead pull in a very simple in a very handy CSSA library to essentially take care of 42 00:02:44,500 --> 00:02:46,170 all the styling for us. 43 00:02:46,180 --> 00:02:50,290 Like I said we're going to eventually talk at great length about styling Interac project. 44 00:02:50,290 --> 00:02:53,610 But right now I just want to get some default styling put together. 45 00:02:53,830 --> 00:02:55,410 So let's talk about the styling. 46 00:02:55,420 --> 00:02:56,630 We're going to use. 47 00:02:56,940 --> 00:03:03,970 I'm going to open up a new browser tab and navigate to semantic Dasch UI dot com and I'll through that 48 00:03:03,970 --> 00:03:06,830 in my code editor right here so you can see it very plainly. 49 00:03:08,590 --> 00:03:15,110 OK don't semantic UI is an open source styling or CSSA framework. 50 00:03:15,280 --> 00:03:20,350 You can click on this many button on the top left one side and then scroll through all of these different 51 00:03:20,410 --> 00:03:22,190 elements that are provided for you. 52 00:03:22,510 --> 00:03:27,160 You can click on any of them and take a look at some of the default styling that you get if you make 53 00:03:27,160 --> 00:03:29,500 use of this semantic UI library. 54 00:03:29,760 --> 00:03:33,550 Now this library is a simple CSSA file by default. 55 00:03:33,580 --> 00:03:38,170 You don't have to install any javascript or any re-act related stuff whatsoever. 56 00:03:38,170 --> 00:03:43,630 It's just a CSSA file that's going to give us a little bit of default styling on the left hand side 57 00:03:43,630 --> 00:03:45,890 if you scroll down to the views section. 58 00:03:46,030 --> 00:03:48,430 You'll find that there's something inside of here called comment. 59 00:03:48,440 --> 00:03:54,170 Let me zoom in a little bit so you can see that right there there is comment so under the U.S. You can 60 00:03:54,170 --> 00:03:58,880 find comment and if you scroll down a little bit you'll see something that looks very similar to more 61 00:03:58,880 --> 00:04:02,090 or less what we're trying to build a list of comments like so. 62 00:04:02,480 --> 00:04:07,040 So if we make use of semantic UI we can essentially get all the styling that we need for free without 63 00:04:07,040 --> 00:04:09,230 having to waste a lot of time on it. 64 00:04:09,230 --> 00:04:12,410 So with that in mind let's install semantic UI now. 65 00:04:12,410 --> 00:04:18,630 Unfortunately the Getting Started documentation here is not the clearest thing in the world. 66 00:04:18,630 --> 00:04:22,060 They're getting started documentation on semantic UI docs. 67 00:04:22,100 --> 00:04:27,040 It tells you how to kind of put all this stuff together from scratch using build tools. 68 00:04:27,050 --> 00:04:32,480 Now we could definitely go down this path but there's definitely a much easier way for us to install 69 00:04:32,480 --> 00:04:33,270 this. 70 00:04:33,320 --> 00:04:40,640 If you open up a new browser tab you can search for semantic UI CDN and I'll put the search term again 71 00:04:40,640 --> 00:04:43,240 inside my code editor just so you can see it very plainly. 72 00:04:43,290 --> 00:04:46,570 Semantic UI CDN. 73 00:04:46,710 --> 00:04:52,210 And then the first link that you'll see right here will probably be something like CDN J.S. dot com. 74 00:04:52,590 --> 00:04:59,210 So if you click on that bill then take us to a page that lists all the different versions of that semantic 75 00:04:59,240 --> 00:05:00,430 UI library. 76 00:05:00,440 --> 00:05:01,790 Nice and easy to use. 77 00:05:01,820 --> 00:05:05,400 We don't have to do any additional build steps or anything like that. 78 00:05:05,420 --> 00:05:08,330 You'll notice that there's many different versions of this library. 79 00:05:08,420 --> 00:05:13,680 So we're going to scroll down a little bit and a little bit o ways down here. 80 00:05:15,870 --> 00:05:19,480 Maybe a good amount other ways down here towards the bottom end where we go right here. 81 00:05:19,620 --> 00:05:23,740 We're looking for something called semantic Duckman CSX. 82 00:05:23,880 --> 00:05:27,940 If you can't find it on the list you can always hit command F and do a quick search. 83 00:05:27,960 --> 00:05:31,340 Semantic men CSSA like so. 84 00:05:31,490 --> 00:05:33,720 So we're going to copy that link right there. 85 00:05:33,840 --> 00:05:39,780 That's a link to a publicly hosted version of the semantic UI at CSSA file so we can very easily use 86 00:05:39,780 --> 00:05:41,330 that inside of our project. 87 00:05:41,700 --> 00:05:47,250 So I got a quick copy over here for the minute CSSA file and then I'll hook that thing up inside of 88 00:05:47,250 --> 00:05:53,200 the HTL file that is currently used for our project which you'll recall is inside of that public directory. 89 00:05:53,220 --> 00:05:59,340 So inside of public I'll find indexed on HD mail and then we're going to add this new C-s this file 90 00:05:59,400 --> 00:06:03,240 into our head tag as it would any other CSSA file. 91 00:06:03,660 --> 00:06:10,650 So after the Medhat tag right here this looks like a reasonal place or put in link rail equals stylesheet 92 00:06:11,400 --> 00:06:18,750 and then a Tref equals and then I'll paste in the link that I just copied from that CD and Page Mehl 93 00:06:18,760 --> 00:06:25,620 make sure that on the right hand side I close off that tag like so I guess that looks good. 94 00:06:25,630 --> 00:06:27,820 So I'm not going to save this file. 95 00:06:27,820 --> 00:06:34,640 And then if I go back over to my browser and find localhost 3000 we should see that the page has automatically 96 00:06:34,640 --> 00:06:38,420 refresh and you'll know that semantic UI has been loaded up properly. 97 00:06:38,450 --> 00:06:41,830 If you see that the text font right here has changed slightly. 98 00:06:41,840 --> 00:06:42,880 Mine definitely has. 99 00:06:42,950 --> 00:06:45,710 So I know that Symantec is installed correctly. 100 00:06:45,710 --> 00:06:49,890 Another way that you can make sure that it got installed would be to right click anywhere on the page. 101 00:06:49,910 --> 00:06:57,580 Open up your chrome inspect menu then go to the sources tab or sees me not to source the tab at the 102 00:06:57,580 --> 00:06:58,480 Network tab. 103 00:06:59,320 --> 00:07:02,260 You can then click on this CSSA option right here. 104 00:07:02,590 --> 00:07:07,760 Refresh the page and you'll see that semantic man CSSA got loaded up successfully. 105 00:07:08,140 --> 00:07:10,540 OK so now that we've got this styling library for free. 106 00:07:10,690 --> 00:07:11,800 Let's take a quick pause. 107 00:07:11,800 --> 00:07:15,060 We'll come back the next section and start putting together this list of comments.