Home Page + Layout + CSS-in-JS (Emotion-JS) — Part #3 of 11
This post has been updated on August 13th, 2021! 🎉 We’ve updated the usage of React from v16.9.0 to v17.0.2, React-Redux from v6.0.0 to v7.2.4, and ReactiveSearch from 3.0.0-rc to 3.22.0.
This is the 3rd post for Movies store, the React & Redux E-commerce app tutorial series created by Appbase. The final result of following this series is your own feature-rich, scalable movies store built with React and Redux!
In this post, we’ll teach you how to create the home page & set up the CSS in React components.
Table of Contents
- Getting Started with React and Next.JS
- Basics of React
- Home Page + Layout + CSS-in-JS (Emotion.JS) (⇒ You’re here!)
- Basics of Redux
- Appbase.io + ReactiveSearch UI Components
- Building The Search Page
- Authentication with Auth0
- Product Page + Checkout Page + Payment with Stripe
- Analytics with Appbase.io
- Deployment with Heroku
OR
Deployment with Vercel - PWA (Progressive Web App) compatibility
We’ll be talking about these topics:
- Setup
ant-design - Use
emotion-JSto achieve CSS-in-JS. - Create a page layout
- Create the Home Page UI
Getting Started
Step1: Ant design setup
First, let’s add a component library to our project. A component library offers a lot of features like:
- Ready to use out of the box components
- Consistent design throughout the app
- Customization & flexibility
- Mobile responsive layout
- Focus more on business logic by saving time on UI
We’re going to use A
nt-design, one of the most popular component libraries for React.
Installation
yarn add antdAdd a .babelrc file at the root with the following configuration:
Note: Next.js comes with a default babel configuration, although you can override it by adding a custom .babelrc at the root.
Use babel-plugin-import (recommended). This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
Learn more about how to configure a .babelrc file.
Transpiling CSS modules with next.config.js
Here are the code highlights:
- We’ll be using @zeit/next-css package which allows us to import the
.cssfiles in our code. As per their docs, the stylesheet is compiled to.next/static/css. Next.js will automatically add the CSS file to the HTML. In production, a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed. - We’re using one more plugin named next-transpile-modules to transpile the untranspiled modules from
node_modules, for exampleantd.
Basic Usage
Let’s render a Button component from Ant design by using ReactDom.
import { Button } from 'antd';
ReactDOM.render(<Button />, mountNode);Step2: CSS-in-JS
We’re using CSS-in-JS for styling our components, it abstracts the CSS model to the component level, rather than the document level (modularity).
Emotion is a high performance, lightweight CSS-in-JS library.
According to the docs:
Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
Installation
Install the necessary packages:
yarn add @emotion/babel-preset-css-prop @emotion/core @emotion/styled emotion emotion-serverWe will need to extract and inject styles properly by creating a file named _document.js in the pages folder with the following content:
Note: Pages in Next.js skip the definition of the surrounding document’s markup. For example, you never include
<html>,<body>, etc. To override that default behavior, you must create a file at./pages/_document.js, where you can extend the Document class.
Keep reading the post to see how we’re using Emotion to style our components.
Step3: Create a page layout
We have the Ant design & Emotion setup ready, let’s create some components to build our page layout.
First, create a dedicated folder for React components named as components at the root. We’re going to add some more abstraction by creating a Layout folder under the components directory to add layout related components.
We’re going to create a wrapper component by using the concept of React Composition, this component can be used in all pages to accomplish a set of common tasks. In React, composition allows you to have some pretty cool advantages. You create small and lean components and use them to compose more functionality on top of them.
Let’s add our first component by creating a file Container.js with the following content under components/Layout directory.
Let’s summarize the code:
- We have created a functional component that takes two props children & title, the children property allows you to inject components inside other components.
- We are using Head component from Next.js, to set the header properties of pages.
For example, title prop is being used to set the title of the page with default value as Movies Store. - We’re using the Layout component from Ant design, to handle the layout of the overall page. To know more details, check the docs.
- We’re using css from @emotion/core to define the styling of our container component.
Create a Header Component
Let’s add some UI to our page by creating a common Header component in all pages.
We’re going to put Header related components in a new folder called Header under Layout folder, let’s populate components/Layout/Header/index.js with the following content.
Highlights of the code:
- We split the nav bar into two components, LeftMenu & RightMenu which have the left & right menu content respectively.
- You can see that we’re rendering a logo & using the Next.js Link for the transition.
Note: As we know that Next.js works with the directory structure so all the assets must be kept in a static folder.
- Since we’re building a mobile responsive app, so the header must be responsive too, We’re using the Drawer component from Ant Design to display a vertical menu on mobile screens.
- We have separated out the styling in a different file at styles.js, Let’s see how we’re using the EmotionJS to create a mobile responsive navbar.
Let’s create our LeftMenu component with the help of Menu component from Ant Design.
We also need to create a RightMenu component in the same way.
You can see that the RightMenu component takes a mode prop to decide whether to render a vertical or horizontal menu, We’ve framed our CSS in a way that the Drawer component will only be visible on the mobile devices, we need to render a vertical menu on mobile devices so we’re passing the mode prop value as vertical in RightMenu component under the Drawer component.
Create the Content Component
Again, we’re going to use the React composition to create our Content component to render the page content.
Create a Footer Component
Let’s add a Footer component to our layout components by using the following code:
This component will be integrated with Container component to display the message at the bottom of the page.
Step4: Building HomePage
Finally, we’re done with all the base setup & our layout components are waiting to be used.
Let’s put these things together to build our home page at pages/index.js.
You can check that we’re using Container component at the top level to wrap all the child components, & using Header component to render a mobile responsive navbar for page transitions.
We are rendering the movie banner UI under the Content component, & finally using the Footer component at the end to render a footer.
In this tutorial post, we learned how to set-up Ant design & EmotionJS in a Next.js project, we also created the layout components & use them together to build the HomePage.
In the next tutorial, we will discuss Redux to learn how to create and manage a centralized application state with the help of flux architecture. Subscribe here and stay tuned!
While the tutorial in its entirety is free and includes step-by-step instructions on how to build the app, it doesn’t include the original stylesheets and a few other intricate details about the app. You can get the whole movie store app codebase (along with updates and support for the next 6 months) for $99 only (valid for a limited time).
