Understand JSX at a Deeper Level

[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.