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.

How to GraphQLHow to GraphQL

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?

Mark DalgleishSEEK blog