So, in the last section, we walked through an extensive list of everything that is contained in a React Application, and hopefully you have a good understanding of that, and the whole goal of this section is to start walking through the fundamentals of React.

These are gonna be the core concepts that you're gonna need to learn, in order to build out your project. The parts that we're gonna take, instead of just going through the fundamentals, 'cause I think that can get a little bit boring, we are going to start building out our portfolio application, and we're going to strategically learn the fundamentals along the way. So, that's the way we're going to go through this section.

Now to start off, because React is, what is called a component-driven architecture, that means that I think one of the best places to start is to understand what components are, and so that's what we're gonna start in this guide.

We can't fit in everything about components, in a single video, that would take hours and hours. So we're gonna break it up into different parts of a React component, and we're gonna start by creating a new one here, and then we are going to call it.

So, let's switch over into the code, and just so you're starting where I'm starting, I have the application running on localhost:3000, I also have the server running. Remember, the command for that is npm run start, that'll run your server, and now I'm gonna switch over into Visual Studio Code.

So, we are going to be doing pretty much all of our work, almost for the rest of the entire course, is gonna be in this SRC directory. If I open this up, you can see that we have this components list, and inside of here, we have a file called app.

Now, we've already looked at this, but now let's take a little bit more of a deep dive into what a React component is, because at the end of the day, all of the components we're going to build throughout this course, are gonna all be nested inside of this app component.

So, we can use this kind of as a model here. There are a number of things that you need to have in order to use a component. First, you need to import React, and that is something, whether ... and we're gonna walk through there are all kinds of different components, two main ones, but there are different ones that you can use, and we're gonna walk through when you are gonna want to use each type, but no matter what you use, you always have to make sure you import React at the very top.

So, what we're doing is we're saying, "I want you to look inside the node modules directory, I want you to grab React, and then, I want to import the react library, and in this case, we also want to import the component."

If you're kind of new to JavaScript, if you're confused by why we have curly brackets around some of these items, and we don't around others, we're gonna talk about that in a later guide. For right now, just know that what it means is, the curly brackets are what you need to do when you are specifically picking out a library, that has not been exported by default, and so, if you've never heard those terms, do not worry, don't let that intimidate you.

Just know, that kind of like what we have right here, do you see where we have it where it says, "Export Default class app?"

Well, what this means is that some other file, and in fact, if you want to look at it, it is in our Bootstrap File here, this is what imports app. So, you see how we are exporting, we're saying, "Export default class app here." And then, inside of our Bootstrap File, we're saying, "I want you to import app."

And notice that we do not use the curly brackets, and the reason for that is, because whenever you have an export default, what that means is you could technically call that anything you want. You're just pulling in the file, and you're treating the entire file, like one library, and then you can call it whatever you want.

Whereas, whenever you're using these curly brackets, that would be kind of akin to saying, "I want to simply export the ClassApp, not default." Then you have to be very specific, and you have to put in curly braces, and you have to name it.

So, just in case, because I have had a number of students who got really confused on knowing when to use one versus the other, and I'll always tell you which one to use as we build out the project, but that is what the difference is. It just comes down to if you are importing from something, then use the default keyword. So, that is how you do that.

Sometimes you're gonna notice, that we only import React, other times we're gonna import React, and Component. The difference is when we're wanting to use a Class Component, versus what is called a presentational or a Functional Component. The next guide is gonna be completely on the difference between the two. For right now, we're just gonna act like there's only one kind of component, and that's what we're creating.

So we have this class App that extends component. This is Vanilla Javascript, it's saying, there is this component library, that React has. If you go into the React source code, you would find a class called, Component, and what we're doing is we're saying, "I want you to wrap up all of the behavior, the data, all of those things, that you have inside Component, and I want to use that, I want to use it inside of this ClassApp." That is how object oriented programming works, we're extending the functionality of Component, for our specific app Component right here.

So, that's what we have, there aren't a lot of items you need to have a Component. If you're using a Class-Component, you need to have this render method here, and as you can see, this is a function. So, we're saying, "render" and then we are passing in no arguments, and then, inside of render you have to have a return statement, and this return statement is what returns what is shown on the page.

Just like we saw before, if you update the values here. So, if I said, "Hi there" and hit save. If you come back to chrome, now it says, "Hi there" instead of my name.

