Props

[00:00] Okay, so here's what we're going to do. I'm going to change this to a string of two, and we're going to work until this is giving us an error. In fact, let's do a string of one here also, and then I'm going to make this a, I don't know, a boolean false. Here we go. And so now it should blow up,

[00:19] but we're not getting any warnings right here, and our job is to make it so that we get warnings from that. So we're going to make a type called calculator props. This is going to accept a left, an operator, and a right. The left is a number. The operator right now is a string. We're going to improve this in a bit. And the right is a number. And then we set that to be, actually,

[00:39] I'll leave that there. You'll see here in a second. It's kind of cool. We'll set this to be calculator props. And now we're getting a red squiggly here because we were expecting an error, but we're not getting one. So that's a good thing. And then if we come down here, boom, we're getting errors. Sweet. So we don't even have to run the application to know that there's

[00:57] a problem. So let's get rid of this. That error goes away. And let's change this back to a number. And let's change this back to, what was it, multiply? Yeah. And our calculator is working.

[01:08] Hurrah, hurrah, hurray, yay. So here we have our type calculator props. We have that being set as the type for this object, which we are immediately destructuring. Of course, we can do props and destruct those here if we wanted to. That also works just fine. And again, the syntax allows

[01:28] us to inline this stuff too if we want to. That works as well. And if we're going to do things the way I typically do them, then we're going to destructure inline as well. So this is the way that most of my components end up looking. Sometimes I'm going to extract it to a separate type,

[01:45] but most of the time I don't bother. I just inline it all. And I think it works nicely there. All right. There you go. That's the first step of making the experience much nicer for when you are rendering this calculator.

[00:00] All right. So we've got our calculator and we're calling it or rendering it in our app a couple of times. But we need to improve the types of this because somebody could absolutely put in a string of two, and that's going to kind of change the behavior a little bit.

[00:17] So, yeah, we want to add some type safety to this. And we are going to do this in a couple of steps because we want to just iterate to a really nice solution. For one thing, it would be really nice if we had our operator autocomplete, but we're not getting any suggestions here.

[00:33] So we can have like an operator that doesn't make sense and it blows up the whole application. So that would not be awesome. We won't get to that in this step of the exercise, but we will get there eventually. And then, yeah, of course, we want the right and the left to be typed as numbers and all of that.

[00:51] So we're going to start with just this portion to take care of that. So you remove that. We're going to get a bunch of errors right here. So your job is to fix those errors with our calculator props.

[01:02] You can inline it if you like to, but in our solution here we're doing calculator props as a name just to keep things separate as you're learning this stuff. So we've got plenty to do. I think you'll have a good time. 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

Props

Transcript