Programming

React Routing and Gatsby

Weekend Serious

Jul 24, 2020 • 3 min read

Goal

How do you create separate pages in a react app?

Questions

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.

Notes

To create a new Gatsby site

gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

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"

console.log(styles)

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>
    </div>
  </div>
)

export default function About() {
  return(
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
      <User
        username="Jane Doe"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
        excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
      <User
        username="Bob Smith"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
        excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
      />
    </Container>
  )
}

Multiple classNames per element

Seems way more complicated than it needs to be. via

<div className={`${styles.foo} ${styles.bar}`}>

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

<div className={classNames({[styles.foo]: true, [styles.bar]: 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