import nightOwl from 'prism-react-renderer/themes/nightOwl' import { CodeSurfer as Code } from 'mdx-deck-code-surfer' import { BackgroundImage, Counter, SpinLogo } from './components' export { default as theme } from './components/theme'

<BackgroundImage src={require("file-loader!./images/first-slide.jpeg")} />

<BackgroundImage src={require("file-loader!./images/second-slide.jpeg")} />

<BackgroundImage src={require("file-loader!./images/lambda.jpg")} />

(λx.x)(λy.y)

<img src={require("file-loader!./images/half-life.png")}/>

`(x=>x)(y=>y)`

<BackgroundImage src={require("file-loader!./images/arrows.jpg")} />

<BackgroundImage src={require("file-loader!./images/toystory.jpg")} />

<SpinLogo src={require("file-loader!./images/react-logo.svg")}/>

So... they say React is FUNCTIONAL

...but then...

WHY ALL THOSE `class` AND `extends`? 🤔🤮😩

Let's refactor Airbnb's calendar! 📅

<img src={require("file-loader!./images/imperative-datepicker.gif")}/>

<Code title='before...' theme={nightOwl} code={require('!raw-loader!./components/datepicker.js')} steps={[ { lines: [1] }, { lines: [6], notes: 'Pretty standard React code... 🙄' }, { range: [5, 11], notes: 'Good ol' state 🍷' }, { range: [13, 15] }, { range: [17, 19] }, { range: [21, 23] }, { range: [25, 27] }, { range: [29, 34], notes: 'Never used 🤣' }, { range: [36, 38] }, { range: [40, 42] }, { range: [44, 47] }, { range: [49, 76], notes: 'FINALLY the render() method...' }, { range: [52, 57] }, { range: [58, 63] }, { range: [64, 73] }, { lines: [72] }, ]} />

Welcome to recompose! 🤓🖖🏼

<Code title='...after!' theme={nightOwl} code={require('!raw-loader!./components/recompose.js')} steps={[ { lines: [1], notes: 'Component is no longer needed!' }, { lines: [3], notes: 'import the important stuff 😎' }, { lines: [8, 9], notes: "Let's remove those magic strings 😉" }, { lines: [2, 11], notes: 'This is just because dates freak me out 📅' }, { tokens: { 13: [1,2,3,4,5,6], 17: [1] } , notes: '(re)compose ALL THE THINGS! 🎸' }, { lines: [14], notes: 'What is this magic? ✨' }, { tokens: { 14: [3] }, notes: 'withState API: 1st arg (state)' }, { tokens: { 14: [6] }, notes: 'withState API: 2nd arg (handler)' }, { tokens: { 14: [9] }, notes: 'withState API: 3rd arg (defaultValue)' }, { lines: [15], notes: 'same HOC for the highlight...' }, { lines: [16], notes: '...and for the values.' }, { range: [19,45], notes: 'Most of our component is just the render function!' }, { lines: [19], notes: 'We can now use our composed HOC (enhancers)' }, { lines: [20], notes: 'Destructure all the things... 📦' }, { range: [22,27] }, { range: [28,33] }, { range: [34,42] }, { lines: [41], notes: 'That. Is. It! 🎉' }, ]} />

OK. You Win.

That is 50% less code™️, but...

...let's see if this thing still works...

<img src={require("file-loader!./images/functional-datepicker.gif")}/>

It does! 🎉🎉🎉

Now another quick fp pro tip...

Maybe Better Reducers 🤔

<Code title='folktale/maybe 🌈🦄' theme={nightOwl} code={require('!raw-loader!./components/maybe.js')} steps={[ { lines: [1], notes: 'This is where Fantasy Land comes in 🎡' }, { range: [3, 5], notes: 'actions ⚙️' }, { lines: [7], notes: 'handlers 👋' }, { range: [9, 13], notes: 'our only reducer 😎' }, { range: [15, 19], notes: 'it works! 👏' }, ]} />

<Code title='crocks 🐊' theme={nightOwl} code={require('!raw-loader!./components/crocks.js')} steps={[ { lines: [1], notes: 'You might want to give crocks a try 😉' }, { range: [3, 5], notes: 'same actions ⚙️' }, { lines: [7], notes: 'same handlers 👋' }, { range: [9, 11], notes: 'safe() returns a Maybe 🤔' }, { range: [13, 17], notes: 'this also works! 👏🏼' }, ]} />

Does that actually work???

THANKS! ☺️

<BackgroundImage src={require("file-loader!./images/ending.png")} />