Key Reset

[00:00] So, all we need to do is add the key prop here, key is key, and you'll notice if you're familiar with how a use state works and everything, then this shouldn't be too complicated for you, but just as a quick intro to the uninitiated, this use state is initializing this value

[00:17] as zero, and so we get that value of zero, and we're setting zero as the key for the input. And then when this button is clicked, we're updating that key to be whatever it currently is, plus one, so it could be one, two, three, four, and it continues every time you hit the reset button, which means that the key prop here is going to change, and so React

[00:35] will say, oh, okay, I'll remove that element, that input, and we'll put a new one in, it's not gonna have any of the same state or anything, and that's why this ends up working. So I say, oh, I gotta save it first, and then I say, hello, and when I hit reset, then we're gonna remove that input and put a new one in with all of that state gone.

[00:55] So there you go, that is using the key prop to reset an element, you can put this on an entire chunk of your UI, however you want to do that, and that can reset that entire chunk of UI, again, not something you do a ton, but absolutely something you do sometimes,

[01:15] so just put this in the back of your mind to think on in the future as a mechanism for resetting the state of, or your UI for a particular area, because it can be useful sometimes. Great job!

[00:00] So one of the cool thing about the key prompt is that it can be used to actually tell react Hey, I want to take this element out or this component get that out of there Throw it away all of the state that it has get rid of it and then bring a new copy or new version of that thing

[00:16] In its place and so that's what we're going to do here. This is not typically what you do You don't do this a lot, but this definitely is something that comes in handy sometimes when you want to reset The state of something so here I can say hello, and I hit reset nothing happens That's your job is to make that thing happen

[00:33] But when you're all done the way that it should work is you'll notice the input gets a highlight Boom in fact the div also because it's child got replaced this input Just gets removed and set a new because it's key changed when the reset button gets clicked So that's your job is to make that work. Have a good day

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

Kent C. Dodds

React Hooks

Advanced React APIs

React Suspense

Advanced React Patterns

React Performance

React Server Components

Interviews With Experts

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

Nesting JSX

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

Dad Joke Break Rendering Arrays

Rendering Arrays

Outro to React Fundamentals 

React Fundamentals

React Fundamentals

Transcript

Key Reset

Transcript