skip to Main Content

WordFlix – Single Page App tutorial: Step 3 – Home Page Styled Components

Post Series: WordFlix – Super Powered Single Page App Tutorial

Step 3 – Starting Point

If you followed the previous steps of the tutorial, you should be able to continue here, but if you’re just jumping in or got lost in the last steps or just want to skip ahead, you can either check-out this branch of the Github repo or change directories to the “2” theme (wp-content/themes/2)

Create new HomePage Component

In our /app/src/index.js file, let’s create a HomePage component.

Below our imports, let’s add this:

class HomePage extends Component {
  render() {
    return(
      <div>
        <h1>WordFlix</h1>
        <h2>Your favorite super-powered Single Page App for browsing Super Hero Movies!</h2>
        <a href="#0">Explore Films</a>
      </div>
    )
  }
}

This creates a new HomePage component which renders a <div> with an <h1>, <h2> and <a> inside of it.

One thing to note, is that React components must render one root element, but that root element may contain any number of nested element, which is why we returned a single <div> element, with other elements nested inside.

Next, let’s replace the return statement of our App component like so:

class App extends Component {
  render() {
    return(
      <HomePage />
    )
  }
}

Now, when our App renders, it will simply render our HomePage component. Neat!

You can see the diff here.

Next, we’ll add some fonts and an external stylesheet.

Add Fonts and style.css

In this step, we’re adding some fonts that we’ll be using and we’ll import them in our stylesheet.

You can download the fonts here.

NOTE: These fonts were provided for use at the 2017 WordCamp Orange County conference, so if you plan to use these fonts for anything other than learning with this tutorial, make sure you check to see if the Font’s licensing allow for usage in your specific project.

Add the fonts to the fonts to the “/app/src/styles/fonts” directory.

Then, create a style.css file at “/app/src/styles/style.css” and add the following:

@import 'fonts/anime_ace_2/stylesheet.css';
@import 'fonts/avengeance_mightiest_avengeRg/stylesheet.css';
@import 'fonts/TT Firs Medium/TTFirs-ExtraBoldItalic.css';

This imports the fonts to our stylesheet so we can use the fonts in our App. However, we haven’t made this stylesheet known to our App, so let’s do that next.

Import Styles

The Create React App build system allows for CSS files to be imported to our javascript files, and the build process will compile the CSS into static files (which our inc/setup.php file enqueues to our WordPress theme).

To add the stylesheet we just created, add the following lines to your index.js file:

import 'antd/dist/antd.css';
import './styles/style.css';

This adds our new style.css file, which imports our fonts, and we also import another external stylesheet from the Ant Design component library, as we will make use of some Ant Design components throughout the tutorial.

NOTE: This imports the entire Ant Design CSS, which is overkill for our needs. . .I would recommend only importing the parts that you actually need, but this is fast to get up and running.

Create our first Styled Component

Styled Components is a fantastic NPM package that allows React components to be created with the FULL power of CSS, plus some extra features that CSS can’t do (yet) such as nested selectors and variables in CSS.

Let’s create our first Styled component.

In our “/app/src/index.js” file, let’s add this import at the top with our other imports:

import styled from 'styled-components';

Then, above our HomePage component, let’s create a new styled component:

/**
 * Create a wrapper div that will be used as the container for the page
 */
const Home = styled.div`
  height:100vh;
  background:black;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  >section{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }
`;

If you’re familiar with CSS at all, this should be pretty simple to follow. All but 2 lines of code are straight up CSS!

We create a new React component called Home, which is a div with the defined styles applied to it. We can even use nested selectors (although I wouldn’t go crazy with them).

Add the styled component to the App

Update the HomePage component like so:

class HomePage extends Component {
  render() {
    return(
      <Home>
        <h1>WordFlix</h1>
        <h2>Your favorite super-powered Single Page App for browsing Super Hero Movies!</h2>
        <a href="#0">Explore Films</a>
      </Home>
    )
  }
}

Now, the contents of our HomePage are wrapped with our <Home> styled component.

If you’re not still running your local server, you can run “npm start” to open your localhost:3000 server running the app, and you can play with the styled component styles and you’ll see the changes update live. Give it a shot, change the background color or something.

The full power of CSS is at your disposal though, so get creative and play around making things different colors or whatever.

Create more Styled Components

Now that we’ve seen how easy it is to create Styled Components, let’s create a few more for the homepage.

/**
 * Component that styles the homepage title
 */
const HomeTitle = styled.h1`
  font-family: avengeance_mightiest_avengeRg;
  font-size: 72px;
  line-height: 90px;
`;

/**
 * Component that styles the homepage description
 */
const Description = styled.div`
  font-family: TTFirsMedium;
  font-size: 45px;
  line-height: 50px;
  padding: 30px;
  max-width:750px;
  text-align:center;
  margin-bottom:40px;
`;

/**
 * Component that styles the "Explore" button
 */
const ExploreButton = styled.span`
  background:#ad0000;
  color:white;
  border-radius:25px;
  text-align:center;
  font-size: 25px;
  line-height: 40px;
  padding: 10px 20px;
  font-family:TTFirsMedium;
  &:hover{
    background:#0087be;
  }
`;

Then let’s add these to our HomePage Component like so:

class HomePage extends Component {
  render() {
    return(
      <Home>
        <section>
          <HomeTitle>WordFlix</HomeTitle>
          <Description>Your favorite super-powered Single Page App for browsing Super Hero Movies!</Description>
          <Link to="/movies">
            <ExploreButton>Explore Films</ExploreButton>
          </Link>
        </section>
      </Home>
    )
  }
}

At this point, we should have a homepage that looks like this:

Move HomePage component to it’s own file

We’ve started to clutter up the index.js, so let’s move our HomePage to it’s own file.

Let’s remove all the styled components we created, the HomePage component, and the imports for “styled-components” and “react-router” and move them to a new “/src/components/HomePage.js” file.

Then, import the HomePage component into the “index.js” file like so:

import HomePage from './components/HomePage';

At this point, things should be working the same, we just have a little better organization of our files.

You can see the changes made for this step here.

Leave a Reply

Share This
Back To Top