Input Types

[00:00] Our AI assistant should hopefully be able to do most of this for us. So let's give it a second to think. Come on. No, OK, fine. We'll do it ourselves. There we go. We've got our input for our password. And now we've got a div for our input age.

[00:14] And so just to call out, the AI assistant is helpful, but not helpful enough. Because here, the input does have the appropriate ID associated. And it has the name, which is also important, like we have up here.

[00:30] However, the default value for an input is text, or the default type. And so if I were to type in here, like my secret pass, oh my gosh, people are watching and they know my password now. So we don't want to do that. We're going to say type is password. And with that, now our AI assistant

[00:48] should be able to know, oh, you want types on these things. So let's continue and put some types on these things. We've got our photo. The type is file, but it's also not restricting the input. So let's add accept, boom, image slash star. So we are going to accept any file that

[01:05] has that MIME type that matches this MIME type. The accept prop is pretty interesting, and it just improves the user experience a little bit. OK. So let's continue with our color. So there is a type of color. That's kind of neat. And then we've got a start date.

[01:23] So there is a date picker on the web. It may not be styled the way that your designer wants it to be, but it does exist. So good for MVPs. But you will probably want a component library for something more custom. In the future, the web is always evolving and stuff. And so in the future, maybe the date picker

[01:42] will be a lot easier to style. You can customize and just use a native date picker, which would be a huge win. But yeah, that's not the way it is right now. OK, so here's my username. And here's my password. And here's my age. How old am I? I turned 36 this year, so 35.

[02:01] Yeah, sweet. Never going to give you up. And my favorite color is somewhere around the blue spectrum, somewhere around there. That looks pretty good. And we'll go with tomorrow. So now I just dated this video. But if we submit this, we're going to get a full page refresh.

[02:19] We're going to see all of the data that we submitted. That's awesome. We can come over here, take a look at our URL. We see all that data in the URL, which is what we would expect here, because we're making a GET request. And then we're able to display that data. Got a little bit of a problem right here that we'll deal with later, because that image, we

[02:38] wanted to actually upload the image, not just the file name. But yeah, that is our different types. Now something that I want to call out for the password type here is that you'll notice I hit the Back button, and all of these fields are still filled in, except for the password.

[02:57] So the password is actually unique in a variety of ways for security reasons. And so that's why it's important that you use the password type. So there you go. That is a number of the different types of inputs. Of course, there are many more, and we'll explore more of those later. But we want to deal with this photo thing a little bit more.

[03:17] So let's look forward to that next.

[00:00] We're going to enhance our form a little bit here. Right now, we've just got the username. We want to add the password, age, photo, favorite color, start date, all of that stuff. And all of this you can find in the MDN Mozilla Developer Network web docs that will show you all the different types of inputs.

[00:19] So yeah, we're just going to explore some of the input types here and what impact that has on our form submission. So give that a whirl. 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

Input Types

Transcript