WEBVTT 0 00:00.320 --> 00:03.540 All right guys so here comes your challenge. 1 00:03.540 --> 00:09.570 So if you head over to the course resources for this lesson you should be able to discover a link that 2 00:09.570 --> 00:11.740 takes you to this code sandbox 3 00:11.760 --> 00:18.630 I prepared for you. And the first thing to do as always is to go ahead and fork the code sandbox. 4 00:18.840 --> 00:21.340 That way you'll be able to keep a copy of your work. 5 00:21.390 --> 00:26.580 And if you're logged in you'll be able to save it and take a look at it and come back to it later on 6 00:26.580 --> 00:27.300 if you need to. 7 00:28.260 --> 00:30.320 So in this challenge there's a couple of steps 8 00:30.390 --> 00:32.330 I want you to achieve. 9 00:32.550 --> 00:39.680 I want you to go through each of these comments step by step and try to complete the challenge. 10 00:39.690 --> 00:43.420 So in this case we want to create a React app from scratch. 11 00:43.420 --> 00:50.040 So notice how inside our index.js I've kindly removed all the code for you so that you get extra 12 00:50.040 --> 00:52.500 practice creating React apps. 13 00:52.500 --> 00:59.100 But inside our index.html there is the predictable, div with the id of root. 14 00:59.400 --> 01:02.410 So if you watched the last lesson you should know what to do. 15 01:02.460 --> 01:10.680 And by the end of this challenge you should have created a website using React that has a h1 heading, 16 01:11.070 --> 01:13.590 a unordered list so a bunch of bullet points 17 01:13.590 --> 01:16.050 and it should contain three list elements. 18 01:17.160 --> 01:22.780 So for example, I've created a list of my favorite foods. 19 01:22.800 --> 01:26.180 Yep it's Angela talking about food again. 20 01:26.520 --> 01:33.930 But here I've got an h1 with a heading and I've got three unordered list items listing all of my favorite 21 01:33.930 --> 01:35.180 foods. 22 01:35.220 --> 01:37.220 So now is the time for action. 23 01:37.230 --> 01:42.210 Go ahead and pause the video and try to complete this challenge and then head back over here and we'll 24 01:42.210 --> 01:44.000 run through the solution together. 25 01:44.040 --> 01:52.650 I'll stay quiet now and let you do your work. 26 01:52.910 --> 01:53.210 All right. 27 01:53.230 --> 01:54.850 So how did that go? 28 01:54.860 --> 02:00.230 Let's walk through the solution together and remember if you haven't given it a go, I really urge you 29 02:00.230 --> 02:00.770 to do it. 30 02:00.770 --> 02:05.300 I know there's a lot of repetition but it's going to build muscle memory and it's gonna make you a better 31 02:05.300 --> 02:06.270 developer. 32 02:06.320 --> 02:08.480 So let's tackle the first comment, 33 02:08.480 --> 02:11.570 Create a React app from scratch. 34 02:11.570 --> 02:18.170 So remember that we've got our two dependencies which are installed into our project but in order to 35 02:18.170 --> 02:20.640 use it we have to import them. 36 02:20.720 --> 02:32.980 So let's import React from the React module and then let's import the ReactDOM from the react-dom module. 37 02:33.140 --> 02:38.750 And now we can use them and the method that we want to use is render 38 02:38.750 --> 02:40.710 and that comes from the ReactDOM. 39 02:40.730 --> 02:44.780 So let's go ahead and do ReactDOM.render. 40 02:45.020 --> 02:49.590 And in this method we have to provide two things at the minimum. 41 02:49.620 --> 02:52.770 So the first thing is what to show 42 02:52.820 --> 02:55.850 and the second is where to show it. 43 02:57.230 --> 03:00.650 So out of these two things, what do we want to show? 44 03:00.650 --> 03:03.110 Well we want to show a h1 heading. 45 03:03.620 --> 03:07.170 So let's add that into the what to show. 46 03:07.210 --> 03:13.450 So let's create an h1 heading and mine is, as always, going to be my favorite foods. 47 03:13.790 --> 03:17.180 And then in terms of the where to show it 48 03:17.180 --> 03:24.230 remember that we have our div in here with that particular id and we can get hold of this element 49 03:24.350 --> 03:28.760 to insert our React elements into that div. 50 03:28.790 --> 03:35.930 So the where to show it is going to require some JavaScript, so document.getElementById and the 51 03:35.930 --> 03:40.100 id is the string which was called root. 52 03:40.100 --> 03:47.750 So now if we hit save and we refresh our little browser on the right, then we should see our h1 showing 53 03:47.750 --> 03:48.990 up right now. 54 03:49.010 --> 03:53.180 So we've done step one, we've done step two 55 03:53.180 --> 03:55.060 so now let's tackle this part. 56 03:55.160 --> 03:59.630 It should also display an unordered list so a bunch of bullet points. 57 03:59.630 --> 04:05.250 Now remember that the render method can only accept one element. 58 04:05.330 --> 04:10.790 So we can't simply just tag our unordered list over here at the end. 59 04:10.790 --> 04:19.510 But what we can do instead is we can firstly format our method a little bit. And instead of having two 60 04:19.560 --> 04:24.540 HTML elements, we can wrap them inside a div. 61 04:24.620 --> 04:29.530 So let me go ahead and create that div and then put the closing tag right here 62 04:29.570 --> 04:32.040 just before that comma. 63 04:32.090 --> 04:38.550 So this block is one thing and then let's add a new line over here. 64 04:38.570 --> 04:46.580 So now we're abiding by the laws of the render method where we're only rendering a single element 65 04:46.580 --> 04:50.420 but nobody said that the additional element can't have children. 66 04:50.630 --> 04:57.410 So inside the div, we've got two child elements a ul and h1. 67 04:58.550 --> 05:01.790 So now we can continue building out the rest of our app. 68 05:02.000 --> 05:06.020 So inside our unordered list we're going to create three list elements. 69 05:06.070 --> 05:08.900 So let's go ahead and add three lis. 70 05:08.900 --> 05:10.430 And if you hit save 71 05:10.460 --> 05:14.780 so COMMAND + S or CONTROL + S on Windows or go to file and save 72 05:14.840 --> 05:16.870 and just look at that shortcut there 73 05:17.090 --> 05:23.450 then it'll actually reformat your code and pretty far everything every time you do that makes it easier 74 05:23.450 --> 05:24.540 to read. 75 05:24.590 --> 05:33.260 So notice how just now when predefined are code, it actually changed this li from a normal li where 76 05:33.260 --> 05:38.640 we can add something in the middle to a self closing tag. 77 05:38.690 --> 05:43.610 So remember tags like image or link are self closing. 78 05:43.610 --> 05:53.270 They don't have anything in between the tags unlike the list element or the ul or the h1 or the paragraph. 79 05:53.270 --> 05:58.910 So that's just something to be aware of that when you hit save sometimes it reformats your code and update 80 05:58.910 --> 06:00.140 certain things. 81 06:00.140 --> 06:06.050 And in the case where you have HTML elements with nothing inside, so no children, it'll turn it into a 82 06:06.050 --> 06:08.290 self closing tag. 83 06:08.360 --> 06:13.750 So let me go ahead and add some content to our list elements so it won't think that it's empty. 84 06:13.820 --> 06:23.280 So let's add our good old bacon as a list element and then maybe some noodles 85 06:23.450 --> 06:24.590 Always good. 86 06:24.620 --> 06:33.080 And finally I'm going to add some veg but then again who am I kidding? Adding mushrooms in there. I think it's 87 06:33.080 --> 06:35.240 more likely to be something meaty. 88 06:35.240 --> 06:35.510 All right. 89 06:35.540 --> 06:43.640 So now we have created a website with an h1, an unordered list with three list items and they're 90 06:43.730 --> 06:54.100 all being rendered inside this div with the id of root. Did you manage to solve this challenge? 91 06:54.100 --> 06:57.880 If not or if any of this was confusing at all 92 06:57.880 --> 07:04.600 be sure to have a play around with this completed code. So I'll include a link to this completed challenge 93 07:04.900 --> 07:10.480 in the course resources and you can have a mess around with it and match up your code with mine 94 07:10.570 --> 07:17.500 if you got any errors. Once you're comfortable with this idea of rendering HTML elements into 95 07:17.560 --> 07:21.750 the DOM using React, then head over to the next lesson. 96 07:21.910 --> 07:29.920 We're going to talk more about adding JavaScript expressions inside these HTML elements using our 97 07:29.920 --> 07:32.720 JSX. So for all of that and more 98 07:32.770 --> 07:33.850 I'll see you on the next lesson.