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 …”

ES6 Arrow functions

Updated: 11 December 2022

In regular functions the this keyword represented the object that called the function.

With arrow functions, the this keyword always represents the object that defined the arrow function.

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.

JavaScript Modules

Updated: 13 December 2022

ECMA: European Computer Manufacturers Association.

ECMAScript was created to standardize JavaScript. ES6 is the 6th version of ECMAScript, published in 2015.

Synonyms:
ES2015
ECMAScript 2015
ECMAScript 6
ES6
ES 6th Edition

ES Module / ES6 Module / ‘JavaScript modules’ syntax

import
export

CommonJS Module syntax

require
exports

ES6 modules are only practical from Node.js v10 onwards (released in April 2018). All mainstream browsers and Node.js from mid 2018 support ES6 modules.

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/