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
- Create a new directory inside
src/components
and call itAppLayout
- Create an
AppLayout.js
and anAppLayout.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.
- Create a
__tests__
directory insidecomponents/AppLayout
- 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.
Follow @productioncoderPlease 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.
Recent Comments