eiriklv

Concepts

• Base primitives:

  • state
  • computed
  • effect

• Higher level primitives:

  • async / resource (non-cached)

• query / mutation (cached)

eiriklv

eiriklv

import { History, Location } from "history";
import { MatchResult } from "path-to-regexp";
import { ReactElement, useContext, useEffect, useState } from "react";
import React from "react";
import { getPathMatch } from "./utils/routing";

export interface RouterContextInterface {
  history?: History;
  location?: Location;
  basePath: string;

eiriklv

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 10vmin;
}

.App-header {

eiriklv

React Conventions

• Method ordering
• PropTypes + DefaultProps
• Destructuring from props and state (intent)
• Avoid instance methods (only for things that matters to React)
• Components > render methods (renderElements/renderItems/etc)
• Pure render function (no window or Math.random())
• Containers (connected) vs. Presentational Components (pure)

eiriklv

/**
 * Instance method anti pattern
 */
class MyComponent extends React.Component {
  computeThatThing() {
    return this.props.a + this.props.b;
  }

  render() {
    return (

eiriklv

/**
 * Dependencies
 */
const spawn = require('cross-spawn');

/**
 * Package.json
 */
const packageJson = require('../package.json');

eiriklv

/**
 * Dependencies
 */
const express = require('express');
const history = require('connect-history-api-fallback');

/**
 * Environment / configuration
 */
const port = process.env.PORT || 3000;

eiriklv

1. Basic Syntax
   - http://jsbin.com/kixovom/
2. Types and Literals
   - http://jsbin.com/bagofoc/
3. Truth and Equality
   - http://jsbin.com/feyepub/
4. Functions
   - http://jsbin.com/tuzezip/
5. Objects
   - http://jsbin.com/qukaqig/

eiriklv

import { HTTPFetchNetworkInterface, printAST } from 'apollo-client';


/**
 * Serialize a object to a query string
 * @source https://stackoverflow.com/questions/1714786/query-string-encoding-of-a-javascript-object#comment47677757_18116302
 */
function serialize( obj ) {
    return `?` + Object.keys(obj).map(k => k + `=` + encodeURIComponent(obj[k])).join(`&`);
}