Skip to content

Instantly share code, notes, and snippets.

Avatar

Paul Brownsmith brownsmith

  • Camberley, Surrey
View GitHub Profile
View reactComponent.js
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import styles from './Styles.scss';
@brownsmith
brownsmith / ReactComponent.js
Created Jun 28, 2017
Stateless functional component in React
View ReactComponent.js
import PropTypes from 'prop-types';
import React from 'react';
import styles from './Component.scss';
const ComponentName = ({ prop, anotherProp, functionFromContainer, propsAreFromContainer, prop2 }) => {
const someConstant = constantVal;
const componentClickEvent = () => {
// do whatever, perhaps with someConstant;
};
View gist:ca46cd73ed42073c760882e51cb918da
https://medium.com/dailyjs/techniques-for-decomposing-react-components-e8a1081ef5da
@brownsmith
brownsmith / arrow.js
Last active Mar 2, 2018
Arrow functions example
View arrow.js
// ES5
var multiply = function(a, b) {
return a * b;
};
// ES6
var multiply = (a, b) => { return a * b };
// even neater
var multiply = (a, b) => a * b;
@brownsmith
brownsmith / App.js
Last active Oct 10, 2017
Passing children about in JSX
View App.js
getMain = (children) => {
return (
<Switch>
<Route path={pathJoin(this.baseUrl, '/path/one')}>
<main className={styles.something}>
{children}
</main>
</Route>
<Route path={pathJoin(this.baseUrl, '/path/two')}>
<main className={styles.somethingElse}>
@brownsmith
brownsmith / codekata.js
Created Jan 30, 2018
Friend or Foe Code Kata solution
View codekata.js
function friend(friends){
return friends.filter(n => n.length === 4)
}
@brownsmith
brownsmith / Descending.js
Created Feb 1, 2018
Sort random numbers into descending order
View Descending.js
function descendingOrder(n){
return parseInt(String(n).split('').sort().reverse().join(''))
}
@brownsmith
brownsmith / pure.js
Created Feb 14, 2018
Little note on pure functions
View pure.js
// A function is only pure if, given the same input, it will always produce the same output.
const highpass = (cutoff, value) => value >= cutoff;
highpass(5, 123); // true
highpass(5, 6); // true
highpass(5, 18); // true
highpass(5, 5); // true
highpass(5, 1); // false
highpass(5, 3); // false
highpass(5, 4); // false
@brownsmith
brownsmith / keypress.js
Last active Feb 16, 2018
Nokia old style phone, key press array
View keypress.js
const keyArray = [
['1'],
['A', 'B', 'C', '2'],
['D', 'E', 'F', '3'],
['G', 'H', 'I', '4'],
['J', 'K', 'L', '5'],
['M', 'N', 'O', '6'],
['P', 'Q', 'R', 'S', '7'],
['T', 'U', 'V', '8'],
['W', 'X', 'Y', 'Z', '9'],
View selector.js
export const selectorName = state => {
return ...
}