Props

[00:00] Okay, we've got a couple calculator usage usages right here So we need to make our calculator actually display stuff for that So we're going to accept some props, but I always almost always destructure this so I'm going to destructure left operator and right and

[00:17] Then we're going to get the results. So let's get our result from operations. So here are operations and Our operator so plus minus multiply divide and then pass the left and the right and it will perform that calculation so now we've got our result and So here now we can say code

[00:35] We'll say left operator, right close that up with a closing code and that equals the result we can put that in an output for Accessibility reasons and boom now, we've got one plus two is three. That is correct. Well done computer One divided by two is 0.5. Awesome. And that is props

[00:56] The thing I wanted to drive home here is you don't always have to use children You can use anything that you want to call it Whatever you like and it doesn't always have to accept primitive types like this. It can accept an object It can accept other react elements all sorts of things that you can do with these components. So basically think of components as functions that accept arguments and

[01:16] Think of because that's what they are and think of react elements or this JSX where you're calling them as Invocations of that function even though we just learned that you're not actually invoking the function react will later but that's kind of how you can think of that is just calling a function and You get total control over the props and the the names of those props and all of that

[01:39] And so there you go, that is a little bit more experience with JSX and custom components. Good job

[00:00] OK, let's get some more practice with custom components. We're going to have a calculator rendered here. It's not like a calculator with buttons and stuff. We're not quite that advanced with our React stuff yet. But we can make a component that can accept a left, an operator, and a right.

[00:16] And that can render a div that has the code for one. So it'll be left, then operator, and then right, and then have an equal sign, and then have output for what the results of that should be. Some of this stuff is done for you.

[00:33] Your job is mostly to focus on how these props work. So as a custom component author, you're going to be creating props a fair bit. So I think that you should have a pretty good, solid understanding of how to do that. So that's what this exercise is all about. We'll see you when you're done.

Learn everything you need to be effective with the fundamental building block of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app's users.

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 Hooks

Advanced React APIs

React Suspense

Advanced React Patterns

React Performance

React Server Components

Epic React Pro

React Fundamentals Intro

Intro

Hello World in JS

Generate the Root Node

Dad Joke Break

Intro to Raw React APIs

Create React Elements

Nesting Elements

Deep Nesting Elements

Dad Joke Break Raw React APIs

Raw React APIs

Intro to Using JSX

Compiling JSX

Interpolation

Spread props

Nesting JSX

Fragments

Dad Joke Break Using JSX

Using JSX

Intro to Custom Components

Simple Function

Raw API

JSX Components

Dad Joke Break Custom Components

Custom Components

Intro to TypeScript

Narrow Types

Derive Types

Default Props

Reduce Duplication

Satisfies

Dad Joke Break TypeScript

TypeScript

Intro to Styling

Styling

Custom Component

Size Prop

Dad Joke Break Styling

Intro to Forms

Form

Form Action

Input Types

Submission

Form Actions

Dad Joke Break Forms

Forms

Intro to Inputs

Checkbox

Select

Radios

Hidden Inputs

Default Value

Dad Joke Break Inputs

Inputs

Intro to Error Boundaries

Composition

Other Errors

Reset

Dad Joke Break Error Boundaries

Error Boundaries

Intro to Rendering Arrays

Key prop

Focus State

Key Reset

Dad Joke Break Rendering Arrays

Rendering Arrays

Outro to React Fundamentals 

React Fundamentals

React Fundamentals

Transcript

Props

Transcript