Radios

[00:00] So we're going to start with a field set right here. And inside that field set, we're going to have a legend. And that's going to be the label for the set of fields. And then we'll set that to visibility. And then we'll have our div for each one of these labels.

[00:17] Now, I think in my solution, I don't actually include the div. This is going to come down to your styling preferences and all of that stuff. But the rest of what our AI assistant did here was reasonable. So we have our label that contains both the input and the label itself. That works out nicely.

[00:35] It's going to, again, be however you end up deciding to style your UI. But the point is that when you click on the text public, it's properly associated to the input, which is the checkbox. And so by clicking on the text, it's actually going to make the selection, which is nice.

[00:54] And here we have our name matches. So that's the important thing with the field set or a radio group, is that the name is the same. And that's how the browser knows to associate all of the different radio buttons with each other so that when you select one, it unselects the other or unchecks the other. We also have the type of radio. And then here we have our value.

[01:14] So this is like the value that we have in our select options. And that determines what the value will be for this particular field named visibility. So if I pop open our DevTools, I have public selected, and we submit that, then we're going to see visibility is set to public.

[01:34] If I change it to private, then we'll see that our visibility is set to private. And then, of course, if I have no selection and I submit that, then we don't have a visibility that shows up in here at all. The account type does have a value set to an empty string because we have this default, please select an option, which

[01:53] has that empty string. So I suppose there's one difference between the radio and a select, is the select is always going to default to the first option, whereas a radio doesn't necessarily have to have a default. And it will just not appear if one of those is not checked. So there you go. That is how you add a radio group.

[02:13] You need a field set so that you can have a legend that labels this whole collection of fields so that Assistive Technologies knows what to call these things. And users who are using your app will know, like, OK, so I see what my options are, but what am I choosing?

[02:32] Does this option apply to? And so that is what the legend and field set are for. And then we have a label for each one of our individual fields. Those have the same name, the type of radio, and the value that this name should be assigned to when this is the one that's selected.

[02:50] So there you go.

[00:00] Radio buttons are actually pretty similar to selects, where you have multiple options, only one value. Here we have multiple options, only one value. And it's also in some way similar to checkboxes, where the checked property is how you determine whether one of these inputs

[00:18] is checked. So the situations where you would use a select over a radio group is that maybe there are a lot of different options. It just looks funny. But the ultimate result is going to be

[00:33] the same, whether you're using select or checkbox or radio buttons. You can dive into the MDM web docs to learn more about this. One thing I thought was kind of interesting is how the radio buttons actually come from these radio buttons, where you push one in, and then you can push another one in, and that will pop the other one out. So you can only have

[00:54] one of them selected at a time. And so, yeah, that's, if you never knew, that's where it comes from. It's actually from old-fashioned push-button radios, which is kind of fun. So your job is to add this radio group. The challenge here is that we've got actually multiple different kinds of

[01:12] labels, whereas with a select, you have the label for the select, and then you have options, and each of those options has children, which is the label for that option. Here, you have a label for the whole group, and then you have labels individually for each one of these inputs.

[01:30] And so you have to kind of have a different type of label to make this work in a good way. So you're going to be using a field set for that, which will be fun, and a legend. So have a good time with this. We'll see you when you're done.

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

Radios

Transcript