Size Prop

[00:00] All righty, so what we want is to be able to say, hey, I have a size and that size is small, right? That's the objective here. So to add a size, we're going to need to add a type for this. So we'll say, and the size is optional and it can be small, medium, or large. So now the types are happy about this,

[00:19] but we're not doing anything with that size and that size is being slurped up into this other props. So if I save that, and we're going to see our small light blue box is looking funny because we're no longer passing that class name. And we should be getting that size in our other props.

[00:37] So let's console log the other props right here. Let's look at the console. Boom, we've got our size small. Okay, so we need to convert that size small into a class name that gets applied. So I'm actually going to pluck off size right here. We're not going to default it. And we'll have a size class name

[00:57] that equals the size if it's provided, then box size, or just an empty string. And then we're going to turn this class or include that size class name in here. Size class, class name, there we go. And save that. And boom, now our small light blue box is looking good.

[01:17] Here, let's get rid of our props there. We've got our box small, box medium, all of that. You'll notice we've got this double extra space and that's because the class name is not defined. It's defaulting to an empty string, which we don't really want actually, because we have a space on this side and a space on this side. Even if we trim it, that's not going to work.

[01:39] So what I actually fairly often do is I'll turn this into an array. Oh, whoops. Then I will filter any falsy values, like empty strings, and then I'll join with a space. And with that now, we have no extra spaces. So anybody who's concerned about that,

[02:03] not that it actually matters, it doesn't. It doesn't actually matter. But if you are concerned about it, then that's how you can fix that. Filter out the falsy stuff and then join with spaces. So that's cool. One other interesting thing is we could actually delete the class name here and it gets slurped up into the other props. And if we move this class name down here, then it's going to override the class name

[02:22] that's in the other props. And then we can access this from other props. So that still works. So that's nice. Just taking advantage of the order of things. And we could actually do the same for style. So move this style down here, then merge this with other props.style. And also, as the author of your component,

[02:42] you get total control. So if you didn't want to let people override the font style, you're like, no, no, no. This has always got to be italic. Then you can move the font style to this side and now they can never override the font style. So you have a lot of control over how you compose these things together. And this, again, is one of the reasons why the style attribute is actually quite nice

[03:02] is because you have that level of control. With class names, it's a little bit more tricky. But by providing a size prop, you can kind of narrow things down a little bit more and just make things a little bit better. And so what's cool about this, though, is that now our users of our component

[03:21] are gonna get a really nice user experience or developer experience with Autocomplete. So we can say size, and here, this one's a medium. And if they misspell medium, medium, then we're gonna get some help with that. And then also we have large, size is large.

[03:40] And all of our class names are applied properly. And honestly, the styling of the box is now all self-contained. So the component is the only one that knows or cares about the style box and the style box dash dash size, whatever. It can provide a nice API for anybody who's using the box

[03:59] so that the users of the box don't have to know how the styling is happening. They just know, oh, I can provide the size and it's going to work that way. A pretty common practice to do something like that. So you're not just saying, here's the style sheet. Apply whatever class names you want. You give it a much more defined shape.

[04:18] So I think that's pretty cool. And I think you are cool too. Good job.

[00:00] All right, in this step, we want to take things a little further and make an even better user experience when using our box. So, rather than having the class name be supplied, and so now they need to know, oh, they have these class names, box-small, box-medium, whatever. Instead,

[00:17] it would be better if we have a size prop that is typed, and you can have, like here, the specific sizes. That would be really nice. We're going to keep the style and class name composition just so that people can override or combine specific things if they want to,

[00:35] but the size prop would be quite nice, a nice developer experience there. So, your job is to add a size prop. 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

Size Prop

Transcript