In this guide we're going to talk about the other main component which has two names that you're going to hear it called quite a bit. One is a functional component and another is a presentational component. If you hear either of those two words, just know they mean exactly the same thing. And we're going to walk through how to create one and then I'll talk about what the key differences are.

So right here you can see our syntax. We have this portfolio items and this is a regular class based component. In our app, I'm going to get rid of those other duplicate calls and I'm simply going to have our portfolio container. I'm also going to put it down here at the bottom just because this is going to start to be where we want to have all of our content placed.

Just to kind of go through what this is going to look like, right here we are going to have a navbar here. It's going to have links, it'll have our name, and then on the home page I want to have three columns and these three columns are going to have rows as well and so we're going to have probably about three or four rows.

It will depend on how many projects you have, obviously. But that's going to be the grid system that I want to go with. So I want the container to be all of this content here, so that's why I want to move that.

Let's now go into how to create a functional component and we're going to call that functional component from within our portfolio container. So inside of this same directory and in fact you know one thing that I'm kind of noticing, you notice how if we add another item here, so say we add a portfolio item then we're going to start growing this list of files, and it's going to be kind of hard to navigate.

So let's create a folder in here, I'm going to say new folder and I'll just say portfolio, and then let's drag this portfolio container into it and this is going to break our app temporarily if you switch back to Google Chrome you'll see it says failed to compile.

Now I want to keep these errors inside of the course because you're going to run into these errors. I use react and Vue in these frameworks on a daily basis, I run into errors every single day, so I want you to see as many errors as humanly possible so that when you run into them after you've finished going through this course and finish going through the boot camp, you'll be able to then keep going and when you run into these errors you'll know how to fix them.

So whenever you get an error like this, where it says failed to compile, it says module build failed. And then it says error, no such file or directory. And so what it's doing, and it even says, it's looking for portfolio container and it can't find it, and it's looking for it in the components directory.

Well we moved it, so that means we then need to go into our app component and we need to update our app. So instead of having it simply look in the same directory, I'm going to have it first go into the portfolio directory and then the portfolio container.

import PortfolioContainer from "./portfolio/portfolio-container";

Hit save, switch back and now everything is back up and working. So that's how you can change the path.

Now let's create a functional component. So we have our class based component here and we're going to call functional components from inside of it. So let's open this up inside of our portfolio directory and we're going to create a new file and we'll call it portfolio-item.js.

The way that this is going to be structured is, the way that I'm envisioning it, is our portfolio container is going to be what contains all of the portfolio items. And so the portfolio container is going to be something where we only have one of them and then we're going to have nine or twelve portfolio items, and so those are going to make up the rectangles that we'll see right here.

Now that we have that, let's actually go and start writing this code. Now this is going to be very different than creating a class based component. It is going to be quite a bit less code. It's going to start even at the very top, when I say import, I'm just going to import react, I'm not going to import a component.

Now this is still technically a component but it is not a functional component so we don't have to bring in that class because we're not going to be extending any class because it's just a pure javascript function.

Now, we're importing react because what react is going to do is it's going to recognize that there's a function here that we're using and it's going to say, okay, they want to use a functional component. So we're still going to get a little bit of react functionality but we don't have to go and create and extend classes or do anything like that.

So here I'm going to say import react from react and that's all I need to put in there, and then from there I am going to create the function. So here I'll say export default function and then right here, this is going to be something that might look a little bit different. I'm just going to say export default function and that's all I need to put. I don't have to put a name and this goes into how the export default works, so this is going to be where you'll see a little bit of how this operates.

Now inside of here, I don't have to have a render statement anymore. Now I can just say return and I'm going to, in here, put a div and I'll just say portfolio item. And then I'll just close off this div and let's actually get it ready because eventually we are going to be putting this in its own heading and stuff, so we'll say H3 tag and hit save.

portfolio-items.js

import React from "react";

export default function() {
    return (
        <div>
            <h3>Portfolio Item</h3>
        </div>
    );
}

Okay so now what we can do is inside of our portfolio container, now we can import this. So I'll say import and I want to call this portfolio item from and because we're in the same directory we can just say dot which means I want you to start in this directory/portfolio-item, hit save.

Now inside of here, now we can call this, so I'll say portfolio item, make sure you close off with a backslash and a greater than sign, hit save, and now if you come back here you can see that it has our portfolio item.

So what gives? Why in the world? It kind of seems we go the exact same functionality with less code here as we did with this class based component. So when are you going to want to use one versus the other? Well it's going to become much more apparent as we go throughout this course.

A functional component has a lot less functionality. So there are going to be all kinds of different things a class based component can do that a functional one cannot. So I can add some comments here and we're not going to go into these yet because they are going to have entire guides dedicated to them. But for right now with the way react is, if you want to use state, then you need to use a class based component. A state will currently not work inside of a functional component.

Now I did watch a number of react talk and this is in the winter of 2018 right now when this is being filmed, and in future versions of react they are going to allow you to use a lot of these tools, and so that's going to make it really nice and for the most part, then you are going to be able to write almost all of your components just like this.

But for right now, if you want to use state or if you want to use what are called life cycle hooks, which we're going to go into both of these in detail, these are two very powerful tools. They help you work with events and manage data inside of a component, if you want to do that, then you need to use a class based component. If you simply want to render out some content, then a functional component is the way to go.

Now, the very first question that you should probably have is when would I use one versus the other? And the best approach to have, the approach I try to take is if I know that I'm going to use state, so if I know I'm going to have to have dynamic data that I can get data in and I can update it on the page or in that specific component and I need to be able to react to changes and those kinds of things, then I probably need to use a class based component.

If I'm using forms or anything like that, then that component has to be a class based component. If I'm just rendering out content, then a functional component works perfectly and so that's actually why I picked this as an example. This is a great way of understanding the way that the two should work.

So we have a portfolio container. Once we learn about how to communicate with API's and pull data in, this portfolio container is going to have to have its own state. It is going to call an outside API, it's going to bring data in and it's going to have to manage that.

Now the portfolio item on the other hand is something where we are just going to pass it data. It's not going to do anything besides render an image, a title, have a link and those kinds of things. So you can think of your functional components almost like dumb components, and I don't mean that in a bad way. I just mean that they shouldn't have a lot of logic going on.

It should simply be something that takes in data and shows it on the page. Whereas a class based component has to have a little bit more brain power. It's going to have to perform some operations, it's going to have to think about the data it's managing and those kinds of things.

So that is the key set of differences between a class based component and a functional component inside of react.

Resources

• Source Code