All right guys so here comes your challenge. 1
So if you head over to the course resources for this lesson you should be able to discover a link that 2
takes you to this code sandbox 3
I prepared for you. And the first thing to do as always is to go ahead and fork the code sandbox. 4
That way you'll be able to keep a copy of your work. 5
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
if you need to. 7
So in this challenge there's a couple of steps 8
I want you to achieve. 9
I want you to go through each of these comments step by step and try to complete the challenge. 10
So in this case we want to create a React app from scratch. 11
So notice how inside our index.js I've kindly removed all the code for you so that you get extra 12
practice creating React apps. 13
But inside our index.html there is the predictable, div with the id of root. 14
So if you watched the last lesson you should know what to do. 15
And by the end of this challenge you should have created a website using React that has a h1 heading, 16
a unordered list so a bunch of bullet points 17
and it should contain three list elements. 18
So for example, I've created a list of my favorite foods. 19
Yep it's Angela talking about food again. 20
But here I've got an h1 with a heading and I've got three unordered list items listing all of my favorite 21
foods. 22
So now is the time for action. 23
Go ahead and pause the video and try to complete this challenge and then head back over here and we'll 24
run through the solution together. 25
I'll stay quiet now and let you do your work. 26
All right. 27
So how did that go? 28
Let's walk through the solution together and remember if you haven't given it a go, I really urge you 29
to do it. 30
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
developer. 32
So let's tackle the first comment, 33
Create a React app from scratch. 34
So remember that we've got our two dependencies which are installed into our project but in order to 35
use it we have to import them. 36
So let's import React from the React module and then let's import the ReactDOM from the react-dom module. 37
And now we can use them and the method that we want to use is render 38
and that comes from the ReactDOM. 39
So let's go ahead and do ReactDOM.render. 40
And in this method we have to provide two things at the minimum. 41
So the first thing is what to show 42
and the second is where to show it. 43
So out of these two things, what do we want to show? 44
Well we want to show a h1 heading. 45
So let's add that into the what to show. 46
So let's create an h1 heading and mine is, as always, going to be my favorite foods. 47
And then in terms of the where to show it 48
remember that we have our div in here with that particular id and we can get hold of this element 49
to insert our React elements into that div. 50
So the where to show it is going to require some JavaScript, so document.getElementById and the 51
id is the string which was called root. 52
So now if we hit save and we refresh our little browser on the right, then we should see our h1 showing 53
up right now. 54
So we've done step one, we've done step two 55
so now let's tackle this part. 56
It should also display an unordered list so a bunch of bullet points. 57
Now remember that the render method can only accept one element. 58
So we can't simply just tag our unordered list over here at the end. 59
But what we can do instead is we can firstly format our method a little bit. And instead of having two 60
HTML elements, we can wrap them inside a div. 61
So let me go ahead and create that div and then put the closing tag right here 62
just before that comma. 63
So this block is one thing and then let's add a new line over here. 64
So now we're abiding by the laws of the render method where we're only rendering a single element 65
but nobody said that the additional element can't have children. 66
So inside the div, we've got two child elements a ul and h1. 67
So now we can continue building out the rest of our app. 68
So inside our unordered list we're going to create three list elements. 69
So let's go ahead and add three lis. 70
And if you hit save 71
so COMMAND + S or CONTROL + S on Windows or go to file and save 72
and just look at that shortcut there 73
then it'll actually reformat your code and pretty far everything every time you do that makes it easier 74
to read. 75
So notice how just now when predefined are code, it actually changed this li from a normal li where 76
we can add something in the middle to a self closing tag. 77
So remember tags like image or link are self closing. 78
They don't have anything in between the tags unlike the list element or the ul or the h1 or the paragraph. 79
So that's just something to be aware of that when you hit save sometimes it reformats your code and update 80
certain things. 81
And in the case where you have HTML elements with nothing inside, so no children, it'll turn it into a 82
self closing tag. 83
So let me go ahead and add some content to our list elements so it won't think that it's empty. 84
So let's add our good old bacon as a list element and then maybe some noodles 85
Always good. 86
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
more likely to be something meaty. 88
All right. 89
So now we have created a website with an h1, an unordered list with three list items and they're 90
all being rendered inside this div with the id of root. Did you manage to solve this challenge? 91
If not or if any of this was confusing at all 92
be sure to have a play around with this completed code. So I'll include a link to this completed challenge 93
in the course resources and you can have a mess around with it and match up your code with mine 94
if you got any errors. Once you're comfortable with this idea of rendering HTML elements into 95
the DOM using React, then head over to the next lesson. 96
We're going to talk more about adding JavaScript expressions inside these HTML elements using our 97
JSX. So for all of that and more 98
I'll see you on the next lesson.