Basics

Quick Start

 $ npx gatsby new 2019-gatsby-site //Create a new site.
 $ cd 2019-gatsby-site
 $ npx gatsby develop // start development server.

snippet plugin

• rcc react class base component
• rafc react arrow function component

Implement a Error Page. 404.js (File not found)

Gatstby Link component Do not do full page refresh (internal navigation) Under the hood use React Router. BrowserRouter from React

Navbar

Location: src/components

Navbar.js

Layout component

Avoiding useless divs

<>
  <Link>...
</>

import Navbar component then use children argument in the component, and then wrapping in the layout ( similar to yield)

CSS

• big file size
• name collisions (scoped)

CSS modules

import particular css file (ex. components/blog.module.css) as style variable name, and then apply a className to an html object scopping the style class ex className={{style.myCSSclass}}

Boostrap importing bootstrap css, simply import it on Layout.js component.

$ npm install boostrap

#Layout.js
import 'boostrap/dist/css/boostrap.min.css

SASS

E-comerce

$npm install gatsby-plugin-stripe

add the StripeJS plugin to gatsby-config.js

Intermediate Gatsby notes

yarn spaces

Yarn Workspaces is a feature that allows users to install dependencies from multiple package.json files in subfolders of a single root package.json file, all in one go.

Making Workspaces native to Yarn enables faster, lighter installation by preventing package duplication across Workspaces. Yarn can also create symlinks between Workspaces that depend on each other, and will ensure the consistency and correctness of all directories.

gatsby themes

Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. You can think of Gatsby themes as separate Gatsby sites that can be put together and allow you to split up a larger Gatsby project!

prefixing with gatsby-theme is important

mkdir packages
mkdir gatsby-theme-docs
cd packages/gatsby-theme-docs
yarn init -y