Form

[00:00] Okay, let's render a form, return form, and here, let's get rid of that return right there. And inside of this, we want to have a label for the username and the username. I'm going to take off the HTML4 and the ID, just so we can see what things look like when

[00:18] we don't have that. And then I'm going to have a button with the type of submit. So I explicitly set the button type, though it's not technically required, but I like having the button type explicitly set because there are a number of other types that the buttons can be, and if you're rendering buttons throughout the application, if you're not

[00:38] setting the button type to button, then you could inadvertently submit a parent form that you don't know that you're rendering within or something. So yeah, I typically like to be explicit about setting my button type. And with that now, we're not quite there because if I click on the username, it's not

[00:55] working and if I dive into our accessibility tools right here, then I can look at this text box, generic, and here we're not getting a name. So if I open up my voiceover right here, then I click here, edit text blank, like that's not helpful at all.

[01:14] And so instead, what we're going to do is add a label. So we'll have an ID, username input, and we'll have a HTML4 username input. And now if I turn on voiceover and I click on this, we get username edit text. Awesome. Much more helpful.

[01:32] And additionally, you can kind of tell whether these things are associated properly by clicking on the label and that will focus on the input. And then of course, we can always take a look at the accessibility tab of the input. And here we see the name is username. Perfect. It's exactly what I wanted. Now, of course, we could style it to make it look nice and all that stuff. Feel free to do that if you want.

[01:53] But this is a basic form. If I type in a username of Kent C. Dodds and then hit submit, then I'm going to get a full page refresh with my submission in the URL, which we'll talk about in a bit. But this was the objective. Hopefully you got it. Good job.

[00:00] All right, we're starting from scratch here. So we just have a to-do that is being rendered and your job is to turn it into this amazing form where we've got this username, we've got this input and we have submit. And when you type in the input and you click on submit, it does a full page refresh. You'll notice that we get our submission in the URL.

[00:19] We'll talk about that in the next step, but your job is just to make this form as it stands today. You got a couple extra credit pieces in here to make sure that when you click on this, it focuses the input so the labels associated properly, all that stuff. And yeah, I think you have enough to get going on this one. Have fun.

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

Transcript