FREELessons: 14Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Writing the Application Component

For every project, there's a single component that encapsulates the entire application—the application component. We'll create it in this lesson. We'll also discuss project organization.

3.1 Writing the Application Component

In this lesson, we are going to finally start building our hang man application. And we will begin with the component that is going to encapsulate everything about the application. It's typically what I call the application component and it is usually just referred to as App. And in fact, whenever we created our project, there was an App component we just look at it because well we deleted it. But whenever you look at other people's applications, that's what you are typically going to see. So if we change the name of our component to App, then that would be normal. Now, the reason why we have a component that encapsulates everything is very simple, because remember that the way that we represent our components is XML. And the only way that we can do that as following XML rules, so our application is going to have a hierarchy very similar to an XML document. So we will have our application, it might have its own little global functionality that it needs to do. And then from there on out, there's going to be other components that are responsible for their own functionality. I'm getting ahead of myself, but for right now. [LAUGH] We want this App component, and I can't think of any data that it might need. So we are going to have any props being passed to it right now, and we are going to start with just some content, like hello or welcome to Hangman. And of course we view this in the browser we're going to see our updated text, so yeah. But let's also have some content like a paragraph that then says do you want to play a game? Now, visual studio code is giving us a red squiggly here and that means that there's something wrong and there is. If we go and look at the browser, we can see that it failed to compile and that's because adjacent JSX elements must be wrapped in an enclosing tag. So remember that I said that's the hierarchy of our application is pretty much determined by the fact that we are using XML. Well, all of the components all of the markup that we use has to follow XML rules as well. So here we are returning essentially two components and we can't do that, we can only return a single component. And that single component can then contain the components that we need, so what can we do? Well we can just simply wrap it within a div, so let's do that, we'll have our opening div tag then we will have our closing div tag. And let's also format this just a little bit, so there we go if we go back to the browser refresh then we are going to see that it works voila that's fantastic. But I don't protect particularly like this formatting, so let's do this. We are going to put div on its own line and then we will have our markup. Now once again, Visual Studio is giving us some cues, because if you noticed the XML or the markup here kind of dimmed whenever I moved that opening tag to the next line. If I put it back on the same line as return, it kind of lightens up. And the reason is very simple because remember that JavaScript has the feature of semicolon insertion. So because there is a carriage return after return, it is inserting that semicolon and so it's simply just returning nothing. So what you will typically see is an open parentheses immediately following the return statement, and then the markup would be inside of the parentheses. This gives us the flexibility of formatting our markup, however we need t, even if we have just a single element, like if we go back to a single p element here. We could put it all on one line, and there's nothing wrong with that, however it's just good practice to get into including the parentheses. So in most applications, you're going to see the return statement of a component, use a pair of parentheses. And then inside of the parentheses will be the markup for that component, even if it's just a simple single line. Like that, but we don't want that, we want our div element, so there we go. We of course can go back to the browser refresh, there we go. I mistakenly cut that out and voila, we have our content. So that's great, we are of course returning just a single components. But inside of that, we have other components that are providing some other content. Now there's one other thing that I want to do and that is take out our App component, because we don't want to muddy up our index file. This is what is going to essentially bootstrap our application, we want to only the code necessary for this working. You can make the argument that the App component needs to be here and yes it does. But that doesn't necessarily mean that we have to put it directly inside of this file. Instead we could put it inside of an external file and then import that, that way our application code is nice and organized. And especially since we are starting to build our application, that's what I want to do. So I'm gonna cut out our App function and inside of the source folder, I'm just going to create a new file, we'll call it app.js. And we need to export defaults and then function App and there we go. So now we can import this file and we would do it just like this to where we are going to import App from. And then of course, we went to specify our App file and with that simple change everything is going to work just fine. So if we refresh of course we see the same thing just to prove what it is supposed to do. Let's change the h1 element, let's change it to an h5, that's going to be too small, but it will at least give us something and we can see that it automatically changed for us. So let's change that back to h1, we'll save it to go back. Now notice that I'm not refreshing the page now that we are starting to include other files. The build environment is watching the files of our application and it is going to recompile what has changed and then automatically load it. There will be times that we will need to refresh the page, but for the most part will be okay. All right, so we now have our application component this is going to contain the entire application. Right now it is returning a div component, but it contains other content. And we are wrapping our content with a pair of parentheses just so that we can format the mark-up however we need to. We placed that component inside of an external file so that we could then import it and then use that to whenever we render our application. So in the next lesson, we are going to build another component, will start building the game board.

Back to the top