FREELessons: 11Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 JSX and Stateless Components

So far we've been using factory methods to define our markup, but a better way is with an extension to JavaScript called JSX. You'll learn how to use JSX in this lesson, and you'll code a stateless component to encapsulate a Bootstrap button group.

3.1 JSX and Stateless Components

In the previous two lessons we've been using the factory methods for using components. Those are the div methods, the h1 method, and the p method. Those are factory methods. And while those worked, that's really not the desired way of using components. Instead we want to use JSX. Now if you're not familiar with what JSX is, it basically allows us to use XML directly within our JavaScript. At one point it was a proposal, but it never made it into the JavaScript language. So therefore, we need a tool that will allow us to use JSX, and that tool is called Babel. So we need to add a reference to another script library called Babel. And I'm going to paste that in. Now let me first of all say that's our usage of Babel here is not recommended. It's great for prototyping things as well as quickly developing things. But when it comes to using Babel, we want to pre-compile before we ever run it within the browser. And that is something that we will do in a later lesson. For right now, this is going to serve our purposes. So since we are going to use Babel, what we want to do is change our script tag so that we have a type attribute. And it is going to be set to text/babel. That way Babel is going see that hey, here's some script here that it needs to load. It's going to take that and then transpile it or compile it into JavaScript that will run within the browser. Because that's what Babel does. It allows us to use features that are not supported by the browser. It was first of all created so that we could use new features that were found in ECMAScript 6 like classes and things like that. So that we could use Babel, we could write our code using newer features and it would transform it into JavaScript that would run within the browser. Well, it has evolved to not only include newer features as well as features that just don't exist like JSX. So we have that type text/babel. We also need to change the char set here. So we're going to add a meta tag with the char set set to UTF-8. That is for Babel, so that it will load it and parse it properly. So now we can use JSX. And we're going to quickly recreate what we have done before using the factory methods, but we are going to use JSX. So here's what it looks like. We have a div tag. Let's set its id to my-simple-content, and then let's set the class. Now we can't use class here. Once again, we have to use ClassName in order to refer to the CSS class. But we're going to set that as content, and we need a closing div tag so that we have a complete div element. This is XML, so XML rules apply. Every opening tag has to have a closing tag. If it doesn't, then it's going to fail. So we have our containing div elements. Now we have an h1 and the text was Hello, World! So let's go ahead and do that. Then we have a p element and it simply has some content. This content is in a paragraph, and there we go. So let's go ahead and get rid of this container variable, just so that there's no confusion that our code is going to work. Let's go to the browser, refresh the page, and voila, everything works. Now if we look at the developer tools, you're going to see a warning. And it just says you are using the in-browser Babel transformer. Be sure to precompile your scripts for production. And yes, we will eventually do that. The reason why is because Babel is slow. I mean, it did this rather quickly, but within a full application where it has to transform just about everything, it can be a little slow. So what we are going to do is write a component so that we can use it just like this. We use XML, and then eventually we will pass data to it so that it will render correctly. And what we are going to write is just a simple little button group that you would use within Bootstrap. So I'm going to go ahead and pull in the Bootstrap CSS. This is pulling in from a CDM. And let's go ahead and get rid of this style element, because we're not going to use any custom style. We're just going to use what is built into Bootstrap. So we have a couple of different ways of writing a component. The first way is to write a function, and that's what we are going to do in this lesson. But you can also write a component by writing a class. Now there's a difference between the two. If you write a component using a function, then it is what we call a stateless component, it has no state whatsoever. It's just there for creating the user interface. If you create a component with a class, then you typically are doing that to maintain state of some kind and we will see that in a future lesson. Now I say that, and the current push is to write all of your components as stateless components and manage state with some third party tool. That is what the trend is to do now. But for right now, we're not going to worry about that. We're just going to write a function called ButtonGroup. Now whenever you create a component using a function, the convention is to start that function with an uppercase letter, so we have a ButtonGroup. And then we want to return our component. Now whenever you create a component it is typically going to be made up of other components. Like for example, in order to create a ButtonGroup, we have to use a div element to contain other button elements, and that is a ButtonGroup. So we are going to use those same components that we have been using. Well, not the same ones, at least the div we are going to reuse. Now whenever you return JSX, you want to use a pair of parentheses. Otherwise you can run into some issues. So we'll say, return and then parentheses, and inside of our parentheses we will have our JSX. So we're going to have a div element. We're going to set the class to btn group. We'll also have the role attribute which is set to group. And then we will need our closing div tag. And then we just need button elements inside of this. So we will have button, the type is going to be button. And then the CSS classes are btn, and btn-default or whatever button that we wanted to use. So then we would have our text. Let's have Home and then let's have a couple of others. So we will finish this element, paste it in a couple more times, and we will just change this to Home, Edit, and then Help. And then we would use this component just like we did with our div and our button components. We come down here for the render method and we just say ButtonGroup. Now once again this is XML. We need to be sure to close that element. So since we don't have any information that we want to specify inside of the ButtonGroup element, then we can just use a self-closing tag, just like that. So if we go to the browser and refresh, you're going to see our ButtonGroup. We have Home, Edit, and Help. And this is exactly what we would see if we were just using HTML and CSS. So if we inspect this, we can go to the body, we can go to our div with an id of app. Here we have our ButtonGroup and then the buttons inside of it. Well, in the next lesson, we are going to take this a step further. We want to have a ButtonGroup but we also want to be able to make it dynamic. We don't always want a ButtonGroup that's going to say Home, Edit and Help. You might want another ButtonGroup that has another set of buttons. So in the next lesson we are going to make it dynamic and allow us to pass data to our component

Back to the top