React Routing and Gatsby


How do you create separate pages in a react app?


  • Should I use React Router?
  • Create multiple pages and embed react into them?
  • Use Gatsby or Next.js?
  • Next.js tutorial
  • What's the difference between client side rendering vs. server-side rendering?

Learnings / Decisions

  • Gatsby is a static site generator
  • Use Gatsby for smaller projects and less pages. So that each time you build the app, you don't have to wait for all of the pages to get built.
  • Gatsby also uses GraphQL, and can use Contentful, MongoDB for its CMS data.
  • Why you should be using Gatsby
  • Gatsby in 5 hours
  • Gatsby tutorial

Deciding to timebox Gatsby tutorial for a day and see how quickly I can get set up.


To create a new Gatsby site

  • Create new pages under src/pages/*.js

Linking to pages

import {Link } from "gatsby"

<Link to="/">Home</Link>

CSS Modules

  • Limits scope of CSS
  • Requires importing
  • Classes are custom and generated from the module name and the class name
  • styles is a user defined variable during import and is used when applying the class in the compontent: ie. styles.user
import React from "react"
import Container from "../components/container"
import styles from "./about-css-modules.module.css"


const User = props => (
  <div className={styles.user}>
    <img src={props.avatar} className={styles.avatar} alt="" />
    <div className={styles.description}>
      <h2 className={styles.username}>{props.username}</h2>
      <p className={styles.excerpt}>{props.excerpt}</p>

export default function About() {
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
        username="Jane Doe"
        excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        username="Bob Smith"
        excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."

Multiple classNames per element

  • Seems way more complicated than it needs to be. via
<div className={`${} ${}`}>

<div className={[,].join(' ')}>

<div className={classNames({[]: true, []: true})}>

Also learning that backticks have different syntax function than single quotes. via

Plugins and Layouts

  • Layouts are components that get reused and aren't standalone pages
  • Using <Link> inside a layout component is how you can quickly create a navigation
  • Installed Typography.js

Data and GraphQL

How to GraphQL - The Fullstack Tutorial for GraphQL
Fullstack GraphQL Tutorial to go from zero to production covering all basics and advanced concepts.


A Unified Styling Language
In the past few years we’ve seen the rise of CSS-in-JS, emerging primarily from within the React community—but why?