Nesting JSX

[00:00] So I'm actually just going to copy and paste the HTML and we'll save that and see what happens. Oh my goodness look that that HTML just copy pasted right in there. Except I mean everything looks good except we've got this warning. What

[00:15] is this warning all about? All right it says invalid DOM property class. Did you mean class name? Now at first you might look at that and say no I oh I see a class name class what wait why does it have to be class name instead of just class? Isn't HTML is just class? Why can we just do a class? Well the reason is

[00:34] because the JSX is a lot more or JSX properties are a lot more similar to DOM properties than they are to HTML attributes. And so here it's saying invalid DOM property class. It's not talking about the HTML attributes. We're looking at DOM properties. So if we were to take a look at this you'll notice

[00:53] that ultimately it ended up being correct like we we did get the attribute there but that's actually working by accident or just by happenstance. So if we take a look at this UL we see that it's got a class or let's look at the

[01:07] the container either either one. And if we do $0 you'll notice that $0 is a special thing in the developer tools that allows us to reference whatever element we have currently selected. So here that says double equals $0 so you know okay use $0 in the console to refer this element. Sweet. So

[01:25] if I say $0 and then look up class I'm going to get undefined but I have the class attribute. So interestingly if I say get attribute class well that's going to get me what I'm looking for. So there is a difference between HTML

[01:41] attributes and DOM properties and there there are historical reasons for this like class is a reserved word whatever but the point is that properties are not the same as attributes. And so in React we work with properties we don't work

[01:57] with attributes and that is why instead of class you use class name. Class name is the property on the DOM element. Now there are a handful of these that are kind of interesting like forms have a for property in HTML but when you look

[02:14] at the DOM attribute it's going to be HTML for or for and like there are various others like this. You'll you'll bump into a couple of these there will always be a nice warning for you when there is a problem and all you need to do is follow the instructions and say yep that's a class name property and now

[02:30] we're not getting the warning we're getting the same behavior as before it's it's working as we expect. And so like I said just a handful of differences between what HTML looks like and what JSX is because JSX is focused on properties not attributes. And yeah ultimately this is a way better

[02:50] experience than create element ever was we can take a look at the output from Babel and look at that monstrosity oh my goodness I'm glad we don't have to write that anymore because it is just so much better to use JSX. And this is the primary reason why almost everybody like 99.99999% of React

[03:09] developers are using JSX and I think that's for a good reason so I hope you had a good time with this one and yeah now you can go off and use your JSX and nest your stuff as much as you like

[00:00] All right, remember when we did this Sam's favorite food, green eggs and ham thing with CreateElement? That was intellectually stimulating. Well, now what we're going to do is do this in JSX and see how much of an improvement we get out of doing nesting with JSX

[00:18] over what we were doing before. So that is your objective in this exercise. I think that you'll like it a lot better using JSX, and you'll find that you can actually almost copy-paste this. This will give us an opportunity to talk a little bit about some of the differences between HTML and JSX. So this should be a good time. We'll see you in a sec.

Learn everything you need to be effective with the fundamental building block of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app's users.

Starting with an HTML file and a script, you'll learn React API to build components and manage forms. Learn the fundamentals of building on the web with React.

React Fundamentals

React Hooks

Epic React Basic

Epic React Pro

React Fundamentals Intro

Intro

Hello World in JS

Generate the Root Node

Dad Joke Break

Intro to Raw React APIs

Create React Elements

Nesting Elements

Deep Nesting Elements

Dad Joke Break Raw React APIs

Raw React APIs

Intro to Using JSX

Compiling JSX

Interpolation

Spread props

Fragments

Dad Joke Break Using JSX

Using JSX

Intro to Custom Components

Simple Function

Raw API

JSX Components

Props

Dad Joke Break Custom Components

Custom Components

Intro to TypeScript

Narrow Types

Derive Types

Default Props

Reduce Duplication

Satisfies

Dad Joke Break TypeScript

TypeScript

Intro to Styling

Styling

Custom Component

Size Prop

Dad Joke Break Styling

Intro to Forms

Form

Form Action

Input Types

Submission

Form Actions

Dad Joke Break Forms

Forms

Intro to Inputs

Checkbox

Select

Radios

Hidden Inputs

Default Value

Dad Joke Break Inputs

Inputs

Intro to Error Boundaries

Composition

Other Errors

Reset

Dad Joke Break Error Boundaries

Error Boundaries

Intro to Rendering Arrays

Key prop

Focus State

Key Reset

Dad Joke Break Rendering Arrays

Rendering Arrays

Outro to React Fundamentals 

React Fundamentals

React Fundamentals

Transcript

Nesting JSX

Transcript