All right. 1
So it's time to practice what you've learned so far. 2
Go ahead and head over to the course resources, get the link for this practice session and then open 3
up in your browser. 4
And then of course fork it so that you have your own copy of it in your sandbox and then go ahead and 5
look through these comments and try to complete this challenge. 6
We're going to be creating a React app from scratch again. 7
It should display two paragraph HTML elements. 8
The first paragraph should say, "Created by..." and then we're going to add in a constant with your name, and then 9
the second one is a little bit harder. 10
It should say the copyright of your website and the current year. 11
I have a bit of a pet peeve of websites which have the copyright which is hard coded. 12
So I really want you guys to dig through your knowledge of JavaScript and if you've dug and you can't 13
find anything then head over to Google and try to see if you can figure out how to get this copyright 14
to be a dynamic date. 15
So instead of having it hard coded as 2019 when we enter 2020 or 2021 whichever year it may be right now, 16
the copyright should actually be updated using your Javascript code. 17
So there's a bit of React challenge in here, there's a bit of JSX Challenge and there's also a bit 18
of plain vanilla Javascript challenge for you. 19
I hope you'll give it a go. Pause the video and then come back here and we'll go through the solution together. 20
All right. 21
So we're getting quite a lot of practice creating React apps from scratch and there's good reason behind 22
this because it means that when you create it yourself, it's going to be a lot easier and it's going 23
to be like second nature. 24
So I've just imported React and ReactDOM from our two modules over here and then I'm gonna go ahead 25
and use our ReactDOM to render some HTML. 26
So we're gonna display two paragraph elements. 27
So we've got the first one and we've got the second one. 28
So the first one should say something like, "Created by..." and then we're going to put your name or my name 29
in my case. And then we got a copyright and we're going to somehow add in the current year. 30
That's what we're after. 31
And of course we can't render more than one HTML element 32
so I'm going to wrap it inside a div. 33
All right. 34
So now that we've gone what to render 35
let's go ahead and get our document, getElementById and fetch that root div in order to render this 36
inside this. 37
So now we can see our Created by YOURNAME, Copyright CURRENTYEAR which is not very exciting but let's 38
go ahead and insert some javascript into our HTML. 39
So the first constant I'm going to create is going to be a name constant. 40
And it's going to be my name. 41
And then the second constant is going to be a year constant. 42
And for now I'm just going to hardcoded as 2019 so that we can see it inserted in here. 43
So our paragraph is going to get a set of curly braces. In the set of curly braces 44
I'm going to specify the name of my constant right here. 45
So that goes in there. 46
Created by Angela. 47
And then the copyright is going to have the current year. 48
So let's insert that year constant into here. 49
So this is what it should look like. 50
But here comes the slightly more challenging part right? 51
We said we don't want this to be hard coded. 52
So we want to be able to use Javascript to fetch the current year rather than hard coding it in like 53
this. 54
So how can we do that? 55
So if you don't know how to do this or you've forgotten which is perfectly likely when I switch around 56
between different languages I get confused too sometimes. 57
And it's good to know that Google and Stack Overflow are always there for you. 58
So here's a question, get the current year in JavaScript. 59
Sounds pretty much like what we want to do. 60
So we're gonna have to create a new date object and then we call the method getFullYear and they've 61
even very helpfully linked to the Mozilla developer docs here so we can learn a bit more about it before 62
we use it. 63
So this method is supposed to return the year of the specified date and of course you can either create 64
the date yourself or in our case we're going to be using new date and this gives us the current date 65
right now. 66
So if we go back over here and we create a new constant, which is the current date, and we set it equal 67
new Date. 68
So this object should now equal the current date when I am recording right now. 69
So if I go ahead and just log the value of current date and then go ahead and hit save and check in 70
our console you can see that it's Friday November the 8th 2019 and that's this time and I'm on Greenwich 71
Mean Time right now because I'm recording in London. Now that we've got hold of the current date we can 72
get the current year by using that date and calling that method getFullYear. And now because it is a method 73
we of course have to add the parentheses at the end so that we can confirm and check that the year that 74
we've got hold of is indeed 20 19 which is indeed the current year. 75
So now let's go ahead and delete that and instead of console logging it, it's going to be inserted into 76
our paragraph element. 77
And when the date changes say it's now 2022, June the 1st, then we're going to get 2022 inserted into 78
our year because it's going to be dynamically calculated based on the current date. 79
So there you go. 80
Did you manage to get that right? 81
If not, have a play around with the code as you have it here and a link to it as a completed sandbox 82
in the course resources for this lesson. 83
Now one common mistake that students make is they forget these parentheses and what happens in this 84
case is it's not going to work because this is a method. But even worse if we actually tried to put that 85
in here instead of creating that year constant then we actually get a warning from the console saying 86
functions are not valid as a React child. 87
So what this is saying is getFullYear is a function. 88
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 89
value which of course doesn't work because unless we execute the function and call it which is denoted 90
by these parentheses, then it's not going to give us the value that we want. You can of course insert 91
the code inside here as a Javascript expression because it evaluates to a value the 2019 in this case 92
or you can create a constant as we did before where you work it out, assign it to a constant and then 93
put the constant into our HTML element. Either of these ways work and if you want to take a look 94
at this completed code, I've included this sandbox inside the course resources for this lesson in this 95
current completed state. 96
So if there's anything that you're not sure about, have a play around with it and try changing things 97
around until you're comfortable with the code and the JSX and the Javascript that we've covered 98
in this lesson. And then we can head over to the next lesson and we can start learning more about styling 99
our HTML elements using React. So for all of that and more, I'll see you on the next lesson.