React.js: Components

Transcript of the free preview lesson. Remaining lessons unlock with the full course.

Hello, my name is Tony and in these lessons you will learn about components. In this lesson we will take a look at Es six plus functions with JSX to render components. I wanted to call attention to this because this is very important. In a real world scenario you would not put every single component on one folder because as you can imagine, it can quickly get unruly what we are after for professional applications it in a real world situation is something that looks like this. So as you can see, it is no longer a flat structure. All of our components are inside of their own folder called components and every single component has its own folder. The structure of the folder is so that the definition of the component is in the JS or a JSX file and the styling solution, if one is needed, is inside of a CSS file. Now, in a professional environment there would also be test file here or spec file which would contain unit tests. We are not going to worry about that for now. But just to let you know if you ever see this in the real world, this is very likely what things will look like. Now for our purposes, what we are going to do is we are going to create an application that will keep a list of all of the things that we have for us to do that day and we will have the ability to take them off our list one by one as we hopefully complete them. This particular component is going to be just a list of all the tasks we have. Now first we are going to import react from react. It is very important. React is a super global. We need it for development of all of our applications. And here we are going to have our component. The component we are building is called a task list and it is going to take the following three arguments. The tasks let's close this so it doesn't complain. So tasks is the record set which we are going to traverse and output tasks one by one. Handle check is a function that is going to fire when we checkbox that corresponds to every single one of our tasks. And handle delete is another function that is going to fire when we actually attempt to delete a task off of our list. Now, how do we render conditionally inside of react? We are going to render conditionally inside of react, not using a traditional if else statement because the JSX nomenclature won't allow for that. We are going to be using a tertiary statement. You may have seen a tertiary statement before and this is their format. Let's do this above so we don't mess up our function. Just as an example. So the condition that we are testing for is always the first argument in the structure if this condition happens to be true. So if the if portion of our statement is true, this is the portion of code that gets run and if it's false, this is the portion of code that runs. Now we are going to take the same thing and extend it to our react ecosystem to make it look like this. So our record set is going to be an unordered list and if the length of it is less than one, let's make this more humanly. Readable and say if the length of it is zero, triple equals is super important. If you do a double equals zero, that means this is also equal to that. So it basically just compares the value but it doesn't compare the type. But we're not after character zero, we are after number zero. So we always do a triple equals for comparison. It makes it type safe. So what we are going to do here is if nothing is displayed, we are going to present the user with a text that basically tells them hey, nothing is displayed, there's currently nothing in your agenda. Would you like to add an event? And if something is displayed, this is where things get interesting. This is where we are going to loop through a record set that we are passing as the first argument to this function. Let's take a look at what that looks like. Delete icon. Let's import my icons so it doesn't complain. We're going to do this at the top. Delete our example it's. So the else portion of our tertiary clause now has a map function. This is the function that we're passing to our map function and what it will do is it'll produce HTML for us which will basically be an Li or a list item for the unordered list that we declared at the very beginning of this. Let's move this backwards tab. Here we go. As you can see, we're basically outputting this as one item at a time. We're going to be able to see what it looks like once we actually get it running in the next portion of our lesson. So as you can see, we are outputting the task. There's a checkbox that corresponds to it. Here's the text that actually says what the task is and here's the button that lets us delete it. Once again, we are just trying to conceptualize the task and what it's going to look like we will take a look at in the next portion of our course. Now, lastly, every single component we can't forget to do this. We are exporting the component we just created and we are exporting it as default. Now what does it mean we are exporting this as default? That means that when we are going to be consuming it inside of our app component that is going to hold the definition for the entirety of our app. We are going to be importing it like this without the curly braces. Now, because we're importing it as default, we can truly call it whatever we want and it'll still work.