Create React Elements

[00:00] So, we've got Marty the Moneybag helping us out a little bit here to help us import these files. And so, if I save that and we go take a look at our network, we're going to see we're loading in React and ClientJS, so that is working as expected.

[00:15] And now, we still can get the root element, so we've got our HTML ID of root here. And so, we're going to grab that root element. We still want to append something to it, but it's going to be a little bit different with React. So, we still need to create an element that's a little bit different with React as well. So, rather than document create element, we're just going to use create element from React.

[00:35] And we are going to create a div, but in React, you don't typically mutate the elements you create. Instead, you pass the properties that you want that element to take. So, we're going to have our class name and our text content here. So, in React, this is also called class name, so we'll say class name, and that's a container.

[00:55] And then, in React, rather than using text content, we're using children, and this prompt can be called children, or you can set it as a third argument. So, if we move this over here and remove that, those are functionally equivalent to one another,

[01:13] and they do have some slight differences that we can talk about as we dive into the children prompt a little bit more later. Okay, so then we're also going to need to append this. If I were to save this right now, then we're going to get object to object in the page

[01:28] because the browser's like, wait, you're appending just an object, it's not a DOM thing, so I guess I'll two-string it, and that's what we're appending. So, that's not exactly what we're going for here. So, instead, we're going to tell React, hey, I've got this React element. In fact, let's take a look at that.

[01:44] Console log element, and this is what a React element looks like. It's got this type of thing, that's how React knows that it's a proper React element, is this special symbol. It has a type, that's the type of element we're creating, and then it also has props,

[02:03] and the props are children and class name. Sweet. So, it's like what we provided. So, this is just like a description. We called it UI descriptor of this element that is supposed to be on the page.

[02:16] So, we need to turn this from a React element into a document or a DOM element, and we're going to use create root with the render API to make that happen. So, we're going to say create root, the root of our application will be this root element,

[02:35] and then we're going to render this element into that root. So, if I save that now, we're going to get our hello world, we can take a look at our UI, and yep, inside of that root element, this is our root for our application, we're going to render this element, which we created right here.

[02:53] So, that is how we create a React element and get it onto the page using the create element and create root APIs from React. Awesome job.

[00:00] So, for this exercise, we need to bring React and ReactDOM onto the page and use their Create Element and Create Root APIs. You can dive into the public directory of the workshop repo to see what these files are. But, yeah, that's how we're going to get React on the page. As a reminder, this is not typically how you bring React on the page.

[00:19] Typically you're going to have a whole build tool and a build pipeline, all that stuff, because you want to have typings and you want to have bundling and all that stuff, optimizations But, for us, we're doing things as simple as possible, so we're just bringing in React and ReactDOM this way.

[00:36] And you're going to change from Document Create Element and all of that stuff into React Create Element and how that all works. So it should be a fun little migration. By the end of it, your app should look exactly the same as it does now, but it will be made with declarative React APIs instead. So have a good time with this. We'll see you when you're done.

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

Create React Elements

Transcript