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

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.

CSS in JS

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?