Reset

[00:00] Alright, so when the user submits and it blows up, we don't give them any recourse, they have to hit refresh. We want to do something better. And so we're going to come over here, we'll say reset error boundary, pull that out of our props. And then we'll add a try again button that has an on click handler for resetting the error boundary. Try again.

[00:18] As we pass that function along, that function will get called when the user clicks on the button and we will be in a good place. So now if I try to submit, it blows up, we at least get this try again button. Click on that, resets it. Now we're still going to get error logs and all that stuff, that's still going to happen.

[00:36] It may be a caught error, but it's not an error we want to have happen. And so we are still going to get those logged. But as far as the user is concerned, at least they have a reasonably good experience here. And as a reminder, if I have a bunch of information entered in here, it blows up, I try again, this is re-rendering or re-mounting the component.

[00:55] It's a totally different instance. Any of the state that was stored inside of those inputs, that's now gone. So if you want to preserve that, you've got to do that separate, maybe store it in state higher or put it in some local storage thing or something like that. Because accidents happen and data can get lost.

[01:13] So that's a different subject. But the idea is if you need to reset the error boundary, then you can do precisely that inside of your error fallback using the reset error boundary. This is something that you probably will do depending on how you're managing your error boundaries and whatever framework you're using. So definitely useful to understand.

[00:00] Sometimes you might want the user to be able to try again like maybe this was a network error and they've connected to the Internet again, so they can just try again or whatever there could be situations where you want the user to be able to try what they were going to do over again, and so the

[00:15] part of the props that your error fallback gets is this reset error boundary function you can stick that in a button and Call that at you know some when the user clicks that button, and it will reset the error boundary It's important for you to understand that React error boundary is not going to preserve the state of your component

[00:35] It's very and you wouldn't want it to because it's possible that that state is what caused the error in the first place So it'll reset it as if we're loading the page for the first time or loading that component for the first time But yeah, this is how you would manage Resetting things to that state so the user can try again if you want to preserve their state as they're like entering in

[00:56] The different you know option maybe they've got a really big form then they hit submit and it all goes away if you're worried about that happening, then you may want to save that to a secure place or local storage or something like that to Handle that particular situation so when the component loads up again You can load all that data from local stores, so they don't have to enter everything in again

[01:18] We're not going that deep into this I just want to show you how to reset things so that the user can try again And so that's done with the reset error boundary. That's what you're going to be doing in this exercise. Have a good time

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

Reset

Transcript