So, that is what's getting rendered out on the page, and so when you see that render keyword function, that's what it's doing.

So, let's create our very first Component. I'm going to open this up, and inside the Components Directory here, let's hit, new file, and here, I'm gonna call this portfolio-container. When I'm building out Ruby projects, I use underscores, but when you're building out JavaScript projects, typically you're gonna do dashes. So, portfolio-container.js. You can tell I've been writing a lot of Ruby code lately.

Okay, so we have this container, and inside of here we're gonna create a Component. So, we're going to do exactly what we have right here in our app.js, and then, we're going to be able to call that. Let's start off by importing React comma, and then in curly braces here, I'm gonna also import Component, and then from React, just like that.

portfolio-container.js

import React, { Component } from "react";

Then, inside of here, I'll say, export default, and then, class and we're gonna call this PortfolioContainer, spelled out just like this, and then, I'm gonna say that this extends the Component, and now, inside of here, remember, so far we are kind of following along with our recipe of importing what we need from React, then we're defining the class.

And if you reference back, now what we do is we need to have a render method. If you are using a class-based component, you'll always need to have a render method. So, I'm gonna say, render and then, inside of the render, I'm going to return and you pass return, typically your process is gonna be passing it these kinds of parens.

So, I'm gonna say, return here, and now we can put in, what's gonna look like HTML code, it's actually JavaScript. And there's a specific name for it, it's called JSX, and that is one of the tools you're gonna be using a lot through this course. For right now, you can just think of it as HTML, and we're gonna have a whole guide dedicated to JSX.

It looks a lot like HTML, and as you can tell I can do something like create a div here, and inside of this div, let's give it an h2 tag, and as you can see, so far this looks pretty much just like regular HTML. I'm gonna say, Portfolio items go here... let's close off that h2 tag, and we've hit save.

portfolio-container.js

import React, { Component } from "react";

export default class PortfolioContainer extends Component {
    render() {
        return (
            <div>
                <h2>Portfolio items go here...</h2>
            </div>
        );
    }
}

If you go back to the page, and you can tell, nothing's showing up. Well, the reason for that is, because we have simply defined the class. We've created the Component, but in order to get it showing up on the page, we actually have to call it from wherever we want it to show up.

So, we have our app showing up. So, what we can do is we can actually call this Component, we can import it, and then call it from directly within our application component. So, I'm gonna come down here, and the convention inside of React, and really all of JavaScript is you want to separate your imports, and so, anything that's imported from a library, or from React, then keep those at the top, and then anything else that's imported from your own application, then keep those separated, and keep them together.

Here I can say, import PortfolioContainer from, and now, I can't just say, portfolio-container, and the reason why is if you remember back when we walked through all of the files, I said that when you're importing, and you're importing from a node module. That's when you can just pass in the name of the node module, but if you're importing something that you've created from your own file, then what you need to do is you need to pass in the actual path for that file.

So, here I'm gonna say, ./portfolio-container, hit save here, and now, in between the date and the name here, I'm gonna call this. So, I'm gonna say, PortfolioContainer, and then it's very important, I'm gonna end it with a closing backslash, and then a greater-than sign, and now if I hit save, now let's go back and see. There you go. Now, it is actually showing up.

If you change it and you say, Portfolio items go here updated, hit save. Now you can see that, that is showing up, so, that is how you can create a Component.

Let's just quickly review those steps. We first have to import React, then in this case, because we're creating what's called a class Component, then you have to open Component as well, that goes in curly braces. Then from there, we create, export, and then define a class. So we're giving the name of the class, that extends Component, which means it brings in all of the cool React stuff. That's how our application and all of our components are gonna have access to React.

Then, we need to call a render statement, and then we return some JSX, which looks a lot like HTML, and then from there you call that Component from anywhere else in the application. So, if I were to create three of these, if I were to call three of these and hit save, now you can see that we have three of these.

Hopefully, this starts to give you a little bit of an idea of how powerful the Component based architecture is, because instead of having to just kind of write HTML in your application, and then create all of these different files, and these different views, what you can do is you can encapsulate and think of your application in small chunks, and then you can reuse those in whatever you need.

So, if you want to have a button component. You can create a Component that is as small as a button. If you want a form field, an image component, anything like that. You can create them, and then reuse them just like we did right here.

Resources

• Source Code