Focus State

[00:00] All right, so if I select Pair wait, no, I'm trying to select pair. No pair. Ah, shoot. I want to select pair Okay, I'm gonna just not auto shuffle. Okay, great pair. We selected pair then I auto shuffle Oh great that ruins the selection anyway

[00:16] But my point is I cannot follow the the particular item when I don't have a key because as things are moved around React is just thinking. Oh, you're just like updating the value of this or whatever It's just doing its best guess and it cannot preserve my focus state It's like removing the element adding a new one. Whatever it's doing. It's not what I expect it to do

[00:36] and so the things like focus state the input values the If you're rendering components instead of inputs than any state that those components are managing all of that is going to just be a mess if you don't use a key and Using an index as the key is actually going to result in the same thing

[00:56] most of the time and so well, it is Potentially like make sense. I suppose it's not always going to However, if you have a proper key then react is like oh that data for or that UI for that data moved over here so I can just move that and every like preserve the focus and the

[01:19] Whatever selection range there is and so I can actually select this and I could say Do we have a pineapple pine pineapple, there we go Pine apple, there we go. Hooray and I I'm able to do that and make changes to it without worrying about Everything changing on me now. I

[01:38] Understand that you're probably not building a UI like this where things are jumping out all over the place on users But it is useful to understand that when you don't use a key properly you end up resetting the state of whatever Elements are being re-rendered and stuff you unmount and remount and it's not efficient

[01:57] For react to have to do that and you could definitely have bugs in your user experience as well So there you go hopefully that kind of give you a little bit of more playing around with this to get some idea of Why the key prop is so important

[00:00] This step of the exercise is not so much an exercise in changing things as it much as it is Just let's explore the key prop a little bit further and what impact the key prop makes to not only The state of your input and components, but also like focus state and stuff like that

[00:18] So and also a common mistake that people make is to just use the index like it You're you're mapping of an array and you get the item and then the second argument is the index and now you just use the index It's a key that's going to be unique, right? And no, you don't typically want to do that. There are situations where that can sort of make sense, but not normally

[00:38] and so by using the index as a key, you're going to observe that it's actually operates the same as without a key and Then if you have a proper key than things work properly So I want you to focus on these different elements select some text start editing some text and see what the impact is on your

[00:56] Experience and what you would kind of hope and expect would happen And yeah, just explore this a little bit. You don't have to make any code changes if you don't want to just explore this example I'll explore it with you here in a sec

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

Focus State

Transcript