1 00:00:00,650 --> 00:00:05,690 In the section we're going to continue working on the index file file We're going to focus on creating 2 00:00:05,720 --> 00:00:11,420 a Riak component for we do that whoever I want to very quickly tell you about exactly what a Riak component 3 00:00:11,510 --> 00:00:12,850 is. 4 00:00:12,860 --> 00:00:20,270 All right so quick diagram orea component is a function or a class back on code with that quick example 5 00:00:20,270 --> 00:00:26,300 we did a while ago you saw an example of a class based component where we can also create them as a 6 00:00:26,300 --> 00:00:27,380 function. 7 00:00:27,500 --> 00:00:32,840 The purpose of a component that is either a function or a class is to produce each TNL that we're going 8 00:00:32,840 --> 00:00:34,340 to show to the user. 9 00:00:34,580 --> 00:00:38,210 Its secondary purpose is to handle feedback from the user. 10 00:00:38,210 --> 00:00:44,480 So for example any time user clicks or types or Drac's or any type of event like that in order to produce 11 00:00:44,480 --> 00:00:50,570 content or e-mail the show the user We're going to write out some amount of GSX remember GSX that stuff 12 00:00:50,570 --> 00:00:54,770 that kind of looks like HD CML in order to handle feedback from the user. 13 00:00:54,770 --> 00:00:57,730 Remember we're going to use those things called event handlers. 14 00:00:58,040 --> 00:01:01,770 We'll talk about this other step right here handling feedback a little bit later on. 15 00:01:01,790 --> 00:01:07,250 Right now our focus is just on showing content to the user and using some amount of GSX. 16 00:01:07,310 --> 00:01:13,450 So let's now flip back over to our index such as file and underneath this comment we're going to create 17 00:01:13,480 --> 00:01:16,150 a new function component. 18 00:01:16,150 --> 00:01:19,960 So I going to say Konst app is equal to a function 19 00:01:23,050 --> 00:01:30,030 and inside if you're going to return a div that has the text Hi there like so. 20 00:01:30,400 --> 00:01:30,820 And that's it. 21 00:01:30,820 --> 00:01:33,730 That is a function based component right there. 22 00:01:33,730 --> 00:01:37,930 Now this is a component that is using a function with the function keyword. 23 00:01:37,930 --> 00:01:44,530 You will very frequently see this rewritten using a yes 2015 ero function instead it would look a little 24 00:01:44,590 --> 00:01:50,680 like that rather than putting the function keyword we put in ero which is the equals and then greater 25 00:01:50,680 --> 00:01:53,060 sign on the other side of the parentheses. 26 00:01:53,500 --> 00:01:58,450 Then inside of the function component we return a little bit of GSX right here. 27 00:01:59,350 --> 00:02:03,950 So now that we've got a function based component put together we're going to take that component and 28 00:02:03,950 --> 00:02:08,690 we're going to show it on the screen in our browser so to do so I'm going to add a little bit more code 29 00:02:08,690 --> 00:02:10,000 down here at the bottom. 30 00:02:10,130 --> 00:02:18,470 I'm going to say re-act Dom member Dom has capital D O M render and then I'm going to open up a function 31 00:02:18,470 --> 00:02:25,120 call and I'm going to expand it like so just give myself a little bit more space to type for the first 32 00:02:25,120 --> 00:02:25,900 argument. 33 00:02:25,900 --> 00:02:31,450 I'm going to take that app component that we just created and I'm going to put it into GSX tax or essentially 34 00:02:31,550 --> 00:02:33,740 looks like h t m l Tex. 35 00:02:33,790 --> 00:02:40,600 So I'll put an app like so or then put a comma for my second argument and the second argument is going 36 00:02:40,600 --> 00:02:46,150 to be a reference to a dom element that already exists inside of our HMO file. 37 00:02:46,220 --> 00:02:50,480 We might pause right there and say seaven wait what HMO filed what its email file. 38 00:02:50,860 --> 00:02:52,910 Well we haven't really spoken about it just yet. 39 00:02:52,930 --> 00:02:58,830 But you'll notice that inside that public directory We have a index done HTL file right now. 40 00:02:58,830 --> 00:03:05,770 Anytime that someone goes to localhost three thousand they get sent this HTL file right here inside 41 00:03:05,810 --> 00:03:06,940 the sage D-Mo. file. 42 00:03:06,940 --> 00:03:13,090 You can scroll down to the body and inside the body you'll see that there is a div with an ID of root. 43 00:03:13,360 --> 00:03:16,970 Convention in a create re-act out generated application. 44 00:03:17,020 --> 00:03:23,020 We're going to take our component and render it or display it inside of this div with ID root right 45 00:03:23,020 --> 00:03:23,530 here. 46 00:03:24,270 --> 00:03:30,420 So we need to essentially get a reference to this div with ID roots and then we are going to pass it 47 00:03:30,420 --> 00:03:36,750 as the second argument to the rock Dom render call back over here inside of our index such as file to 48 00:03:36,750 --> 00:03:37,320 do so. 49 00:03:37,320 --> 00:03:46,060 I'm going to write out document queries selector and I'll pass a string with pounde root like so. 50 00:03:46,120 --> 00:03:50,750 So that call right there is going to get a reference to that div with an ID of roots. 51 00:03:50,980 --> 00:03:55,740 This is a built in native function that is available in all browsers. 52 00:03:55,750 --> 00:04:00,280 So we don't have to import anything or do anything like that in order to use it. 53 00:04:00,280 --> 00:04:01,670 OK so that's pretty much it. 54 00:04:01,690 --> 00:04:05,910 That is the three steps we have to go through to get some content to appear on our browser. 55 00:04:05,920 --> 00:04:07,340 Let's now save this file. 56 00:04:07,390 --> 00:04:11,530 Not just you know when I saved this file you might see my code jump just a little bit because I have 57 00:04:11,530 --> 00:04:13,090 a automatic code formatter. 58 00:04:13,340 --> 00:04:13,870 Yep there it is. 59 00:04:13,870 --> 00:04:16,540 So it just did a little jump right there just reformatted itself. 60 00:04:16,540 --> 00:04:17,820 Still the exact same stuff. 61 00:04:17,890 --> 00:04:19,970 It just condensed down to one line. 62 00:04:20,050 --> 00:04:25,840 Now that I saved this file I should be able to flip back over to my browser at localhost 3000 and I'll 63 00:04:25,840 --> 00:04:30,760 see the content being produced from our function based component appear on the screen. 64 00:04:30,970 --> 00:04:32,620 It says simply Hi there. 65 00:04:32,970 --> 00:04:33,250 OK. 66 00:04:33,260 --> 00:04:33,990 So that's pretty much it. 67 00:04:34,000 --> 00:04:36,180 That's how we get some content to appear on the screen. 68 00:04:36,220 --> 00:04:41,500 We import react and react Domm we create a real component and then we take that component and show it 69 00:04:41,560 --> 00:04:45,110 on the screen using the re-act Dom library. 70 00:04:45,130 --> 00:04:47,260 So now we've got a little scaffold here. 71 00:04:47,290 --> 00:04:52,480 We're going to take a pause come back the next section and start to learn a lot more about sex and how 72 00:04:52,480 --> 00:04:53,470 we interact with it. 73 00:04:53,680 --> 00:04:55,890 So quick pause and I'll see you in just a minute.