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, once you click on the link, you should be taken to my sandbox introduction to JSX.
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.
And this will create a local copy of this project in your Drafts folder.
Now, unfortunately for us free users, the Drafts folder has a limit of ten projects.
So once you're done with each of these projects, you can download the entire project by clicking on
this button right here,
and you'll download the project and all of the code files that you wrote as a zip file.
And now if you use WinRAR on windows to extract the file or on Mac, simply just double clicking it
will extract the file.
You'll be able to see all of your project files, and you will also be able to run it locally.
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 src 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.
And 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 "root".
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 going to 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 going to 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 ReactDOM 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 Hyperterminal to install these dependencies.
But in Codesandbox 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 going to 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 SyntaxError.
But of course, that's all because we've got some pseudo code 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 into the DOM using that document keyword.
And then we use the method getElementById.
And then inside a set of parentheses, we get to specify an 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 website, 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 modules render() method in order to display an 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 happens 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 ES6, 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 has 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 createElement()
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() 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 ES2015, 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 the 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 modularize 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 ES6
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.
So 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's 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 learned from this lesson.
So for all of that and more, I'll see you there.