Raw API

[00:00] Great, so let's take this message component. I'm going to add a console log right here. Console log calling message, and we'll put in children right there. We don't need three yeses. And then we'll add another console log right here.

[00:18] Console log element right there. So let's take a look at the console right now. Here we're calling message hello world, calling message goodbye world, and then we get our element. Now I want you to pay attention to what happens with those console logs when we switch over to create element calls. So I'm going to say, we're still going to interpolate this, say create element.

[00:38] Here's the type of element I want created. I want a message element created. And then here are my props. Here's my children. And then we'll close that. Now of course you could change this to have children be hello world, and then your props could be null. Here, let's do that. We'll do both. So we'll do it that way for this one. And then create elements for the message on this one.

[00:57] And yeah, thanks coding assistant, but we don't need that help there. Okay. And create element is not defined. That's right. We need to do react.createElement because we updated our import to import everything as React. So that works. Okay. Great. So result is good. We can take a look at that.

[01:16] We got our message and everything is working properly. We can change this to add box and that still is going to work as desired. So no problem there. But something did change. Let's take a look at our console now.

[01:29] So now we're getting the element and then we get these console log or yeah, the logs called for the message before these logs were called before the element. And that should make sense, right? Because before we were calling it in the process of creating the element.

[01:48] Now we just pass it to React and we say, React, you call it whenever you're ready and go ahead and pass it the props so that it can use those props to generate its own elements. So when we do that, React actually defers calling this until it's necessary.

[02:04] And it's not necessary until we actually are trying to render this to the page. If we also take a look at what the props look like here and see our children. Now this child is a type of message that was not the way it was before.

[02:22] Before it was a type of div. And so there's like this special type of React element. We also have the props right here. Hello world. Okay. That's interesting. That is the idea behind create element is that React makes a special type of element

[02:40] and it will call your component when it's necessary and actually continue to call it when it's necessary as we add state to these components and things that can keep that isolated from the rest of the application. That's part of the composability story that we get out of using React components. So there you go.

[02:59] Now it's working semantically the way that a custom component works, that React is the one that's calling the function, but we're still not quite there with entirely the syntax for how you use custom components. So that's what we're going to get to next. But hopefully that was an interesting exercise for you to kind of get a little bit more of

[03:18] an understanding of how the create element API works and how these custom components operate.

[00:00] So, we're going to get this to a point where it's at least working semantically the way that React components work. And that is the createElement API. Using the createElement API, we can pass a function to the createElement API. So, before we were saying div right here, no, now we want our function to be the special element.

[00:19] So, we've got like these special kinds of elements that are functions. And then you can pass your props and then you pass your children. And then that function, React will call that function. We don't call it anymore. We're just passing the function. And React will call that function when necessary. With the props, the props children will be that array of the children that was passed.

[00:38] And then the rest of the props object are just whatever is on here. If you recall, when we create an element, the props all get slurped up into that one object of props. That's what's going to be passed to your function component. And then your job is to just return some renderable thing. And that is what a React component is.

[00:55] In this exercise, we're going to switch from calling our message function to passing it to createElement so that we are taking advantage of the semantics of how React elements work. This will mean a lot more when we start using things like hooks and stuff in the future.

[01:13] But yeah, there are some slight differences that I think that you will appreciate. Maybe add a couple console logs before and after. Take a console log in the message function and then put another console log that logs out the elements.

[01:27] And notice how this changes before and after once you've made this move over to createElement. It's kind of interesting. All right. I think that's enough. Have a good time.

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

Raw API

Transcript