Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
Looking for work

Danny Andrews danny-andrews

💭
Looking for work
View GitHub Profile
View webpack.config.js
{
test: /\.(jsx?)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
plugins: [
[
'babel-plugin-react-css-modules',
{
@danny-andrews
danny-andrews / facc-example.jsx
Last active Oct 10, 2017
React Abstractions: FaCC
View facc-example.jsx
const LuckyNumber = ({ children }) => children({ number: Math.random() });
const App = () => (
<LuckyNumber>
{({number}) => <div>Your number is: {number}!</div>}
</LuckyNumber>
);
@danny-andrews
danny-andrews / render-prop-example.jsx
Last active Oct 10, 2017
React Abstractions: Render Prop
View render-prop-example.jsx
const LuckyNumber = ({ render }) => render({ number: Math.random() });
const App = () => (
<LuckyNumber
render={({number}) => <div>Your number is: {number}!</div>}
/>
);
@danny-andrews
danny-andrews / component-injection-example.jsx
Last active Oct 10, 2017
React Abstractions: Component Injection
View component-injection-example.jsx
const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;
const AppBody = ({ number }) => <div>Your number is: {number}!</div>;
const App = () => <LuckyNumber component={AppBody} />;
@danny-andrews
danny-andrews / compare-inline-render-prop.jsx
Last active Oct 10, 2017
React Abstractions: Compare render props
View compare-inline-render-prop.jsx
const LuckyNumber = ({ render }) => render({ number: Math.random() });
const App = ({ message }) => (
<LuckyNumber
render={({number}) => <div>{message}: {number}!</div>}
/>
);
View compare-component-injection-problem.jsx
const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;
const AppBody = ({number}) => <div>{message}: {number}!</div>;
// How do I get the message prop to AppBody? 🤔🤔🤔
const App = () => <LuckyNumber component={AppBody} />;
View compare-render-prop-solution-2.jsx
const LuckyNumber = ({ component: Component, componentProps }) => <Component number={Math.random()} {...componentProps} />;
const AppBody = ({ message, number }) => <div>{message}: {number}!</div>;
const App = ({ message }) => <LuckyNumber componentProps={{ message }} component={AppBody} />;
View compare-render-prop-solution-1.jsx
const LuckyNumber = ({ component: Component }) => <Component number={Math.random()} />;
// There's no general way to curry named parameters, so we have to do it
// manually.
const AppBody = ({ message }) => ({ number }) => <div>{message}: {number}!</div>;
const App = ({ message }) => <LuckyNumber component={AppBody({ message })} />;
View render-prop-component-injection-crossover.jsx
const { Component } = React;
const { render } = ReactDOM;
const MyMug = ({ drink, verb = 'Drinking' }) =>
<div>{verb} an {drink}.</div>;
class Caffeinate extends Component {
state = { coffee: 'Americano' };
render() {
View art-for-import-temp.md

Level 1 (Loops) - (map, reduce, filter, more).

Level 2 (Callbacks/Async) - Use Promises (or better yet, Futures).*.

Level 3 (Assignment) - pipe or compose functions together to avoid unnecessary intermediate variable declarations.

A wild monad appears! Monet Olé!

Level 4 (null/undefined) - Use Maybe monad.*.