How I built the Netflix landing page with React

4 min readApr 6, 2018

Using React 16 and Styled Components.

Preview deployed via Surge at https://netflix-lp-clone.surge.sh

You can skip the article and go straight to the Github repo here :)

In this article I’ll summarize the ideas, methods and techniques I used re-creating the Netflix landing page with React 16 and Styled Components.

Why Netflix?

I’m a huge fan of the Netflix Tech Blog here on Medium. Their content never ceases to amaze me, from it’s data visualization tools, to it’s AI and machine learning algorithms ensuring a personalized experience for each user. I am in awe of the Netflix web app whenever I am consuming video on it.

The Component Age

Over the last couple of years we’ve gone from HTML documents to rich and reactive applications that live on the web. As web applications and user experiences get more complex and grow larger in scale an interesting question arises. How do you scale the UI/ UX of an application built by a large amount of developers working on it at the same time?

So we enter the idea of single encapsulated, reusable components and containers. Kind of like Lego. I like to think of components as Lego blocks, and you build an entire set by combining a bunch of new and old pieces together.

We have a single App container, this sort of encapsulates our <Header /> <Features /> and<Footer /> components. Each one of those components is made up of smaller components, some of those elements are duplicated but most of them have unique styling and functionality.

Styling

The road to styled-components

I love the component logic in React, the idea behind styled-components is to remove the mapping between styles and components. Styled-components allowed me to encapsulate my styling(CSS) specifically into that component on the same JSX file. It is incredibly powerful, as an example here’s how I used it to style the Nav bar on this page.

Nav.jsx

My usual workflow included the CSS pre-processor SCSS via gulp. This project was bootstrapped with Create React App, and I’m not a big fan of ejecting it just for the purpose of writing my styling in SCSS. I found that to a large extent we can write SASS like code in our styled-component logic. Another reason why it became exciting to use in this project.

const JoinButton4 = styled.button`
  background-color: #e50914;
  cursor: pointer;
  text-decoration: none;    
  vertical-align: middle;    
  font-family: Arial, sans-serif;    
  border-radius: 2px;    
  user-select: none;    
  text-align: center;    
  border: 0;    
  &:hover {        
      background-color: #E53935;    
  }    
  ${props => props.narrow && css` 
      flex: none;
  `} 
`;

Using SVG Icons

You can include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Functionality

State Management

One of the more trickier parts of this app was the change of content and SVG icons on different devices and screen widths. In the Features section and I rendered different content and managed the state of that content by encapsulating components in wrappers that would toggle between 1 out of the 3 sections depending on which tab the user clicked on. By default it would always show the no-commitments tab.

The Features section — No Commitments tab

Changing the Layout on Mobile

Media queries proved useful. However, for this app I needed more than just a few media queries. I needed an entirely different layout for mobile devices.

To get around this in Features.jsx the render function is simply a function of state, and I used an event listener to update the state.