7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Basic App Component Structure

These days, I like to modify my component structure a bit and not export defaults. In this lesson, I will take you through the component structure I like to use while building React applications. We will also create the basic application structure that we’ll be working with for the rest of the course.

2.1 Basic App Component Structure

The first thing that I wanna do is start to introduce the very basic concepts of React hooks. Now, React hooks, there's some functionality differences in the way that it handles things like state, and the component will load or did load or didn't render and all those types of things. But really the one of the basic fundamental concepts or paradigm shifts is really when it comes to creating a component. As you can see here, we have a function App, which is kind of our first component that we're dealing with, and as you can see here, it's written as a function. Now, in the earlier days of React, you could create components in two basic different ways. You could use, or basically create them as functions as done here. Or you could create them as classes that were extending the React.component class, and you can still do both of those things today. But as far as hooks are concerned, there's a shift going more towards staying in the world of functional components or functions instead of classes. Now, you could do both before but with classes if you wanted to do things like you state or, setState or things like that, those were all built into the base component class that you extended from your custom-component class. Well now, using hooks you can take advantage of state and different lifecycle events of your component in a different way, and we'll get to those things. But the first thing that I wanna do is start to adjust the way that this app component looks, so that you can see the way that I like to build my functional components and how we're gonna build them going forward. So as you can see here, this is kind of a typical paradigm that you'll see. We've defined a function here called App. It returns what looks to be some HTML inside, which is actually referred to as JSX, which is kind of like an HTML markup that's returned from your JavaScript, but it's a little bit more specialized than that, and then we export default app. Well, these days when I'm creating React apps, especially these functional ones, I don't really like to export the default. It's really just kind of a thing that I've kinda gotten into, where I'm not exporting defaults anymore. I'm explicitly exporting things, specifically my components, so that I'm referring to them by name in anything that is importing them later on, and you'll see that as we go. So what I wanna do now is I'm gonna show you how I typically define these things, so I'm going to change this just a little bit. I'm going to say export const and then I'm going to export this App function, but I'm gonna use a little bit more of a different syntax here I suppose, a little bit more up-to-date syntax. So we're defining this as a function and we're exporting the cons to app and so I can get rid of this line as well, so we can go and save that. We can come back to our application here in Google Chrome, and you're gonna see that we attempted and import air.app does not contain a default export. So as you can see, that's a little bit of a problem because we're not exporting default anymore in whatever is referring to this or importing it, which is indexed JS. So let's go ahead and take a look at that, so as you can see here, we're importing App from this module right here. Well, the reason that this isn't working is because of how we are trying to import this. When you export default, you can basically call this anything that you want, and it's just going to take whatever the default export is and it's gonna assign it to that, but I don't wanna do that anymore. Now I'm explicitly exporting these things, so in order to explicitly export them, I need to explicitly import them using these curly brackets like that, so let's go ahead and save that change. Now if I come back to Google Chrome, it reloads, so if you see me creating these components this way, which is how I'm gonna be doing this the entire course. I'm gonna be creating them and exporting them explicitly like this, so we can go forward, so that's the first thing. Now the next thing that I wanna do is I wanna create a very basic shell of our application that you're gonna see when you first go to our app, and I don't wanna just have, hello guestbook. So, let's go ahead and modify this just a little bit, so we have our root container right here. Let's get rid of this guest book business, and I wanna add in a couple of different things here. So I am gonna have an H1, so let's add that in and I'll just say something like, please sign my guestbook and so you could reuse this guest book at all different types of events. They could be happy or sad. This could be for weddings, or birthdays or funerals or whatever have you. Anytime you really need a way for people to sign in and give you some information about them, who they are, their address or phone number in case you want to send thank yous, or call them to follow up or anything like that. We wanna be able to allow our guests to sign and give us all that information so that we can reach out to them in the future if we need to. So let's go ahead and add a little bit more in here. We're going to add another div, and we're gonna give this a class name of row. And you're going to notice if you're using something like Visual Studio Code and you start to do things like this where you can see that it's going to create this div and assign a class for you. A lot of times, it's smart enough to know like I'm in a React app, and I'm gonna assign class name, not just class of row. So that's a nice little gotcha there that you can pay attention to and take advantage of. And now within this row, I'm gonna create a couple of columns, so I'm gonna create another one here, another div that's gonna be a column. And then within here, this is where I'm going to put some information, so I wanna be able to say, I want to have my guests sign in right here. So on this side of the page, I'm gonna see you can sign in here. That's gonna be the sign in section, and then down below that we'll create another div that's gonna be a column. And I'm just gonna have these equally dispersed, so that's why I'm not giving any other information about that column. By using the default col COL className, Bootstrap is basically going to equally divide both of these columns within that row. And then within this one, I'm going to list then my guests, so I'll put a list of guests here, so let's go ahead and save that. So now that we've made those changes, we can come back over and nothing too crazy, nothing really exciting, but at least now we're able to split our screen so that I can put in a sign in form, a mechanism to allow people to sign in over here. And then on the right-hand side, I will put in a list of my guests including their information, their name, their address with a little bit of formatting, and things like that. So now we have the basic structure of our main app, and we've talked a little bit about React's hooks involving functions, creating these functional components and how I'm gonna be exporting by name these components out. And then how you import them in other components as well, or other modules within your application using the curly brace syntax. Now, let's go ahead and start to talk a little bit more about some of the other components we're gonna be building.

Back to the top