Default Props

[00:00] All right, so we're going to say that the left default to 0, the right will also default to 0, and then the operator will default to plus. That is our goal. Those are the default values that we want. We're getting errors on all of these because right now, the props are not defaulted.

[00:18] So let's make these optional. First, from a types perspective. So left can be optional, the operator is optional, right is optional. With that now, we're getting an error in here because it's saying, hey, you're trying to grab operations or grab undefined off of operations, because the operator can now be the key of

[00:38] the type of operations or undefined because we just made it optional. In fact, the left can also be undefined and the right can also be undefined because they're optional. So here's how we're going to handle the defaults there. We'll say this is whatever left is or it's 0.

[00:56] The operator is whatever the operator is set to or plus. You notice we have such a narrow type on there that we can get some autocomplete here, which is cool. Then our right can default to 0 also. With that, we're no longer getting any type errors of any kind, and we're getting the proper output.

[01:14] So here we said the operator is the only thing we get left and right is going to be 0. On this first one, we just did left and right. We didn't do an operator, that operator showed up. Then we did the right as a default and we did the left as a default. I wonder what would happen if we do the right as a default.

[01:33] Dividing by 0, oh my gosh. At least the world didn't explode. So the way that you do this is just add a little question mark right next to the property you want to make a optional. Then you don't necessarily have to do a default every time you do this. In our case, we need to have a value for those,

[01:52] but having an undefined or unspecified value is totally a legit thing that you can do in certain scenarios. So yeah, there may be a case where it actually makes sense to not have a default value for these. But in our case, all of these should have default values.

[02:10] I think you could probably argue that a calculator shouldn't have a default operator. That's funny, but we're just taking this to the extreme so that you can learn how to do optional properties and default values, which is something that you do in React components quite a lot.

[02:30] So hopefully that was fun.

[00:00] Another thing that we do commonly with components is have default values and so we're going to have some default values for our calculator props. We want to set those default values for our calculator props and we're going to use those default values. We're going to kind of take this a

[00:16] little bit beyond what you might do for this particular component, but let's say that the default for left is zero, the default for right is also zero, and maybe even the default for the operator could be plus or yeah we'll just go with that. And with that then we can actually remove

[00:36] the things that are optional. So right now if I try to do that we're going to get an error right here. So your job is to make it so that those things can be optional and that they have the proper default value. You're going to be using a combination of TypeScript syntax for making the

[00:53] props optional and the optional properties syntax of an object. 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

Default Props

Transcript