Spread props

[00:00] All right, so we've got our props object. We just need to get it onto this element. How do we do that? Well, as a reminder, if we wanted to make a props2, then we can spread it like this. We make the object, and then we add the props we want. And we can say whatever and hi, and those will combine.

[00:18] You should be pretty familiar with that if you've been using JavaScript for a while. So what's interesting is JSX kind of adopts the same idea. And that's how you do it. Ta-da! So we're just going to take the props object, spread those props onto this div element. And again, we can self-close if we want to.

[00:36] So we could say, yoink. And that will totally work. We get our hello world. It's got the correct container. And the thing I want you to kind of play around with a little bit is the placement of the props. So what if I wanted to override the class name?

[00:53] I could put a class name here, and we'll say my container. If I save that, we take a look at our output. We've got a class of container, but I thought I wanted my container. And the reason for that is this works pretty much exactly the same as object spread.

[01:12] And in fact, if we take a look at the compiled version of this, then you'll find we have an extends function, which is basically just object assign. And what Babel is doing is it says, hey, I want to create an object that or basically assign an object here.

[01:30] We're creating a new object right there. And here are the props from the object. And then we want to add any of these additional props after. So the way that object.assign or the spread works is whatever props come or properties come later are going to override the ones before.

[01:47] And so I could also have another class name, my other container. And if we save that, now aside from TypeScript being kind of annoyed that we have multiple class names on there, what we're going to see here is we're going to get extends. Here's our first object, class name, my container. Then we've got our second object, props.

[02:07] And then our third object will have a class name, my other container. So my question to you is which class name is going to win? And if you said my other container, you're right. So whatever comes later wins in the event of a disagreement. And so we could do the same with children. But children is a little bit special,

[02:25] because what if I say closing div right here and say hello or goodbye world? What do you think is going to win in this instance? We could put a children prop right there. You know that the props here would override that, because we've got a children property on this props object.

[02:43] But does the children that shows up between the tags, does that override the props object or not? What do you think would be correct? Well, if you said the children syntax should override the children prop, you're right. That's how that works. So if we take a look at the compiled output now, we'll see we've got our props. We've got our elements.

[03:02] We've got our extends, class name, props, class name. And then we have the third argument being goodbye world. And so that's the way that the create element API works is the third argument or the following arguments are going to override whatever props are passed.

[03:19] So that is a good framework or idea, something to keep in mind as you're working with props and spreading props and adding and like having defaults and stuff like that, is the position of where you put this spread is going to determine how the different props are going to be overridden.

[03:38] And it's not just the way that this extends works. This is a syntax thing with JSX. That is part of the spec that when you do a prop spread like this, if you have additional props thereafter, those ones will override the first. Additionally, you could actually have another props too.

[03:57] And this could have a class name of la-di-da. And then we can spread the props too. And depending on whether that comes before or after, we'll determine whether that wins in the event of a conflict. So we're going to get la-di-da because it comes after.

[04:15] And of course, we'll get container. Now that it comes before. So there you go. That is all of the fun things you can do with spreading props objects onto your React elements.

[00:00] Sometimes you've got an object that has all the props that you want to apply to a particular element this happens quite often actually So here we have an example. We've got our children We've got our class name and then we stick that in a props element now or object and then maybe we pass it to a function or something like

[00:16] That and so the way that you might do this. It's you'd say prop or class name equals props there we go props our class name and Children equals props on children you could do that Our AI assistant has actually kind of spoiled things for us a little bit

[00:34] But the the idea is how do I take this object and apply all of those props to? that element without Having to name each one individually like maybe it's a little bit dynamic or something So if we were just writing regular create elements

[00:51] If you I calls then we could just literally pass that props object along to create element and that would work just fine Or we could even make a new object and copy all of the props do it like a shallow copy of all the props Onto that new object like that would work fine

[01:06] And so the the challenge for you in this exercise is how do you do that same thing on that element now? We're in a JSX syntax, so check out the references if you're not totally sure To how to do that, but it's pretty quick and pretty easy. We'll see you soon

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

Spread props

Transcript