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?
