Simple Function

[00:00] Our objective here is to reduce the duplication. And the way that you reduce duplication in JavaScript is you make a function, and then you call that function. So we're going to make a function, a function called message. And it's going to accept some parameters.

[00:16] Maybe we want to have the parameters be an object. So we'll call this props. But I'll just destructure that into children. There we go. So it's a props object. We're going to destructure the property called children. And then we will just return this. And we'll interpolate the children in this position.

[00:35] Children, there it goes. And then down here, we can say message. We'll invoke it with the children set to the respective messages. And close our interpolation. Boom, there we go.

[00:51] Result is exactly what we wanted in the first place. It's all still working as expected. But now we have reduced duplication. So if I wanted to add a message, and maybe we want to put it in a box or something, now both of these have a box. And I don't have to update it in both places.

[01:09] That's part of the benefit of reducing that duplication. That's why we do it. So that is that. Now, of course, the children, we don't have to call this children. We could call it greeting or whatever. And that will still work. There's nothing special about that,

[01:28] that particular name. And in fact, the way that we have it written right now, there's nothing special about the fact that this is an object at all. We could just have this be children. And it's whatever they pass to us is going to be applied as children. But we're going to keep it as an object, because this is getting us closer to the way

[01:46] that React components actually function. And so we'll leave it as an object with the children prop or property and forward that along. And that is working swimmingly. So this isn't, again, not quite the way that we do React components. And in fact, it doesn't even have the same semantics. It's doing things a little bit differently.

[02:05] But we'll explore that in the next step.

[00:00] For this first part of the exercise, we're going to get ourselves a little bit closer to having some generic function that can generate some JSX that's reusable. So here we've got our container. We've got two messages, hello world and goodbye world. And there's some duplication there that we might want to reduce.

[00:19] And so here's what it would look like if it was a little more generic. So it's got a class name message, but it also has this dynamic children. And so what if we made a function called message that allowed us to pass those children, right? That could be useful, especially if this was a lot more complicated and we wanted to reuse it all over the place.

[00:39] And so your objective is to do pretty much exactly this, make this API work. This is not a React component, or at least it's not used in the way React components are intended to be used. But this will get us a little bit closer to the point where we can actually do this. And again, this only works because of interpolation. We're interpolating a function call,

[00:58] which is an expression into this position. And the result of that function call will be React elements. So that just, that works out nicely because the div children can take React elements. So have a good time with this one. We'll see you when you're finished.

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

Simple Function

Transcript