⚠️ This lesson is retired and might contain outdated information.

Understand JSX at a Deeper Level

Joe Maddalone
InstructorJoe Maddalone
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 2 years ago

"JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."

Dive deep into JSX, what it is, and what it becomes. Be sure to check out Build a JSX Live Compiler.

[00:00] Hey, guys, in this video, we are going to take a look at JSX as it relates to React. I'm going to create a stateless function component here. I'm just going to return a simple div. You could see on the right here, the transpiler has converted that to React.read element and passed in div as a string.

[00:23] Now, that is because this is not a custom component. All custom React components would start with a capital letter. Now, it's passing in app as a variable rather than a string. We can also self-close both normal HTML tags as well as custom components. You can see in each of those cases our code is working just fine.

[00:48] I know we've talked about this before, but just to illustrate the need for a parent node, you can see that we are getting this error here, JSON JXX. Elements must be wrapped in an enclosing tag. That would be because we're trying to return to functions. That's not really going to work very well.

[01:05] If you wrap this guy in a div, now everything is working just fine. We're going to strip this down. We're going to make this an anchor tag. Now, we can see that in a React.createElement, our first element or first argument was this string of div.

[01:25] This next argument is its props. Finally, we have another component here, another React.createElement call as its children.

[01:34] If we want to get a look at the props, I'm going to go ahead and set an href here to hash tag. We can see that the href is a key and its value is a string of hash tag. We can have custom properties attached to our components. However, if we want them to render in the browser, they need to have a dash in them. By better convention, it should begin with data-.

[01:57] If I say, "not rendered equals X," this property is passed into our component. However, it won't be rendered by the browser unless I add data- to it or arbitrarily add a dash to the prop name.

[02:15] Now, when we want to interpolate something, we simply use curly brackets. I'm going to say onClick is equal to a method called update. You can see that rather than being a string in this case, it is in fact passed in as a variable since we did interpolate that.

[02:31] Also, in interpolation, we can create a comment. This is a comment. You can see that the Babel transpiler actually chooses to place the comment at the end. However, that's just an implementation detail. We can add comments right there inside of our JSX.

[02:51] We can see that the third argument passed to the first React.createElement is our anchor tag, which is also a React.createElement. At the moment, it has no third argument, so we'll just add that. Rather than being another element, it's just going to read, "this is the text." You can see that the third argument has become the string of this is the text and this is essentially this.props.children.

[03:16] The next thing we'll take a look at is the fact that JSX doesn't really support If statements very well, so you need to use a ternary expression. I'm going to say, "I is greater than one, more than one, otherwise one." That's going to work just fine. We could also strip this down a bit and just do a double and. Get rid of the false value and that will work just fine as well.

[03:46] One more thing we'll take a look at is how inline styles work in React. I'm going to create a variable here called my style. Set that to an object. I'm going to give that a background color using JavaScript notation. I'll just set that to black. We'll also give it a height.

[04:06] In the instance that you might need a pixel unit, React will take care of that for you. You don't need to add the px onto that. When we want to add that to our component, we just say style= and then we interpolate our style variable. You can see that that has become part of the props of this div component.

~ 8 years ago

I really appreciate these lessons, but have a quick question regarding the JSX Live Compiler. When you type in the input text area in this lesson, it appears that everything is indenting automatically. I can't even figure out a way to do a tab indent in my textarea, and I think I followed your code in the prior lesson pretty thoroughly. I'm using up-to-date Chrome browser on MacOS. Any idea why my input isn't as pretty as yours?

Joe Maddalone
Joe Maddaloneinstructor
~ 8 years ago

Have a look at the source code in the repo, https://github.com/joemaddalone/egghead-react-fundamentals-es6/tree/master/lessons/14-build-compiler

I bring in a lib called Behave to get the indentation. It's not React-related and therefore not discussed, but keeps you from having to watch me futz around lining things up. :)

Markdown supported.
Become a member to join the discussionEnroll Today