Reduce Duplication

[00:00] OK, so what we need to do is define a type for this function, just like the shape of these functions. If we hover over this, we're going to see that type right here. This is the type of our operator function. Every one of these is going to have the same type. And so we're going to make a type operation function, which our AI assistance is helping us with.

[00:19] So we've got a record of operation functions. So this we can define as a record of a string, I guess, as the key, and an operation function. Now, at this point, all of our stuff type checks. But we have lost some autocomplete and other safety

[00:39] right here. So we can do whatever we want to right there. So that's not good. That's not what we want at all. So what we're going to have to do is we've got a circular dependency here now. Because we're defining operations as a record of some specific types. But then we derive our operator from that.

[00:58] So where does this come from? We're defining it right here. I don't know. Let's just try this. And then we can improve it later. So we're going to make a type called an operator. That is plus, minus, multiply, divide.

[01:14] And then our keys can only be operators. And that will take care of that. And now we have our type narrowing working enough so that we can get some autocomplete and some other type safety there. So that's awesome. This part, not so awesome.

[01:32] But we'll look at how to fix that here in a second. But we have successfully narrowed down our operations to just be a record of the possible operators to operation functions. And now, with that, we no longer have to have all of these types defined. Because TypeScript knows that the left has to be a number.

[01:51] The right has to be a number. Because this is an operation function. And so if we were to try to add something like this, then we'd be able to do left and right. Of course, now we have this, which is a really annoying nightmare thing. But yeah, we don't have to worry about the types. We have left.toExponential or whatever.

[02:10] Like, we can do whatever we want to on that. Because we know that it's a number, which is kind of nice. And that was the objective here. But we did lose a little bit of the freedom that we got before in some of our previous exercises. So let's take a look at that next. Yeah, good job. We'll move on.

[00:00] Okay, this step doesn't really have anything to do with react, but I just can't leave you here With what we have I think we could do better and the thing that we can do better is All of this I do not think I should have to do that I think that should be derived because the only thing we ever pass is a number left and a number, right?

[00:21] All of our operations are going to be doing that and so it's annoying to me that I have to specify The number and the return type and all of that stuff So your job is to make it so that This can be done So that we can add as many operations if we want we don't have to add the types for the function And this is totally a possible thing

[00:41] This first step is going to make some aspects of what we've done so far a little more frustrating And then we'll fix that in the next step But if you're just here to learn like how do I use typescript with react? I don't really care about going too deep on typescript You can feel free to skip this one because this has nothing to do with react and typescript

[01:01] This is just like typescript stuff So we're going a little bit deeper on the typescript stuff than you typically go in a react app But this is it's reasonably close to what I typically do in react apps But yeah again has nothing to do with react so hopefully this is a fun and interesting one for you

[01:21] you can follow the instructions and check out the The resources and whatnot and hopefully that will guide you in accomplishing this task good luck

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

Reduce Duplication

Transcript