Checkbox

[00:00] All right, let's get our waiver signed. We'll add a div right here. And we're going to have, yeah, the AI assistant wants us to do it this way just because it matches everything else. But we're not going to do it this way. Instead, we're going to have our label there. And we don't need that ID anymore.

[00:18] And we can stick the input right in there. Now, our instructions were to put the label on the right side of the checkboxes. That's a pretty typical way to do that. So we're going to do that. And now, I want to see what happens when we submit this. So I'm going to say Kent C. Dodds.

[00:36] And we're going to say, I like Twix. And this is not a Twix advertisement, by the way. I just realized I do like Twix. But they are not paying me to say that. And neither is Rick. OK, so we'll say today. And we'll submit this. And something that you'll notice right here that you might find kind of interesting

[00:55] is the value of waiver. It is set to on when we submit that. That is interesting. So in form data, there is no true or false. In form data objects, if there is a checkbox, that is represented by the text on.

[01:13] So you actually could technically make a text input where you say, type on if you want to have this be signed or whatever. Kind of silly, honestly. It's a little bit annoying. But that is the unique thing about that. But it's even more unique than that. If I just submit this again without having

[01:31] checked that checkbox, let's take a look at that now. It doesn't appear at all. So I know that this should just be a true-false Boolean. That would make the most sense. But this actually resembles a little bit the way radio buttons work. Well, actually, no. There are some similarities between radio buttons and checkboxes. This isn't it.

[01:51] But the interesting thing here is the waiver assigned to this checkbox will not appear if it's not checked. And if it is checked, it will appear. But it will appear as on. Something useful to know about the web platform.

[02:10] So this is, yeah, again, this is not a React-specific thing. This is just the way that the web platform works, the way the form data object works. We have to deal with backward compatibility stuff. And so this is probably not going to change in the future. But it's useful information for you to know.

[02:28] Luckily, in a real-world application, you're probably not going to be working directly with this stuff. And instead, you will have a library that manages some of this stuff for you, most likely. But yeah, it is good to understand how these primitives work. So there you go. That is how checkboxes work on the web

[02:45] and how you render this in React.

[00:00] You remember how a little while ago we were talking about how you label inputs, and one mechanism you can use is to just create a label element. Inside you put some text that will be the label, and the input that will be the thing that is labeled. And that works great, but it typically doesn't work super nicely for the UI that you're trying

[00:19] to build. You need to have it styled in a special way. Checkboxes are kind of an exception to this. Lots of the time you want the checkbox sitting right next to the text that's labeling it. It's done in this way, so the checkbox comes first, then the text. This is going to depend largely on your design and all of that stuff, but we're going to

[00:37] be doing that in this exercise, and of course our type is not going to be text, it will be checkbox. But yeah, a couple of things to think about when putting this one together. So get it done, and we'll move on to the next.

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

Checkbox

Transcript