Skip to content

Instantly share code, notes, and snippets.

Eirik L. Vullum eiriklv

View GitHub Profile
@eiriklv
eiriklv / App.css
Last active Oct 27, 2018
Idiomatic React and Redux
View App.css
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 10vmin;
}
.App-header {
@eiriklv
eiriklv / conventions.md
Created Sep 20, 2018
Component class conventions
View conventions.md

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 Sep 20, 2018
Instance method anti-pattern
View a.js
/**
* Instance method anti pattern
*/
class MyComponent extends React.Component {
computeThatThing() {
return this.props.a + this.props.b;
}
render() {
return (
View build.js
/**
* Dependencies
*/
const spawn = require('cross-spawn');
/**
* Package.json
*/
const packageJson = require('../package.json');
@eiriklv
eiriklv / server.js
Last active Apr 26, 2018
Simple server
View server.js
/**
* Dependencies
*/
const express = require('express');
const history = require('connect-history-api-fallback');
/**
* Environment / configuration
*/
const port = process.env.PORT || 3000;
View exercises.txt
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/
View HTTPGetRequestForQueriesInterface.js
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(`&`);
}
View classes.md

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.

@eiriklv
eiriklv / requestAnimationFrame.js
Created Aug 20, 2017 — forked from jacob-beltran/requestAnimationFrame.js
React Performance: requestAnimationFrame Example
View requestAnimationFrame.js
// How to ensure that our animation loop ends on component unount
componentDidMount() {
this.startLoop();
}
componentWillUnmount() {
this.stopLoop();
}
@eiriklv
eiriklv / tic-tac-toe.js
Last active Aug 5, 2017
Tic Tac Toe (modeling problems with data and functions)
View tic-tac-toe.js
/**
* Example of empty game using 2D representation
*/
const exampleGame2D = [
['', '', ''],
['', '', ''],
['', '', ''],
];
/**
You can’t perform that action at this time.