Derive Types

[00:00] So the actual solution here is not very tricky, or at least it's not a lot of lines of code. So what we need to do is get the type of the operator, and, or operations, operations, there we go. And then we're gonna do the key of that. Okay, so maybe this is like, hold on, what's going on?

[00:20] So let's extract this. We're gonna make a type of operation, or operations, and then we're going to do the type is operation, so the different operation possibilities. And so that's gonna get us our plus minus multiply divide, and then we stick that in here.

[00:38] So this is basically just a short version of that. And so what that means is, if I hover over operator, we're gonna see those are the possible values, and if I do decide to add a exponentiation operator there, then I can 100% do it right there. TypeScript's not mad, I'm not mad, the browser's not mad,

[00:58] everybody's happy, we're all happy. And all because now we're deriving this, and so we can add as many other operations as we want. Now we can do modulus, and modulus that, there you go. Kind of fun and interesting stuff, and it's all just derived out of this operations object.

[01:18] Pretty cool.

[00:00] You may have noticed that if we add something like the exponentiation operator, if that's the right way to say it, that we are not going to be able to use that, even though it technically is going to work. Hmm, that's kind of annoying that we have TypeScript saying, no, you can't do that,

[00:19] but the application saying, yes, actually, you can. And the reason is because we have narrowed down our operator so much that we're not able to add additional things. We just have to, every time we make a change to that, we have to add another one, which is kind of annoying.

[00:35] It would be nice if one could be derived from the other, and absolutely, it totally can. So here is an example of a couple of things that you're going to need for this one. So here we have our user. It's an object with a name and is cute. We can actually turn that user

[00:51] into a type. We basically have two worlds going on here. We have the runtime world, and then we have the type world. The type world never makes it to the browser or the runtime environment, but getting that runtime world information into the type world is done

[01:08] using this type of keyword. And so we say type of user, that's going to get us the type of that user. Huh, fancy that. And so now we've got this type user, which is name is a string and is cute

[01:22] is a Boolean. So that is the derived type of that user. And then you can use key of on a type to get all of the keys of this particular object. And so now our user keys is going to be name or is cute.

[01:39] So those are the possible keys of this particular type, which is an object. So your job is to do something similar for our operators. So we don't have to worry about the operator inconsistency

[01:54] here, where we can add operations, but our operator doesn't support it. So I don't want you to do what we've done here. You need to do something a little bit better. So we'll see you when you're finished.

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

Derive Types

Transcript