Hey guys.
So in the last few lessons we saw that by using JSX, we were able to insert HTML into JavaScript.
And this ability came from JSX.
But JSX actually lets us go even further than that. It actually lets us add HTML inside a JavaScript
file and then insert JavaScript inside that HTML,
but in order to learn more about this we need to go deeper. Head over to the Course Resources
if you want to get the starting file for this lesson and work alongside with me. Starting out I've got
a very simple React app, I'm importing "react" and "react-dom" and then I'm using ReactDOM to render a single
h1 onto the "root" div.
So from here let's say that I had a variable that I wanted to insert, right?
Let's say I had a const called name and the data stored inside this const is just my name.
Instead of saying, "Hello World" what if I wanted to say "Hello Angela"?
Now, I can't just simply use the name of this const, I can't just say, "Hello name!" because it's just
going to be interpreted as literally a string because we're inside a JSX file.
If we simply add the name of the variable or the const inside as a child of an HTML Element, it's
just going to interpret it as a string.
So what do we have to do instead?
Let's think about this,
we're currently inside a JavaScript file index.js, and we can write JavaScript code which is pretty
reasonable. But then using JSX by installing the react module we were able to inject HTML inside
our JavaScript file.
Now if we wanted to insert JavaScript code inside the HTML, inside the JavaScript file, then what we have
to do is to simply wrap the JavaScript inside a set of curly braces. and notice how as soon as I did
that it knew that I was talking about the name const rather than just the string name, and it pulled
that data over from here and inserted it into my h1. So why don't you have a go at this? Create
a new const with your lucky number,
so that could just be a simple value that you pick. And then create a paragraph that's going to be rendered
that says, "Your lucky number is..." and then insert that const or variable into that paragraph element and
achieve something that looks a bit like this.
So pause video and give that a go.
All right.
So we've got a new const that I'm going to call num and I'm going to set it to my lucky number.
Let's just say it's 7.
I actually think that all the numbers are pretty lucky.
But let's go ahead and add that number into a paragraph tag.
So your lucky number is this particular number const.
Let's not worry about all the syntax errors we're getting, we're going to be getting a lot of problems.
We're not quite done yet.
So the first issue that we have to solve is the fact that we've got two HTML elements, right?
So in order for this to work, we of course need to wrap this inside a div,
so we end up with a single HTML div element that's being rendered onto the screen.
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
want it to read my lucky number is num, I want instead the actual constant's value to be rendered here.
So I'm going to wrap that const name, which of course is JavaScript, and not HTML, inside a set of curly
braces
in order to get my compiler to interpret this as actual JavaScript. Now you can go much further than
this because once you open up a set of curly braces, you can actually create any JavaScript expression.
So if instead of using a const that doesn't change I could write some maths right?
3 + 4 is still 7 or 3 + 9 is 12.
And I can get this code inside here to be evaluated and worked out and then inserted into my HTML. And if
you wanted to go even further, we could actually generate a random number here, right?
We could use Math.random and then add a set of parentheses.
We've got a random number which is very small so let's make it between 1 and 10
by multiplying it by 10 and then let's round it down using the floor() method and then wrap that Math.random(),
multiply 10 inside that, and we end up with a new random number.
And notice how every time I refresh this, I'll get a new number between 0 and 9.
Now remember that I said you can add any JavaScript expression in between these curly braces which is
injecting code into our HTML elements in our JSX file, but we can't write JavaScript statements.
So what do I mean by that?
I can't for example decide to write if (name === "Angela")
well, then return 7, but
else-if (name === Jack), then return 12, or something like this,
right?
This doesn't work because this is actually a statement rather than an expression.
And the big difference between expressions and statements is that an expression will be evaluated to
a value, right?
Like it ends up, after all the code's been executed,
it ends up equaling something. But this instead is actually asking the computer to do some work to evaluate
this statement and then depending on that statement workout something.
Now, if you want a bit more detail on expressions versus statements in JavaScript there's a really good
video that I recommend
and I've linked to it in the course resources. So take a look at this video
if you're still not quite clear on what is the difference between statements and expressions.
So let's go ahead and delete our JavaScript statement and then we can replace it with a value or with
an expression.
So let's think about another situation,
let's say that I wanted this to say my full name,
right?
I wanted to say my first name is equal to Angela, but my last name is equal to Yu,
and I want this to write,
"Hello Angela,
space, Yu" or whatever it is that your name might be that you've added in here. So pause a video and see
if you can work out how to do this.
All right.
So as with all of these challenges, there are a million and one ways of achieving the same outcome.
And as long as you achieve the goal then consider yourself successful.
So in this case I've got two const's instead of one.
I've got a first name and a last name
and I want them both to be rendered in my h1.
Now one of the ways you could do this is to add an fName as JavaScript and then use the plus sign to
concatenate a space
and then the plus sign to concatenate the lName onto here.
So this is all valid JavaScript.
This is something that you might see in any sort of JavaScript functional method.
And we end up with my full name added in here to the h1 with a space.
Now alternatively, you might have thought of some other ways of doing this.
You could, for example, use our curly braces to add our first name, and because everything inside out h1
is interpreted as a string, we could just add a space in here and then add another set of curly braces
and add our last name in here.
So that works just as well.
You're not limited to a single set of curly braces when you want to inject your JavaScript. And in ES6
we have something called template literals or if you come from another language you might know it as
string interpolation.
So basically injecting strings into a piece of JavaScript.
So the way we would do that is add a set of backticks (``) and in between the backticks we can add a dollar
sign ($) and then another set of curly braces
and inside here we can add a piece of JavaScript. So let's add our fName in here and then we can add a
space which is going to be interpreted as a normal string.
And then let's add another variable which is our last name.
And now we've got our template literal.
So let's just recap here. We've got this part interpreted as a string using the ES6 template literals
and then we've got that string being inserted in as JavaScript in these curly braces from JSX, and
then it's being inserted as a string into our h1 and then that's being inserted as JavaScript code
into a JavaScript file.
So I don't actually like this code very much because I think we're now at some sort of inception
level of depth, and I think it's confusing.
The easiest way to achieve this task is probably just to add a space and add our last name and first name
in here, like so.
But I wanted to run through some of the different options and catch some of the methods that you might
have tried.
So we're going to be getting a lot of practice with JSX and adding JavaScript expressions into
HTML, adding HTML into JavaScript and getting to grips with JSX.
But this is a good time to pause the video and have a mess around with this code
if there are parts that don't make sense. So perhaps have a go trying some of those different methods
that I mentioned in this lesson, or have a go at trying to add some expressions in between the curly
braces,
but you've now got access to this completed code, the "Javascript Expressions in JSX Completed"
if you head over to the Course Resources and click on this link. But once you're ready and once you're
comfortable with this idea then head over to the next lesson
and I've got a challenge for you to be solved using JavaScript expressions in JSX. So for all of that
and more, I'll see you there.