All right so the first thing is let's be on the same page.
If you head over to the course resources you'll find a link under this lesson.
And if you paste that link into your browser you'll be able to access this introduction to JSX sandbox.
Now when you're here, if you want to save your work that you do here then go ahead and fork it and log
in with GitHub.
If you don't have a GitHub account it's free to sign up and it's pretty useful as a developer
so I would recommend doing that anyways.
Now once you've done that the next step is to head over here inside Explorer so that you can see the
public and the source folders.
Notice how inside here we've already got three files. a blank index.js, a index.html
and a blank style.css.
So this should be pretty familiar to you by now.
If you look at the files the only one that has code in it is the index.html,
so this is our entry point. Here
all that we've created is just a really simple HTML backbone with a head section that links to the styles
.css file and a body section with a single div that has an id of route.
Now you're going to see this in pretty much any React app and by convention, we always create a div html
element that has an id of root.
And this is basically the root of your React application.
So everything that we create using React is going to be inserted inside this div.
Now at the very bottom just before our body ends we've got a script that links to our index.js
JavaScript file. And notice how at the moment our website doesn't really do anything yet.
And if you go ahead and open it up inside a new window, then you'll be able to see your website in all
of its glory or not.
The only thing that we've actually modified is the title which says React app.
So I want you to go ahead and update that title to say JSX which is gonna be the topic of today's
lesson. And once we refresh we'll see it updated over here.
I recommend collapsing this browser part because we're gonna be using this tab instead.
And we're going to give ourselves a little bit more extra space for coding by reducing the size of some
of these left and right hand panes. And the code that we're going to be writing is not within the index
.html,
we're not going to touch this HTML file ever again in fact. And all of our code is going to be written
in JavaScript using React.
So head over to the index.js file and the very first thing we're going to do is we're going to
require the React and the React dom modules.
So normally when we've been working with node as you've seen in the previous lessons, we've always had
to manually use the hyper terminal to install these dependencies.
But in code sandbox, it is as simple as simply searching for a dependency and then just clicking on it
for it to install into your project.
Once we've installed our dependencies, that's not enough.
We also have to require it inside the files that we need to use it in
right?
So let's go ahead and require these two dependencies.
The first one I'm going to create a variable called React
and this is going to be set equal to require. And we're simply going to specify that React module right
here that's been installed as the module that we're going to require and we're going to bind it to this
React keyword.
Now in addition I'm also going to do the same with our ReactDOM.
So require react-dom, all lowercase, and now we're able to actually use these two packages. In order
to use React to actually create something on screen,
we're going to use the render function.
So we're going to tap into this ReactDOM that we've created up here which of course gives us access
to the React dom module that comes from Facebook right here, and we're going to tap into its render function.
Now this render function as you can see takes three inputs. The first input is "WHAT TO SHOW".
And this is obviously not real code
I'm just showing you.
We're going to be fixing this a little bit later on.
Now after the comma
The next thing that we can add as an input to this render function is "WHERE TO SHOW IT". And finally we
can also add a optional callback to tell us when that render function has completed.
Now we don't need that functionality so we're gonna leave that third one out. But we do have to fix this
code because as you can see over here I'm getting problems after problems and basically the browser
is shouting at me as well telling me that there's a syntax error, but of course that's all because we've
got some pseudocode in here. So let's first think about what do we want to show.
Well at the moment our website is completely blank,
there's really nothing here.
So how about starting out with a simple h1 that just says the prerequisite Hello World.
Now the next thing is to specify where to show it.
So the location is going to be a particular HTML element that we're going to target inside our index
.html.
And if you've guessed this particular div as that target then you would have guessed right.
So let's go ahead and grab a reference to this div with the id of root. And can you remember how to
do that?
I know it's been a while since we've been writing plain old vanilla JavaScript, but see if you can remember
how to get access to that particular element using JavaScript.
All right.
Remember we have to tap in to the dom using that document keyword.
And then we use the method GetElementById and then inside a set of parentheses we get to specify
a element id, which of course is root. So let's go ahead and put that in there as a string.
And now if we take a look at our preview or at our website over here, you can see we've now injected
HTML into our web site even though we have not touched our HTML file at all.
And so already you've written a line of React code right here.
We've used the ReactDOM module's render method in order to display a h1 inside that root div.
And the really remarkable thing right here is that if you think about it, we're inside a JavaScript file
and we're able to write plain HTML without any sort of fancy angle brackets or for example the EJS
brackets or anything to denote that this is somehow not Javascript.
So what exactly is this magic?
Well this is what JSX does. React works by creating these JSX files, so files where we've got
HTML right in the body of a JavaScript file. And what happened behind the scenes is that our HTML
is picked up by a compiler and it gets converted or compiled down to actual JavaScript. And the compiler
comes from including this React module right here.
So you can see that if I go ahead and comment this out then we're going to be getting some major problems
right here.
React is not defined and we no longer get our h1 being rendered.
So inside the React module, there is something called Babel. And Babel, as they tell you, is a JavaScript
compiler. So it's able to take next generation JavaScript like ES 6, 7, 8 and compile it down
to a version of JavaScript that every browser can understand.
And this includes compiling JSX down to plain old JavaScript.
So if we head over to this section where it says 'Try it out', you actually get a side by side comparison
and we can write some next generation crazy code over here and through the use of Babel it gets converted
down into a version of JavaScript that can be read by every single browser,
even good old Internet Explorer.
So for example if I go ahead and just copy this line of code that I've written on line 4 and I paste
it in here on the left, you can see that once Babel is done its job it converts this into an actual line
of JavaScript code and it's able to create this h1 on the screen by using that create element method
that comes from vanilla JavaScript which we've already seen before in the MDN docs.
That means instead of having to write something like var h1 = document.createElement.
And then the element that we're going to create is of course an h1 and then we write something
like h1.innerHTML and set the content to be "Hello World!" as a string
and then finally we do something like document.getElementById and we specify the one with the
id of root and we go ahead and do that appendChild the method and we add in this h1 that
we've created just now.
So let's go ahead and comment this out and you can see that I've now got a 'Hello World'. And if I comment
it back in, you can see that I achieve the same result create an h1 with the word 'Hello World' in it with
the same outcome but one of these ways is very easily readable because we've got HTML embedded
inside some JavaScript and the other way is pure JavaScript but it takes three times as many lines to
write and it's a lot less easy to understand what's actually going on here, versus this right?
So we've already started seeing the beauty of React but Babel actually goes a lot further than just
rendering JSX, It allows us to use some next generation JavaScript,
so for example ES6 OR ES 2015. And we can use some of the new constructs that are available through
these new versions of JavaScript and it's able to compile it down into bog standard normal JavaScript.
So for example on the home page here where they're using that map function, the arrow function, all of
this gets converted down into browser compatible JavaScript so that every single browser is able to
render it.
So now when we're writing our code with the React module in place, we can write ES6 code without worrying
about whether if our grandma who has Internet Explorer 5 will actually be able to see our hard work
rendered, Babel and react will take care of all of that for us.
So that's why in this module, I'm going to be teaching you a lot more of the latest features of JavaScript
ES6 because we're actually able to be sure that it's not going to break because we've got all of
these modules in place that's going to take care of the rendering and compiling for us.
And one of the latest features to come to JavaScript is the import keyword.
So instead of requiring the React module and setting it to a variable and doing all of this, the new
way of doing it is to simply just import React from a particular module or a particular location,
so in our case it's still the React module right here.
We can do the same thing for our ReactDOM
so import ReactDOM from react-dom. By using import and the export keywords, we're able to modularise these
dependencies far better. We end up with code that's better organized.
And if you look through the curriculum now inside this React module, there's a dedicated JavaScript ES
6 lesson on this topic.
So I recommend continuing the lessons in the order that they're created in the curriculum.
But if you just can't wait to learn more about this
ES6 feature importing and exporting, then feel free to jump over there and head back over here once
you're done.
So now that we've used the ReactDOM render method to render this piece of HTML into our root div,
what if you had tried to add another HTML element like, 'This is a paragraph'? Well your code would crash
and you would have a lot of problems.
So what's the problem here?
Well the reason is that when we use this render method it can only take a single HTML element.
That means if you have two HTML elements back to back, then this is not going to work,
It's not going to be accepted. But we know that there's a really easy way of turning these two HTML elements
into one. Pause for a moment and have a think if you know how you might be able to do this. Well the solution
is actually really simple.
All we need to do is just simply to embed these two HTML elements inside a single div element.
So if I go ahead and move this closing div bracket to the end of that closing paragraph bracket you
can see that now again we have one single HTML element right?
And anything that goes inside a div still counts as a single HTML element.
So now we're able to render our h1 and our paragraph as well as as many elements as we want to cram
in here because we've now wrapped it inside a single div. That's how easy it is to start using React
to create our web pages to inject HTML inside JavaScript code and for it to be as easily readable
as any other HTML file. In the next lesson
I've got a challenge for you. Head over there and see if you can complete this challenge using what you've
learnt from this lesson. So for all of that and more, I'll see you there.