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.
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.
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
- Create a new directory inside
src/componentsand call it
- Create an
AppLayout.scssfile 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
$header-nav-height (already specified in
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
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
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.
- Create a
- Create a
AppLayout.unit.test.jsfile 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.Follow @productioncoder
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.