Select

[00:00] Alrighty, let's get our AI assistant working for us. Come on AI assistant. We got our div. Here's our first name No, that's that's not it at all. Thanks. Anyway, maybe if we say account type selection and this will be account type now

[00:17] Sweet we've got our select. We've got our options and our closing select. Great. So let's talk about this. So here we have our select Id is account type selection and the name is account type. That's exactly what we were supposed to do for this one We have an option with a value that is empty

[00:34] So that is what our please select an option is that was our extra credit here from Hannah hundred So it's an empty string and then we had each one of the options So admin is a lowercase admin teacher parent and student. So With the option

[00:50] the value is what the value will be if that option is selected and then the Children of the option is what will be visible within that selection now You're a little bit limited on what you can stick in here just because the way that selects work So if you wanted to do Like a button in here. Hello

[01:09] That's not going to work out very well for you. So we this is one of the reasons why You may need to reach out to Another library or something for an experience like this, although like having buttons may not make the most sense But maybe you wanted to be able to like have somebody remove this option or something like that right there

[01:30] It could make sense. And so selects while a great primitive don't always Allow you to do everything that your designer wants you to do so Something to think about there, but this is how selects work rather than being an input with a type

[01:47] It is a completely different element. And in fact, it's a collection of elements. It's compound elements So we put these things together this select and the option together make the entire experience So we're going to actually talk about that way into the future When we're making our own compound components, which you can look forward to

[02:06] So, yeah, you make your select you have your option each option has a value and children and that's what appears Down there another thing To keep in mind is that the order does matter. So let's just shake this up a lot

[02:21] So that the order matters in that the first item is going to be the default selected item. So this is now defaults to teacher and then The rest of these will be sorted in the order that these things appear so the order does matter in

[02:39] This case which I think yeah, it's kind of interesting. So there you go. There's your select

[00:00] All right. Now we want to have a select that allows you to select an admin, teacher, parent, or student. So this is an onboarding form for some educational institution, I suppose. And we're going to be using the select element and option. So this is not your typical input element with a special type. This is a completely different set of elements that you're going to be

[00:20] using. And we want to also have an option that is please select an option. And when it's submitted, if the please select an option is selected, then the value of our account type should be an empty string. But then for each one of these others, if that's selected, it will be just the lowercase

[00:39] version of what was selected. So that is your job 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

Select

Transcript