Nesting Elements

[00:00] All right, so we want to make this experience or create this DOM using the React Create Element APIs. So what's interesting is we've got one element here, another element here, another element here, and then we've got this little space right here we've got to think about.

[00:14] So like we said before, there is a children prop that we can pass here and we do, as our AI assistant is showing us, an array right there, but instead we're going to use the third argument. And the Create Element API accepts the first as the type of element you're creating.

[00:34] The second argument is the props you want those to have, but then the children prop is kind of special. And so all the arguments following that will be the children all together. So you can just have as many additional arguments as you like. So we're going to replace the hello world with Create Element calls.

[00:53] So we're going to create additional elements. First we're going to create a span, it has no props, so we'll just say null, or you could do an empty object there. And then hello, so we save that, we've just got hello, it's a span, perfect. But then we need to have a space. And the cool thing with the Create Element APIs, if you're just going to do a string

[01:13] of text, you actually don't need to have a Create Element call, you can just pass the string of text and React will make sure that that becomes a text node for the string. And then we'll have another Create Element for the world. And there we go, we get hello world.

[01:28] If we didn't have this extra string, then we're going to get those things bunched up together. So that's why that string space is important. The interesting thing is, you can't actually observe this difference in the HTML. So if I uncomment that, we save that, comment it again, like the HTML, or at least the DOM

[01:46] view in the elements looks a little like it looks exactly the same, it doesn't actually look like it changes at all. And that's partly because of the way that the browser works with, or HTML works with spacing between elements.

[02:03] If there's any number of spaces between elements, it's going to say, okay, that's just a single space. And of course, like different elements have different block and like display block versus display inline, all that stuff. But yeah, often, if you have two elements that need to be side by side, but they need

[02:19] to be in a different element, you're going to want to have a space in there to be very explicit about, yes, I do want to have a space in there. And versus I want to have them right next to each other, there could be situations where you want that. And then of course, you have like all the styling and everything too, if you want to have an icon next to another thing, you probably don't want to do a space, you probably just

[02:38] do like some padding or margin or something. So there you go. So this is creating elements with React. And if we actually console.log element, this will be interesting to you, except you got to spell it right. It doesn't work if you don't. There we go. So we'll go to our console and we'll take a look at the props.

[02:57] You'll see that children, even though we pass these as additional props, the create element API is going to slurp those up into an array of children right here. And so we'll see, we have our nested elements right here with children of hello, the type span, we have our space, and then we have another one right here.

[03:15] And then when we say create root and render that element, it's going to convert all of this stuff into a DOM so that we can render that to the page. And that is handling nested UI with the create element API from React.

[00:00] In this exercise, we're going to do things a little bit different. The UI is going to look the same, but it's actually going to be different. We're going to have span hello and span world. We want to have a space between those two as well to make sure that space is preserved. That is your job in this exercise. It's like, how do we do multiple children of our single element?

[00:19] We're going to talk about the children prop a little bit in this one. Have a good time. We'll see you when you're done.

Learn everything you need to be effective with the fundamental building blocks of React applications. 

The path of this workshop takes you from the fundamental API of appending DOM nodes, through React's raw APIs, to how JSX compiles into React's methods.

Once you have a firm grasp of what React is doing with creating elements, you'll learn the other tools you need to build webpages like: styling, forms, and inputs. 

But, this isn't just a native web course. 

**You'll be building a strong foundation in React.** 

Learn how to: 

- build reusable components
- leverage TypeScript with React
- catch errors with Error Boundaries
- render arrays properly with the `key` prop. 

When you’re finished, you’ll be prepared to create and use React components to build excellent experiences for your app's users.

## Hello World in JS

You'll start your journey by learning some of the history of how we went from generating HTML on the server and adding JS on top to full-fledged frameworks. 

To learn React you'll be following a similar path and begin by learning how to manually append your own DOM nodes.

I call this "going down to level up." You'll find yourself much more efficient with React if you understand the fundamentals of the DOM and JavaScript!

## Raw React APIs

Before getting into JSX, you'll learn how to work with React and ReactDOM's raw APIs. 

You'll create React elements with `React.createElement` and learn how compose your elements with calls to this function. Then, you'll render the React elements you create using ReactDOM.

## Using JSX

Once you know what React is doing under the hood, you'll be prepared to learn JSX.

This section covers more than just how to write it, you'll also use babel to experiement with how JSX gets compiled to the raw React APIs!

## Custom Components

Just like in regular JavaScript, when you want to reuse code, you write functions. If you want to share JSX, you can do that as well. 

In this section you'll learn about how in React, we call these functions "components", the special properties of these functions, and how to 

## TypeScript

> TypeScript is not making your life terrible. It's just showing you how terrible your life already is. 
 
*- Kent C. Dodds*

Getting a solid hold of TypeScript from the get-go will set you up for success. Since React components are just functions, there aren't any special considerations when applying type annotations. 

So, you'll be working on two things:

1. Improving your TypeScript skills
2. Learning the React-specific types available

## Styling

In this section you'll learn about the two primary ways to style React components:

1. Inline styles with the `style` prop
2. Regular CSS with the `className` prop

You'll also learn why React uses a `className` prop instead of `class`. 👀

## Forms

In React, there actually aren't a ton of things you have to learn to interact with forms beyond what you can do with regular DOM APIs and JavaScript.

Here, you'll learn the form markup, build an onSubmit handler, and then create a form action. 

## Inputs

There's a ton of different input types and you're going to learn a lot about them here!

You'll learn about the different text inputs, check boxes, radios, hidden inputs, how to make sure everything is properly labeled and accessible, and setting default values and default checked boxes. 

## Error Boundaries

This is something you want to learn early on. Sometimes things go wrong and we need to handle errors and display useful information to the user. 

An ErrorBoundary component doesn't ship with React by default. So, you'll be importing one from react-error-boundry and then learning how to compose it, and then give the option to the user to reset. 

## Rendering Arrays

In React you can render arrays of elements. One of the tricky parts about it is the `key` prop. 

In this section, you'll learn in detail why React needs the `key` prop to keep track of elements and the nuances of the value that is used. 

Finally, you'll learn a cool trick where the `key` prop is used as a mechanism for resetting elements in the DOM!


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 Fundamentals

Transcript

Nesting Elements

Transcript