Composition

[00:00] Let's start out by bringing in error boundary and fallback props. We're gonna bring in the type for fallback props from React error boundary. We need the type because we're gonna be using that in our component that we make. Cody is telling us we want to rename this to onboarding form. The reason is that we can't wrap this in an error boundary.

[00:19] Like I can't just say, okay, error boundary right here and wrap all that because remember the error occurs while we're creating these elements. So the error is right down here. And so we haven't actually given React our error boundary yet by the time this error happens. We're in the process of creating that error boundary

[00:39] and then the error happens. So we can't wrap it in the error boundary because React doesn't know about our error boundary because we throw an error before we actually end up finishing creating it. And so that is why we're going to rename this from app to onboarding form. And then I'm gonna come down here.

[00:56] We're gonna make a function called app. We're gonna return the onboarding form. And now everything is gonna be exactly as it was before except now we have a place that we can put our error boundary. So I'm gonna wrap this in an error boundary, stick our onboarding form in there.

[01:13] And then for our error fallback, we'll put our error fallback. We're gonna make that function. Or actually we need to use fallback component type. That's why it's complaining fallback component. There we go. And then we're gonna make our error fallback. This is gonna take some props that are our fallback props.

[01:35] And then we can make whatever we want to here to display. And I'm not gonna be too particular about what you do in here. It doesn't really matter all that much. Like your designer will give you, well hopefully they think about error states and they'll give you what they want it to look like. I think I have a style with the color of white

[01:55] or no, of red that would make it invisible. And whatever, you can make it look however you really want it to. And with that, there's also an on error prop that Olivia the owl is telling us about that you could use to report errors to some reporting service or something if you need. So there we go.

[02:12] We got our something went wrong, invalid time value. We're getting invalid time value because we are passing the error message as part of the props here. You may or may not want to do that depending on how comfortable you are showing those types of errors to your users.

[02:31] But yeah, that gets us showing a much better experience for our users. It's at least telling the users something went wrong and they can report it to you and you can go and try and reproduce it, all that. And then everything that we just did is not going to impact a working version of the app. And so the app still totally works, but if there's any error at any time

[02:50] in the process of React doing its thing, then it's going to end up rendering this error fallback instead. And that is what we call declarative error handling where you can compose these things together so that the error boundaries around our component that could potentially throw an error

[03:09] and React handles handing that error off to our error boundary component, which will render the error fallback in the event of a problem. So there you go. That is your first look at error boundaries.

[00:00] So we've got this error right here. If you take a look at the console, it's going to say invalid time value. This is because somebody made a typo passing a string to create a date, and you're going to fix that typo eventually. But we want to handle this case. What if somebody does make that mistake in the future? We want to make the user experience even better.

[00:18] So we're going to have to restructure our code a little bit so that we can wrap the bulk of the app in a single error boundary. So we can handle these surprising unexpected errors well. And then by the end of this, you should have something that looks a little bit like this. You're going to be using the fallback components API,

[00:38] where you can pass your error fallback, and then the rest of the app goes inside of here. So that is your objective for this exercise. I think you'll do a great job. Have fun.

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

Composition

Transcript