Key prop

[00:00] Okay, so this is actually super easy and like I said a linting plug-in is going to tell you when you got something wrong So you should be just fine, but here we're going to say item Dot ID so we're mapping over those items or just pass ID

[00:16] The ID of the item for the Li and so that way when that item is no longer in the list then react knows Oh, they actually removed that a lot. Let's delete that that Li will make a new one or whatever So here we're removing the Apple the orange stays with the orange because those things are associated so it knows what to do

[00:34] And we can add the item back and then remove remove remove and all of that if you take a look at the dev tools It's kind of interesting how all this Like come comes out in the way that it works. So here we've got our Li We hit remove and it's it's just removed. The other ones are not bothered. Everything works out

[00:53] Just fine if we remove the key prop though, and we refresh and take a look at this Now if I remove this, you notice this Li stayed put and it just updated the ID updated the for updated the content It actually incidentally it also updated the value. But again, that's an attribute thing. It's not a

[01:13] Actual technical value so react is not going to update that value for us because it says oh no that was just the input that we had before so I'm just going to update all the attributes and everything but yeah that the The same input that was there before is still there and the text content is

[01:33] Just going to be the thing that's changed. So by providing a key prop We're giving react much or as much information as it needs to be able to track the elements Associated to the data and we interact with the data then the elements can follow along

[00:00] In this exercise, we're using a couple of things that we haven't done before. So here we're using this useState hook. You're not going to be interacting with this. We'll talk about this in the React hooks workshop. But this is what allows us to make updates to our UI over time,

[00:16] rather than just having everything be right at the initially render time, which is what we've been doing so far. And so as you click on these buttons, it's going to update our UI, and that's where we're going to experience the problems that React is warning us about in here. So your job is to do the very simple thing,

[00:36] which is adding a key to these li elements so that we can handle these changes and track or keep track of the data that's associated to the elements so it knows what to do with things. So if you play around with this, you'll notice removing the apple is going to keep the state of this input, and it's going to update the text content here.

[00:58] So what's interesting here is that React doesn't know what exactly to do. And so it's saying, okay, well, I'm not going to remove the first item because you still have three items. So I'm going to keep the first item. I'm just going to update the text content of the label because that was its best guess of what it should do. And then it did the same with the second and the third. So it's keeping the state of the input

[01:18] because that input didn't get removed, but updating the text content. And as far as React is concerned, that was as good a guess as any, but it's not good enough for us. And so we've got to help React out with a key prop. So that's your job. Add a key prop and then try to remove stuff, and you'll see that things are working much better.

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

Key prop

Transcript