All right.
So it's time to practice what you've learned so far.
Go ahead and head over to the Course Resources, get the link for this practice session, and then open it
up in your browser.
And then of course fork it so that you have your own copy of it in your sandbox and then go ahead and
look through these comments and try to complete this challenge.
We're going to be creating a React app from scratch again.
It should display two paragraph HTML elements.
The first paragraph should say, "Created by..." and then we're going to add in a const with your name, and then
the second one is a little bit harder,
it should say the Copyright of your website and the current year.
I have a bit of a pet peeve of websites which have the copyright which is hard coded,
so I really want you guys to dig through your knowledge of JavaScript and if you've dug and you can't
find anything, then head over to Google and try to see if you can figure out how to get this copyright
to be a dynamic date.
So instead of having it hard coded as 2019, when we enter 2020 or 2021 whichever year it may be right now,
the copyright should actually be updated using your JavaScript code.
So there's a bit of React challenge in here, there's a bit of JSX Challenge and there's also a bit
of plain vanilla JavaScript challenge for you.
I hope you'll give it a go. Pause the video and then come back here and we'll go through the solution together.
All right.
So we're getting quite a lot of practice creating React apps from scratch and there's good reason behind
this because it means that when you create it yourself, it's going to be a lot easier and it's going
to be like second nature.
So I've just imported React and ReactDOM from our two modules over here, and then I'm going go ahead
and use our ReactDOM to render some HTML.
So we're going display two paragraph elements.
So we've got the first one and we've got the second one.
So the first one should say something like, "Created by..." and then we're going to put your name or my name
in my case. And then we got a copyright and we're going to somehow add in the CURRENTYEAR.
That's what we're after.
And of course we can't render more than one HTML element,
so I'm going to wrap it inside a div.
All right.
So now that we've got what to render,
let's go ahead and get our document.getElementById and fetch that root div in order to render this
inside this.
So now we can see our "Created by YOURNAME", "Copyright CURRENTYEAR" which is not very exciting but let's
go ahead and insert some JavaScript into our HTML.
So the first const I'm going to create is going to be a name const
and it's going to be my name.
And then the second const is going to be a year const.
And for now, I'm just going to hardcode it as 2019 so that we can see it inserted in here.
So our paragraph is going to get a set of curly braces. In the set of curly braces,
I'm going to specify the name of my const right here.
So that goes in there,
"Created by Angela".
And then the copyright is going to have the current year.
So let's insert that year const into here.
So this is what it should look like.
But here comes the slightly more challenging part right?
We said we don't want this to be hard coded.
So we want to be able to use JavaScript to fetch the current year rather than hard coding it in like
this.
So how can we do that?
So if you don't know how to do this or you've forgotten which is perfectly likely when I switch around
between different languages I get confused too sometimes.
And it's good to know that Google and Stack Overflow are always there for you.
So here's a question, get the current year in JavaScript.
Sounds pretty much like what we want to do.
So we're going to have to create a new Date() object and then we call the method getFullYear(), and they've
even very helpfully linked to the Mozilla Developer Docs here so we can learn a bit more about it before
we use it.
So this method is supposed to return the year of the specified date and of course you can either create
the date yourself or in our case, we're going to be using new Date(), and this gives us the current date
right now.
So if we go back over here and we create a new const, which is the currentDate, and we set it equal
new Date().
So this object should now equal the current date when I am recording right now.
So if I go ahead and just log the value of currentDate and then go ahead and hit Save and check-in
our Console, you can see that it's Friday, November the 8th 2019 and that's this time and I'm on Greenwich
Mean Time right now because I'm recording in London. Now that we've got hold of the currentDate, we can
get the current year by using that date and calling that method getFullYear(). And now because this is a method
we of course have to add the parentheses at the end so that we can confirm and check that the year that
we've got hold of is indeed 20 19 which is indeed the current year.
So now let's go ahead and delete that and instead of console logging it, it's going to be inserted into
our paragraph element.
And when the date changes, say it's now 2022, June the 1st, then we're going to get 2022 inserted into
our year because it's going to be dynamically calculated based on the current date.
So there you go.
Did you manage to get that right?
If not, have a play around with the code as you have it here and I'll link to it as a completed sandbox
in the Course Resources for this lesson.
Now one common mistake that students make is they forget these parentheses and what happens in this
case is it's not going to work because this is a method. But even worse if we actually tried to put that
in here instead of creating that year const, then we actually get a warning from the console saying,
"Functions are not valid as a React child."
So what this is saying is getFullYear is a function,
and if we don't add the parentheses at the end, it's as if we're trying to pass in a function as the
value which of course doesn't work because unless we execute the function and call it which is denoted
by these parentheses, then it's not going to give us the value that we want. You can of course insert
the code inside here as a JavaScript expression because it evaluates to a value, the 2019 in this case,
or you can create a const as we did before where you work it out, assign it to a const,and then
put the const into our HTML element. Either of these ways works and if you want to take a look
at this completed code, I've included this sandbox inside the course resources for this lesson in this
current completed state.
So if there's anything that you're not sure about, have a play around with it and try changing things
around until you're comfortable with the code and the JSX...and the JavaScript that we've covered
in this lesson. And then we can head over to the next lesson and we can start learning more about styling
our HTML elements using React. So for all of that and more, I'll see you on the next lesson.