Build Youtube in React 09: App Layout

1 Youtube Watch component overview

Now that we finished the Home feed markup, we can think about adding the next major component. We want a component that allows us to actually watch a video.  But before that, we have to do a little bit of preparation work. Let’s have a look at how our video watching component which we’ll call Watch component, will look like:

Click on the image to see it in high resolution.

The Watch component will be one of the major components in our app. You certainly noticed that it contains the very same top navigation bar that we have in our Home feed component. When browsing Youtube, you will notice that this top navigation bar is on pretty much every site. So it might make sense to create a component that renders the top nav per default and then places an arbitrary component (e.g. Home or Watch) below it.

Well and then there’s something else… 😁 We need routing so that we can actually navigate to our Watch component. But first things first.

2 Youtube AppLayout component

2.1. Designing the AppLayout component

Let’s first create a component that places the top navigation bar above each component. Since this component will not fetch anything from an API or contain state, we put it into src/components 

1. Create a new directory inside src/components and call it AppLayout
2. Create an AppLayout.js and an AppLayout.scss file inside the directory you have just created

The component’s markup is quite straight forward:

This component will create a .app-layout div, render the HeaderNav component and all children that are wrapped inside it.

Let’s take a look at the SCSS. The first rule basically says: every direct descendant of .app-layout except the first child will have a margin-top of $header-nav-height (already specified in src/styles/shared.scss).

We’re also adding a little bit of cosmetics to the scroll bar that Chrome renders to make it a little bit slimmer.

If you look at the markup, you see that the first element is our fixed and sticky HeaderNav. So all elements that are not the HeaderNav will be placed directly underneath our top nav bar.

2.2. Using AppLayout in App.js

Currently our App component file looks like this:

Let’s make use of our AppLayout component which will be responsible for rendering the top navigation bar. Note that we move the rendering of the side bar inside Home. That is because not all components will show the side bar. For example our Watch component will not show it.

Have a look at the result in your browser. The app should look just like before. We’ve basically done just a little bit of refactoring. But we don’t have to worry about the layout of our top navigation bar anymore. In addition, this refactoring will be quite handy once we add navigation. You’ll soon see why.

Don’t forget to delete the top margin we’ve set in our Home.scss file before. We don’t need that any more. The AppLayout component will make sure that our component gets the appropriate top margin. However, since we are still showing the side bar, we still need the the margin on the left. So please update your Home.scss file so that it looks like this:

Nice work. Click on the image to see it in high resolution.

2.3. Testing AppLayout.js

Our AppLayout component is quite simple but also crucial to the overall application. It is responsible for the correct rendering of important components. Therefore, let’s add a few snapshot tests.

1. Create a __tests__ directory inside components/AppLayout
2. Create a AppLayout.unit.test.js file in the directory you just created

We test the three base cases: no children, one child and multiple children. In the last case, the second child <div> contains further items to make sure that nested children are rendered as well.

3 Wrap Up

Ok that’s it: we’re now ready to add a component, where we can watch videos. For that we’ll need routing. We’re going to set this up in the next tutorial.

You can find the project’s code on our Github repository.

Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.

If you are interested in more high-quality production-ready content, please enter your email below.