Eirik L. Vullum 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)

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.

	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;

	.App {
	text-align: center;
	}

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

	.App-header {

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

	render() {
	return (

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

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

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

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

	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/

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