Hey guys. 1
So in the last few lessons we saw that by using JSX, we were able to insert HTML into JavaScript. 2
And this ability came from JSX. 3
But JSX actually lets us go even further than that. It actually lets us add HTML inside a JavaScript 4
file and then insert JavaScript inside that HTML. 5
But in order to learn more about this we need to go deeper. Head over to the course resources 6
if you want to get the starting file for this lesson and work alongside with me. Starting out I've got 7
a very simple React app and I've imported React and ReactDOM and then I'm using ReactDOM to render a single 8
h1 onto the root div. 9
So from here let's say that I had a variable that I wanted to insert right? 10
Let's say I had a const called name and the data stored inside this constant is just my name. 11
Instead of saying "Hello World" what if I wanted to say "Hello Angela"? 12
Now I can't just simply use the name of this constant. I can't just say hello name because it's just 13
going to be interpreted as literally a string because we're inside a JSX file. 14
If we simply add the name of the variable or the constant inside as a child of an HTML Element, it's 15
just going to interpret it as a string. 16
So what do we have to do instead? 17
Let's think about this. 18
We're currently inside a JavaScript file index.js, and we can write JavaScript code which is pretty 19
reasonable. But then using JSX by installing the React module we were able to inject HTML inside 20
our JavaScript file. 21
Now if we wanted to insert JavaScript code inside the HTML inside the JavaScript file then what we have 22
to do is to simply wrap the JavaScript inside a set of curly braces. and notice how as soon as I did 23
that it knew that I was talking about the name constant rather than just the string name and it pulled 24
that data over from here and inserted it into my H1. So why don't you have a go at this? Create 25
a new constant with your lucky number, 26
so that could just be a simple value that you pick. And then create a paragraph that's going to be rendered 27
that says, 'Your lucky number is' and then insert that constant or variable into that paragraph element and 28
achieve something that looks a bit like this. 29
So pause video and give that a go. 30
All right. 31
So we've got a new constant that I'm gonna call num and I'm gonna set it to my lucky number. 32
Let's just say it's 7. 33
I actually think that all the numbers are pretty lucky. 34
But let's go ahead and add that number into a paragraph tag. 35
So your lucky number is this particular number constant. 36
Let's not worry about all the syntax errors we're getting, we're gonna be getting a lot of problems. 37
We're not quite done yet. 38
So the first issue that we have to solve is the fact that we've got two HTML elements right? 39
So in order for this to work, we of course need to wrap this inside a div. 40
So we end up with a single HTML div element that's being rendered onto the screen. 41
And if I hit save it'll nicely reformat this for me so I can see it a little bit better. But I don't 42
want it to read my lucky number is num, I want instead the actual constant's value to be rendered here. 43
So I'm going to wrap that constant name, which of course is JavaScript and not HTML, inside a set of curly 44
braces 45
in order to get my compiler to interpret this as actual JavaScript. Now you can go much further than 46
this because once you open up a set of curly braces, you can actually create any JavaScript expression. 47
So if instead of using a constant that doesn't change I could write some maths right? 48
3 + 4 is still 7 or 3 + 9 is 12. 49
I can get this code inside here to be evaluated and worked out and then inserted into my HTML. And if 50
you wanted to go even further, we could actually generate a random number here right? 51
We could use math.random and then add a set of parentheses. 52
We've got a random number which is very small so let's make it between 1 and 10 53
by multiplying it by 10 and then let's round it down using the floor method and then wrap that math. 54
random multiply 10 inside that, and we end up with a new random number. 55
And notice how every time I refresh this, I'll get a new number between 0 and 9. 56
Now remember that I said you can add any JavaScript expression in between these curly braces which is 57
injecting code into our HTML elements in our JSX file. But we can't write JavaScript statements. 58
So what I mean by that? 59
I can't for example decide to write if name is equal to Angela 60
well then return 7 but 61
else if name is equal to Jack then return 12 or something like this 62
right? 63
This doesn't work because this is actually a statement rather than an expression. 64
And the big difference between expressions and statements is that an expression will be evaluated to 65
a value right? 66
Like it ends up, after all the code's been executed, 67
it ends up equaling something. But this instead is actually asking the computer to do some work to evaluate 68
this statement and then depending on that statement work out something. 69
Now if you want a bit more detail on expressions versus statements in JavaScript there's a really good 70
video that I recommend 71
and I've linked to it in the course resources. So take a look at this video 72
if you're still not quite clear on what is the difference between statements and expressions. 73
So let's go ahead and delete our JavaScript statement and then we can replace it with a value or with 74
an expression. 75
So let's think about another situation. 76
Let's say that I wanted this to say my full name 77
right? 78
I wanted to say my first name is equal to Angela but my last name is equal to Yu. 79
And I want this to write 80
Hello Angela 81
space Yu or whatever it is that your name might be that you've added in here. So pause a video and see 82
if you can work out how to do this. 83
All right. 84
So as with all of these challenges, there are a million and one ways of achieving the same outcome. 85
And as long as you achieve the goal then consider yourself successful. 86
So in this case I've got two constants instead of one. 87
I've got a first name and a last name 88
and I want them both to be rendered in my h1. 89
Now one of the ways you could do this is to add a fName as JavaScript and then use the plus sign to 90
concatenate a space 91
and then the plus sign to concatenate the lName onto here. 92
So this is all valid JavaScript. 93
This is something that you might see in any sort of JavaScript functional method. 94
And we end up with my full name added in here to the h1 with the space. 95
Now alternatively, you might have thought of some other ways of doing this. 96
You could, for example, use our curly braces to add our first name. And because everything inside out h 97
1 is interpreted as a string we could just add a space in here and then add another set of curly braces 98
and add our last name in here. 99
So that works just as well. 100
You're not limited to a single set of curly braces when you want to inject your JavaScript. And in ES6 101
we have something called template literals or if you come from another language you might know it as 102
string interpolation. 103
So basically injecting strings into a piece of JavaScript. 104
So the way we would do that is add a set of backticks and in between the backticks we can add a dollar 105
sign and then another set of curly braces 106
and inside here we can add a piece of JavaScript. So let's add our fName in here and then we can add a 107
space which is going to be interpreted as a normal string. 108
And then let's add another variable which is our last name. 109
And now we've got our template literal. 110
So let's just recap here. We've got this part interpreted as a string using the ES6 template literals 111
and then we've got that string being inserted in as JavaScript in these curly braces from JSX. And 112
then it's being inserted as a string into our h1 and then that's being inserted as JavaScript code 113
into a JavaScript file. 114
So I don't actually like this code very much because I think we're now at some sort of inception 115
level of depth and I think it's confusing. 116
The easiest way to achieve this task is probably just to add a space and add our last name and first name 117
in here like so. 118
But I wanted to run through some of the different options and catch some of the methods that you might 119
have tried. 120
So we're going to be getting a lot of practice with JSX and adding JavaScript expressions into 121
HTML, adding HTML into JavaScript and getting to grips with JSX. 122
But this is a good time to pause the video and have a mess around with this code 123
if there are parts that don't make sense. So perhaps have a go trying some of those different methods 124
that I mentioned in this lesson or have a go at trying to add some expressions in between the curly 125
braces. 126
But you've now got access to this completed code, the Javascript expressions in JSX completed 127
if you head over to the course resources and click on this link. But once you're ready and once you're 128
comfortable with this idea then head over to the next lesson 129
and I've got a challenge for you to be solved using JavaScript expressions in JSX. So for all of that 130
and more, I'll see you there.