Skip to content

Instantly share code, notes, and snippets.

View eiriklv's full-sized avatar

Eirik L. Vullum eiriklv

View GitHub Profile
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@eiriklv
eiriklv / Router.tsx
Created April 15, 2023 00:24
React router
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
eiriklv / App.css
Last active October 27, 2018 14:44
Idiomatic React and Redux
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 10vmin;
}
.App-header {
@eiriklv
eiriklv / conventions.md
Created September 20, 2018 06:55
Component class conventions

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
eiriklv / a.js
Last active September 20, 2018 07:23
Instance method anti-pattern
/**
* Instance method anti pattern
*/
class MyComponent extends React.Component {
computeThatThing() {
return this.props.a + this.props.b;
}
render() {
return (
@eiriklv
eiriklv / build.js
Last active April 26, 2018 13:30
Tommy
/**
* Dependencies
*/
const spawn = require('cross-spawn');
/**
* Package.json
*/
const packageJson = require('../package.json');
@eiriklv
eiriklv / server.js
Last active April 26, 2018 10:41
Simple server
/**
* Dependencies
*/
const express = require('express');
const history = require('connect-history-api-fallback');
/**
* Environment / configuration
*/
const port = process.env.PORT || 3000;
@eiriklv
eiriklv / exercises.txt
Created April 18, 2018 13:28
Exercises
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
eiriklv / HTTPGetRequestForQueriesInterface.js
Created September 27, 2017 12:17 — forked from n1ru4l/HTTPGetRequestForQueriesInterface.js
HTTPGetRequestForQueriesInterface
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
eiriklv / classes.md
Created August 30, 2017 06:36
ES6 classes

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.