Exploring JSX

Andrew Mead
A free video tutorial from Andrew Mead
A Full-stack Developer & Teacher
4.7 instructor rating • 4 courses • 301,154 students

Lecture description

In this video you'll explore the basics of JSX. You'll see what it takes to define your template and get it rendered to the screen.

Learn more from the full course

The Complete React Developer Course (w/ Hooks and Redux)

Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

39:10:32 of on-demand video • Updated May 2019

  • Build, test, and launch React apps
  • Use cutting-edge ES6/ES7 JavaScript
  • Setup authentication and user accounts
  • Deploy your React apps live to the web
  • Learn the latest React libraries and tools
  • Master React, Redux, React-Router, and more
English [Auto] In this video you're finally going to take a deeper dive into a GSX. We're going to look at how we can create much more complex GSX expressions with multiple elements nested elements and dynamic data. So instead of having static text in here we're going to be able to put whatever we want in there. Maybe it comes from user input maybe it comes from the database regardless of where it comes from. We want to figure out how we can make dynamic templates. Now first things first. Make sure you do have Editor support for GSX. Here you can see I have a little syntax highlighting. This is provided by default by visual studio code. But if you are using Visual Studio code there is a single extension I recommend you also install if you go over to the extensions panel. It's this guy right here. Babble Yes 6 x 7. This is going to add better editor support for those features. We'll be using throughout the course. I do have a few other plug ins. None of them are essential. We'll be talking about some of them later if you are interested. Go ahead and install path intellisense. This adds nice auto completion features. But the other ones can be ignored for now if you're using an editor other than Visual Studio code and you do not have syntax highlighting here I recommend Googling your editor name followed by GSX syntax highlighting toof amusing. Adam I would Google Adam and GSX syntax highlighting and that should get you to the right page where you can find the plug in or package you need to install to add support for this in Visual Studio code you should see that your file language is now javascript in parentheses. Babble that's going to ensure that all of those six and seven features are correctly highlighted. So once you do have the editor set up we're ready to actually create a more complex expression. And let's just start off with adding another element. So currently we have a single H-1 let's say for example we also want to add a paragraph tag down below with a little more information about our app. How do we do that. Well we're just going to tack on a p tag right here after we open and close H-1 we we're going to open and close a paragraph tag we can type some text. This is some info. Now if we go ahead and save this the Babel compiler is going to run and live server is going to refresh the browser. But we're going to notice that we actually are getting nothing showing up to the screen. That is because we have ran into our very first Babel error so we can view this by heading over to the terminal and when we do we can see that the change was correctly detected. But when it tried to compile our code down to S-5 it completely failed and it's showing us exactly what went wrong and where it went wrong. So right here we have our syntax error and it's coming from the file we just saved apt. Yes. In the source folder Here's the error itself. Adjacent GSX elements must be wrapped in an enclosing tag and it's pointing towards that line where we create art J.S. x. So this is our first important lesson when working with GSX. You can only have a single root element. Currently we have two. We have an H1 and a paragraph tag sitting side by side. Now obviously we do want to have an H1 and a paragraph tag sitting side by side. We just need a single root element. So we can actually wrap all of this inside of a div that's going to remove the error and it's going to allow things to correctly render. So let's do that right here before our opening H-1 tag. I'm going to open a DIV tag and back here after we close the paragraph we're going to close that div. So now are two elements h one in p. They're wrapped in a div and this is completely valid. GSX if I save Aptor J.S. Right here we can see that the change was detected. There is no error printing below which is fantastic and if we head over into the browser we get exactly what we wanted. We have our H-1 tag with the correct text and down below we have our paragraph tag showing up as well. So when we are creating jast X expressions we can get really complex. We can include a ton of information and nested elements but we just need to have a single root. So for almost all of the GSX expressions we're going to be creating in this course we're going to have a single root div and we'll be calling this the wrapper div because it wraps everything else. It's perfectly valid to have side by side elements like this as long as they're not at the very root of your expression. This is completely valid GSX But if we were to add any more elements or any more text or any more complexity it would easily run off the side of the screen and that's not what we want we want everything to be formatted a little bit nicer So it's a little easier on the eyes. Now we can actually kick things off by just moving things onto their own line. So for example I can hit enter right here before the H-1 opening tag. Move that onto its own line. I can also do the same thing for the paragraph tag. And finally the closing DIV tag and this is perfectly valid. If I go ahead and save x J. S everything still works as expected babbel understands this. Now I'd like those divs to line up so I can actually hit enter. Right here and indent everything I can indent everything. This is going to allow everything to line up in a way that looks a little easier on the eyes and if I save Abda and James once again things are going to refresh. This is perfectly valid there are no errors. Now this is what I want. I want those div tags to line up. But I find that this looks a little bit weird it's a little weird to have the template variable set equal to followed by nothing. So what I like to do for clarity's sake only is at an opening parenthesis right here or moving the auto completed closed parentheses. And then I add the close parentheses down below after my GSX expression and I move that on to its own line. And this is the format I personally find the easiest to read. Now I didn't invent this formatting style if you look at the source code for other re-act projects you're going to see a set up very similar to this with those wrapping parentheses the root tags lined up and all of the other content nested inside. And we don't have to stop here we could add more complexity to this if we needed to. Which we'll be doing extensively throughout the rest of the course. So for example I could add an ordered list a numbered list of items I could open the old tag and close it and I can put some individual list items inside right here. Let's add one item one we can then close that. And we can add a second guy down below opening the list item tag giving it some text and then closing the list item tag. If we save APTA Yes dabble understands this it is going to compile this down to S-5 and right here we get the expected output showing up. Now we know that this gets converted into those create element calls. But what happens when we have a complex nested structure like this. Well we can actually look at APTA and J.S. to see exactly what's going on if we crack that open we can see we just have nested re-act create element calls. So the div has the H one end of the P and the O L and the O L has two of its own. It has one for each list item and this is a great reason why you don't write your templates in re-act create element. Cause this is basically impossible to read an update. I never want to see this ever again so let's go ahead and close that file and forget it exists. We're going to be working with GSX instead. And for the very first time in this course it is challenge time. If you've taken one of my courses before you know all about challenges if you haven't. Challenges are where I give you a little assignment I ask you to write some code to make some modifications to the app and then you go off and you do that you come back and you watch me go through that same process. So for example I might say hey your challenge is to change this text over to your first name. Take a moment to pause the video. Go ahead and make that change. Test your work by saving the file and when you're done click play. So I'll give you a moment to pause the video. You would posit you would make the change save the file confirm the change worked. Then you'd click play and you'd watch me go through that process. Now obviously that's not a real challenge. Way too simple. But don't worry the challenges are going to be outlined for you. I'll tell you exactly what you need to do. And they're also only going to use information you've already learned in the course so you'll have no problem completing them and you're allowed to use the stuff we already wrote together. That's the whole point of the challenges is to take this stuff and put it into practice on your own. Real talk for a moment if you skip the challenges you are just wasting your own time you're going to waste your time watching this course you're going to get to the end. The videos will be over. I'll be gone. You'll try to make your own re-act app and you won't be able to because the information isn't going to stick unless you actually take the challenges seriously. The challenges are designed to get you writing your own code making your own bugs fixing those and eventually getting the satisfaction of having actually built something on your own. Now I don't ask for perfection. There's going to be challenges you go through and you just can't get it done you're getting an error or you're getting frustrated. That's OK. That's why I go through the process afterwards. I show you exactly how to get it done and I give you my thought process around that. So I don't ask for perfection I just ask that you take all the challenges seriously and you actually try to go through them whether or not you complete them successfully. Now we're going to start off easy. We only know a few things so we can really only do a few things but as we learn more about react and the ecosystem the challenges are going to get a bit more open ended and a bit more complex. But for now things are going to be a little more targeted and a little easier to get done. So I'm going to outline what I'd like you to do in comments right here. You do not have to write these comments. They're just there as notes. So when you pause the video and you go through the process you can always look back at the video you can see my little outline and then I'll just give you some direction as to what I wanted you to do. The goal here is to create your own template like we have here and you're going to render the new template as opposed to rendering the one we built together. So step one is going to be to make a new very well they're going to create a template to variable. And this is going to be a jazz X expression. Now this GSX expression is obviously going to have some elements inside of it. And to give you a quick outline as to what elements I want to create and what text they should show to the screen. So right here what are we going to have. We're going to have our route. First of all because we need a root element if we're going to have other elements side by side inside of that div.. Next up we're going to start off with an H1 tag and this H-1 tag is going to have the following text value your name. So in my case I would have the text Andrew Mead showing up in the H-1 much like we have the text indecision app showing up in the H-1 here then we're going to create a few more elements alongside this H-1. Next up I want you to make a p tag and inside of this paragraph tag you're going to go ahead and add age Kolin space followed by your age. In my case I type 26. Then we could add another paragraph tag down below this paragraph tag is going to be a location colon space and you can just type out your location in whatever format you want. I'm just going to stick with my city name Philadelphia. Now the last step is to render template to instead of template. So currently we're rendering the template variable after you create your new template template do you want to go ahead and render that do everything you need to know in order to complete that is sitting right here. We create a variable. We define our elements and we render it. And it's not cheating to refer back to that. I ask that you don't copy and paste it. I ask that you build it out on your own. But if you forget how something works do feel free to refer to the things covered in the video. That's the whole point. So take some time you're going to go through this you're going to test your work in the browser when you're done. Make sure everything shows up correctly if you're getting an error. Try to work through that error. And when you are done you can click place. I'm going to add about three seconds of silence right now. This is so you have a moment to pause the video and then we'll come back. All right pause now. All right. How that one go if you weren't able to get it done. Don't get discouraged is our very first challenge and the format can be a little jarring at first. Once we go through one or two you're going to get a really good idea as to how they flow. I use the same kind of setup for all of them and you'll be a master in no time. So the first step was to create that template to variable and set it equal to a GSX expression. I'm going to do that right here. Bar template 2 I'm going to set it equal to a GSX expression and we're going to use the same formatting techniques we used above. It's by no means required but that is the standard we're going to be using So I'm going to open and close my parentheses. Hit enter and right here this is where we're going to define our actual J.S. x. Now I want you to start off with a root div so we can start off with a root div and inside of this root div we're going to be adding three other elements and H 1 AP and a P tag. So I will break those out onto their own line so I can toss those nested elements inside. First up it's that H-1. Now the H-1 tag should have a text value equal to your name. I'm going to use my name right here. First Name Last Name either. Perfectly fine as long as you got your partial name in there. Next up is the paragraph tag down below. And for the paragraph tag I wanted you to use age Colan space followed by your age. I'm going to put 26 in there and then we're going to move on to the last paragraph tag location right here. Location Colan space. In my case Philadelphia in your case wherever you happen to live. So that brings us to this point in the challenge we've completed everything I highlighted. The only thing left to do is render template to instead of template and to do that by referencing the template to variable right here now that we've completed all of the code changes we think we need to complete. We can go ahead and test our work by saving the file that's going to cause Babel to run the browser to refresh and it looks like everything did work as expected. Right here we have our H-1 Andrew Mead. We have our paragraph age 26 and our other paragraph location Philadelphia. So hopefully you were able to complete that as expected if you got stuck perfectly fine. As we get more comfortable with the challenge format you'll be a master in no time in the next video. We're going to cover how we can inject dynamic data into our templates and once again there'll be another challenge requiring you to do that on your own. I'm very excited to get to it. So stay tuned. As soon.