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(`&`);
}

eiriklv

ES6 Classes

ES2015 has introduced the concept of "classes" in JavaScript.

But be aware - JavaScript classes are just syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript.

JavaScript classes provides simpler and clearer syntax to create objects and deal with inheritance (proceed with caution.. inheritance vs. composition = specialization vs. sharing behavior).

The existing model of prototypal inheritance in JavaScript is based on a special kind of function and the new keyword, which really just alters how the function behaves regarding what it returns and how it sets up the prototype chain.