All right, guys, so here comes your challenge.
You should be able to discover a link that takes you to this code sandbox that I prepared for you.
And the first thing to do, as always, is to go ahead and fork the CodeSandbox.
That way you'll be able to keep a copy of your work, 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 if you need to.
So in this challenge, there's a couple of steps that I want you to achieve.
I want you to go through each of these comments step by step and try to complete the challenge.
So in this case we want to create a react app from scratch.
So notice how inside our index.js, I've kindly removed all the code for you so that you get extra practice
creating react apps,
but inside our index.html there is the predictable div with the id of root.
So if you watched the last lesson, you should know what to do and by the end of this challenge, you
should have created a website using react that has a h1 heading, an unordered list,
so a bunch of bullet points, and it should contain three list elements.
So for example I've created a list of my favorite foods.
Yep, it's Angela talking about food again.
But here I've got a h1 with a heading and I've got three unordered list items listing all of my
favorite foods.
So now is the time for action.
Go ahead and pause the video and try to complete this challenge.
And then head back over here and we'll run through the solution together.
I'll stay quiet now and let you do your work.
All right.
So how did that go?
Let's walk through the solution together.
And remember, if you haven't given it a go, I really urge you to do it.
I know there's a lot of repetition, but it's going to build muscle memory and it's going to make you
a better developer.
So let's tackle the first comment,
Create a react app from scratch.
So remember that we've got our two dependencies which are installed into our project,
but in order to use it, we have to import them.
So let's import React from the "react" module and then let's import the ReactDom
from the "react-dom" module, and now we can use them.
And the method that we want to use is render(),
and that comes from the ReactDom.
So let's go ahead and do ReactDom.render.
And in this method we have to provide two things at the minimum.
So the first thing is, "WHAT TO SHOW",
and the second is, "WHERE TO SHOW IT".
So out of these two things what do we want to show?
Well, we want to show a h1 heading.
So let's add that into the, WHAT TO SHOW.
So let's create a h1 heading,
and mine is as always going to be, "My favorite foods."
And then in terms of the where to show it, remember that we have our div in here with that particular
id, and we can get hold of this element to insert our react elements into that div.
So the, WHERE TO SHOW IT, is going to require some JavaScript.
So, document.getElementById and the id is the string which was called, "root".
So now if we hit Save and we refresh our little browser on the right, then we should see our h1 showing
up right now.
So we've done step one.
We've done step two.
So now let's tackle this part.
It should also display an unordered list.
So a bunch of bullet points.
Now, remember that the render() method can only accept one element.
So we can't simply just tag our unordered list over here at the end,
but what we can do instead is we can firstly format our method a little bit.
And instead of having two HTML elements, we can wrap them inside a div.
So let me go ahead and create that div and then put the closing tag right here,
just before that comma.
So this block is one thing.
And then let's add a new line over here.
So now we're abiding by the laws of the render() method where we're only rendering a single element,
but nobody said that the HTML element can't have children.
So inside the div, we've got two child elements a ul and a h1.
So now we can continue building out the rest of our app.
So inside our unordered list we're going to create three list elements.
So let's go ahead and add three li's.
And if you hit Save, so command S or control S on Windows, or go to File and Save,
and just look at that shortcut there,
then it'll actually reformat your code and prettify everything. Every time you do
that, makes it easier to read.
So notice how just now when it prettified our code, it actually changed this li from a normal li,
where we can add something in the middle to a self-closing tag.
So remember tags like image or link are self-closing.
They don't have anything in between the tags, unlike the list element, or the ul or the h1 or the
paragraph.
So that's just something to be aware of that when you hit save, sometimes it reformats your code and
update certain things, and in the case where you have HTML elements with nothing inside so no children,
it'll turn it into a self-closing tag.
So let me go ahead and add some content to our list element so it won't think that it's empty.
So let's add our good old Bacon as a list element.
And then maybe some Noodles,
always good.
And finally I'm going to add some veg,
but then again, who am I kidding
adding mushrooms in there.
I think it's more likely to be something meaty.
All right.
So now we have created a website with a h1, an unordered list with three list items, and they're
all being rendered inside this div with the id of root.
Did you manage to solve this challenge?
If not, or if any of this was confusing at all, be sure to have a play around with this completed
code, so I'll include a link to this completed challenge in the course resources, and you can have
a mess around with it and match up your code with mine if you got any errors.
Once you're comfortable with this idea of rendering HTML elements into the Dom using React, then head
over to the next lesson and
we're going to talk more about adding JavaScript expressions inside these HTML elements using our JSX.
So for all of that and more, I'll see you on the next lesson.