When it comes to react, it's all about the components. components are probably my favorite part of developing and react with components, you're able to take any UI and split it into smaller reusable chunks that can work independent of each other. For example, let's take the code sandbox interface we're working in and think about how we might split it into components. Ignoring the header and footer areas, I see the potential for three top level components, a file browser component, file editor component, and a browser window component. And each of these components can be made up of their own components as well. For example, the file browser has an accordion menu that could be its own component, and each item inside the accordion could also be a component.

If you wanted to go further, each items icon can even be a component as well breaking your UI into small manageable components like this has all sorts of benefits including making your code easier to reuse and test. But we can't talk about components without mentioning elements. And element is the smallest building block in react and describes what you eventually see on the screen. To demonstrate I'm going to start by creating a simple h1 element. And inside the element will have some Hello text and then all included in our app components we can render it to This is an example of a very simple element. But elements can be more complex as well.

Here's an example of a more complex element named wrapper that's made up of a div with some paragraph text inside, you can think of elements as the building blocks, they use the piece together your components. So what does a component look like a component in its simplest form is just a function. For example, let's say we had a simple adding function that took two parameters and return the sum of two values. You can see if I pass the add function two and two, I get four log to the console. And if I change the second parameter 10, I get 12 back in the console, but what is really cool is that we can easily convert this add function to be a react component instead, first, use a capital A for the component function name as all components need to start with a capital letter. This is because react will treat components starting with lowercase letter as Dom tags.

Next, instead of the function taking two parameters will take a single parameter name props, props are how you pass data into your component. A component is an immutable function meaning as long as you give it the same input and reacts k prompts should always receive the same output. Now I can take the Add Component and have the app render it and to pass in the values for A and B, you just add them as properties to the component. Now you can see that the sum is being rendered to the screen. When it comes to components, React actually provides two different options. The first and the simpler of the two are functional components, which is a function that has a props parameter and returns a valid react element.

The Add Component we just created as an example of a functional component. The second are class components. And like the name says the component will be a class instead of a function. For example, I can easily convert the Add Component to a class component start by converting const to class, then have the class extend from react component, then add a render function have that return the element instead. And lastly, since props is now an instance variable, add this in front of it. And there you have it a class component, but the output looks exactly the same as before, which begs the question why use a class component at all It just so happens There's a very good reason only class components have access to react state and lifecycle methods.

Neither of these features are available from functional components. Don't worry, we'll get into both state and lifecycle methods later. Another nice feature of components is the children prop. For example, let's say I wanted to create a reusable page layout component. The idea being that all my pages share the same header and footer. I need to pass in different body copy for each page.

So how do I do that? Enter props children. Now I'm going to render the layout component but instead of a self closing tag, I'm going to use an opening and closing tag. And then I'll add some paragraph elements for this layout to body copy. And just like that, we can see that my body copy is being rendered in between my header and footer. You can think of props children as a placeholder for whatever content you include between the opening and closing tags when you render your component.

We're going to go ahead and add in our layout component But this time, I'm going to pass in different body copy, because Leo does using props children, I'm able to pass in different body copy to the same layout component. This is a very powerful feature that allows you to write components that require no knowledge of the children there, including, you may have noticed that when I created the layout component, I wrapped it in a div element. Same with the app component when I added the second layout component. This is because a component should only have a single root element unless using something react calls fragments. To demonstrate, I'm going to remove the wrapper div from the layout component and see what happens. You see, as soon as I do that, I get an error.

Adjacent JSX elements must be wrapped in a closing tag. Pretty much. This is saying I'm expecting a component to return a single element and you've given me three instead. Now there is a way to return multiple elements and that is to use fragments like the error suggests this is handy as it prevents having to wrap our elements in what is a useless div in this case, to update layout. To use fragments, I just need to wrap the elements in the React dot fragment component. Now when our page renders, there won't be an extra div element and our error should go away.

That wraps up everything I wanted to cover in component fundamentals. Next up is taking a look at the HTML like syntax we've been using to write our components called JSX.