Gatsby

Updated: 11 November 2023

https://www.gatsbyjs.com/docs/tutorial/getting-started

  • A page (React) Component contains all the UI elements for a specific page of a site.
  • Gatsby automatically creates pages for React components that are the default export of files in the src/pages directory.
  • A Gatsby plugin adds additional features to a Gatsby site. It is a standalone npm package.
  • Gatsby plugin library https://www.gatsbyjs.com/plugins

Data Layer

  • Source plugins pull data from their original location into the Gatsby GraphQL data layer.
  • Use the GraphiQL endpoint (localhost:8000/___graphql) to explore data in the data layer and design GraphQL queries.
  • Write GraphQL queries to pull data out of the data layer and into React components.
  • To pull data into a “building block” component, use the useStaticQuery hook.
  • To pull data into a page component, use a page query.

React

Updated: 06 November 2023

  • React is a JS lib used to create user interfaces. With React the UI is broken up into small re-usable pieces called Components.
  • Components can be created from other from other Components – a pattern is called composition.
  • A React component is a function that returns a React element.
  • A React element (written as JSX) is an object that React uses to render DOM elements.

State and Props

Updated: 11 December 2022

“State is like props, but private and only controlled by the component …”

jQuery plugins

Updated: 10 September 2022

The javascript in a jQuery plugin like Bootstrap expects there to be a global jQuery variable that it can modify, for example by adding a tooltip() method.

D3

Updated: 16 September 2021

Bind data to all p elements in the DOM, even if they don’t exist yet.

    d3.select("body") // Find body, pass reference to next step in chain.
        .selectAll("p") // Selects all p in DOM. Returns empty selection. 
        .data(mydata) // Parse and count data. Following methods called n times.
        .enter() // Creates n new placeholder elements apparently.
        .append("p") // Swap placeholder for p element.
        .text("Hello World"); // Insert text value to p.

https://bost.ocks.org/mike/join/