Form Actions

[00:00] All right. So we've got a bunch of stuff in here that react actually kind of does for us. So what I'm going to do is first do a little bit of a refactor. We're going to make a function called log form data. It accepts a form data object and then it's going to log. Move that up there. And then down here we have log form data.

[00:17] Pass our form data. So just refactor didn't really do too much. So really the only thing that we're trying to accomplish here is log the form data when it's submitted. So all of this stuff is just like extra extra stuff that we have to do so that we can get to the point of actually logging the form data.

[00:35] And this is enough boilerplate that reacts like, hey, you know what, everybody needs to do this. And we can add some really cool stuff like pending and things like that in the future if we just provide a built in mechanism for this.

[00:50] And so that is why react has the ability to accept a log form data, accept a function as the action. And that handles preventing the default handles getting the form data out of the form. And we just accept that form data and then do whatever we want to with it.

[01:07] We can make a fetch request. We could do whatever. And that works out nicely. And if we save this, you'll notice we actually get a warning because the encoding type and the method are unnecessary. React will handle those for us. The on submit is now unnecessary as well.

[01:22] It will run, but we don't need it because we are doing what we need to do with just log form data. And now our formal work nicely. And one other thing that react does that's kind of interesting is reset the form.

[01:38] So here we'll say I'm not 33, but we'll go with that. And then we'll select all these things and we'll set this and then hit submit. And we get our form submitted. And our form is also reset for us on that submission.

[01:55] And it's reset to the default values. We're getting this warning from react dom. It's actually not coming from react dom. This is coming from the browser. And the browser is just saying, hey, you called reset on this form or react dom did.

[02:10] But the format doesn't match because you tried to reset this to its default value. The default value for this was nothing. We'll talk about default values in the next exercise. But, yeah, we're trying to reset these to the default value. You can't set a default value of this to an empty string.

[02:28] So we'll take care of that when we are talking about default values. But that's what that warning is all about. I don't want you to freak out like, whoa, what's react doing now? It's just resetting the form. Nothing too fancy going on there. So, yeah, it resets the form for us. It gives us the form data so we can do whatever we want to with it.

[02:44] And then, you know, if there's some sort of error or whatever, we can handle that, too. So, yeah, pretty, pretty nifty that you can just pass a function to the action and use that. Thanks, React.

[00:00] This whole action method, encoding type, and onSubmit, all of this stuff is so common that React actually has a built-in feature for handling this type of experience, and that is what you're going to be using in this exercise. We're going to get rid of all of this extra stuff and pass a function to action.

[00:19] So should be pretty cool. Have a good time with this.

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

Form Actions

Transcript