From 45055e711235170d3ff710be49fe66b6e015202f Mon Sep 17 00:00:00 2001 From: Shaun Lloyd Date: Tue, 4 Sep 2018 13:21:23 -0400 Subject: [PATCH] Update map, filter, reduce slides to be less wordy (#36) - Update Map slides with less wordy slides and emoji example - Update Filter slides with less wordy slides and emoji example - Update Reduce slides with less wordy slides and emoji example - Add ".prettierrc" --- .prettierrc | 9 ++ src/slideDecks.js | 126 ++++++++---------- .../function-programming-array-filter.js | 87 +++++++----- .../functional-programming-filter.example.js | 13 +- .../function-programming-array-map.js | 85 ++++++++---- .../functional-programming-map.example.js | 2 +- .../reduce-slides.js | 92 ++++++++----- src/slides/index.js | 44 +++--- .../react-component-lifecycle/lifecycle.js | 62 ++++----- yarn.lock | 16 +-- 10 files changed, 299 insertions(+), 237 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b7572ac --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "printWidth": 120, + "singleQuote": true, + "useTabs": false, + "tabWidth": 2, + "semi": true, + "bracketSpacing": true, + "trailingComma": "all" +} diff --git a/src/slideDecks.js b/src/slideDecks.js index d1d002f..7f33caa 100644 --- a/src/slideDecks.js +++ b/src/slideDecks.js @@ -1,76 +1,68 @@ // divide slides into modules import { - FAnatomyParameterSlideSet, - FAnatomyReturnSlideSet, - ArrowSlideSet, - FCallbackSlideset, - FAnatomyPureSlideSet, - FPFilterSlideSet, - FPMapSlideSet, - immutabilitySlideSet, - OrderOfOperationsSlideSet, - PromisesSlideSet, - reactComponentsIntroSlideSet, - functionComponentSlideSet, - classComponentSlideSet, - reactPropsSlideSet, - lifecycleSlideSet, - reactStateSlideSet, - reduxIntroSet, - reduxThunksIntroSet, - } from './slides'; - import { ReduceSlideSet } from './slides/functional-programming-reduce'; - - // FUNCTIONS - const functionsSlideList = [ - ...FAnatomyParameterSlideSet, - ...FAnatomyReturnSlideSet, - ...ArrowSlideSet, - ...FCallbackSlideset, - ...FAnatomyPureSlideSet, - ]; + FAnatomyParameterSlideSet, + FAnatomyReturnSlideSet, + ArrowSlideSet, + FCallbackSlideset, + FAnatomyPureSlideSet, + FPFilterSlideSet, + FPMapSlideSet, + immutabilitySlideSet, + OrderOfOperationsSlideSet, + PromisesSlideSet, + reactComponentsIntroSlideSet, + functionComponentSlideSet, + classComponentSlideSet, + reactPropsSlideSet, + lifecycleSlideSet, + reactStateSlideSet, + reduxIntroSet, + reduxThunksIntroSet, +} from './slides'; +import { ReduceSlideSet } from './slides/functional-programming-reduce'; - // FUNCTIONAL PROGRAMMING - const functionalProgrammingSlideList = [ - ...FPFilterSlideSet, - ...FPMapSlideSet, - ...ReduceSlideSet, - ...immutabilitySlideSet, - ]; +// FUNCTIONS +const functionsSlideList = [ + ...FAnatomyParameterSlideSet, + ...FAnatomyReturnSlideSet, + ...ArrowSlideSet, + ...FCallbackSlideset, + ...FAnatomyPureSlideSet, +]; - // INTERPRETER - const interpreterSlideList = [ - ...OrderOfOperationsSlideSet, - ]; +// FUNCTIONAL PROGRAMMING +const functionalProgrammingSlideList = [ + ...FPMapSlideSet, + ...FPFilterSlideSet, + ...ReduceSlideSet, + ...immutabilitySlideSet, +]; - // PROMISES - const promisesSlideList = [ - ...PromisesSlideSet, - ]; +// INTERPRETER +const interpreterSlideList = [...OrderOfOperationsSlideSet]; - // REACT - const reactSlideList = [ - ...classComponentSlideSet, - ...lifecycleSlideSet, - ...reactComponentsIntroSlideSet, - ...functionComponentSlideSet, - ...reactPropsSlideSet, - ...reactStateSlideSet, - ]; +// PROMISES +const promisesSlideList = [...PromisesSlideSet]; - // REDUX - const reduxSlideList = [ - ...reduxIntroSet, - ...reduxThunksIntroSet, - ]; +// REACT +const reactSlideList = [ + ...classComponentSlideSet, + ...lifecycleSlideSet, + ...reactComponentsIntroSlideSet, + ...functionComponentSlideSet, + ...reactPropsSlideSet, + ...reactStateSlideSet, +]; - export { - functionsSlideList, - functionalProgrammingSlideList, - interpreterSlideList, - promisesSlideList, - reactSlideList, - reduxSlideList - }; - \ No newline at end of file +// REDUX +const reduxSlideList = [...reduxIntroSet, ...reduxThunksIntroSet]; + +export { + functionsSlideList, + functionalProgrammingSlideList, + interpreterSlideList, + promisesSlideList, + reactSlideList, + reduxSlideList, +}; diff --git a/src/slides/functional-programming-filter/function-programming-array-filter.js b/src/slides/functional-programming-filter/function-programming-array-filter.js index d6bd1b5..4974cda 100644 --- a/src/slides/functional-programming-filter/function-programming-array-filter.js +++ b/src/slides/functional-programming-filter/function-programming-array-filter.js @@ -1,36 +1,63 @@ -import * as filterCode from "!raw-loader!./functional-programming-filter.example"; -import { - BasicCodeSlideMaker, - ListSlideMaker, - ReplClassSignup, - ReplFrameSlide -} from "../../tools"; -import { FILTER } from "../../links"; +import React from 'react'; +import * as filterCode from '!raw-loader!./functional-programming-filter.example'; +import { BasicCodeSlideMaker, ReplClassSignup, ReplFrameSlide } from '../../tools'; +import { FILTER } from '../../links'; +import { Slide, Heading, Text, List, ListItem } from 'spectacle'; -const Slide1 = ListSlideMaker("Array Filter", [ - "Iterates through a list of items in an array and applies a provided function to each item to determine whether to put the result into the new array", - "The .filter() method can be called on any array", - "The .filter() method expects a function 'callback'", - "This function is fired for each item in the array - if there are three items, the function will run three times", - "Each time the function is run, it is passed the current array item as the first parameter" -]); +export class Slide1 extends React.Component { + render() { + return ( + + + Filter + + + To remove unwanted data + + + ); + } +} -const Slide2 = ListSlideMaker("Array Filter", [ - "The callback function should return a 'truthy' or 'falsy' value", - "If the function returns a truthy value, the current item will be added to the result array. If not, it will be ignored.", - "Filter will always return a new array that is the same length or shorter than the original", - "The original list will -not- be changed or mutated" -]); +export class Slide2 extends React.Component { + render() { + return ( + + + Array.filter() + + + [ + + 🍿, 🍔, 🍳 + + ].filter(isVegetarian) => [ + + 🍿, 🍳 + + ] + + + + Takes a filter function + + + Does not change the given array + + + Returns a new array + + + New array values are the values of the original array that passed the test of the filter function + + + + ); + } +} -const Slide4 = ReplClassSignup("Array Filter", FILTER.invite); +const Slide4 = ReplClassSignup('Array Filter', FILTER.invite); const Slide5 = ReplFrameSlide(FILTER.exercise1); const Slide6 = ReplFrameSlide(FILTER.exercise2); -export const FPFilterSlideSet = [ - Slide1, - Slide2, - BasicCodeSlideMaker(filterCode), - Slide4, - Slide5, - Slide6 -]; +export const FPFilterSlideSet = [Slide1, Slide2, BasicCodeSlideMaker(filterCode), Slide4, Slide5, Slide6]; diff --git a/src/slides/functional-programming-filter/functional-programming-filter.example.js b/src/slides/functional-programming-filter/functional-programming-filter.example.js index 58297e4..0aa4437 100644 --- a/src/slides/functional-programming-filter/functional-programming-filter.example.js +++ b/src/slides/functional-programming-filter/functional-programming-filter.example.js @@ -1,12 +1,5 @@ const listOfNumbers = [3, 1, 6, 2, 9]; -// the callback function passed into filter expects the first argument to -// represent the current value being iterated over in the array. -// ex. the function fires 5 times in this case and the first time it fires -// num is equal to 3, the second time, it's equal to 1 -const lessThan5 = listOfNumbers.filter(function(num){ - return num < 5; -}); - -// or with an arrow function -const lessThan5 = listOfNumbers.filter(num => num < 5); +// Fitlers listOfNumbers array for number less than 5 +// Returns a new array [3, 1, 2] +const numberLessThanFive = listOfNumbers.filter(num => num < 5); diff --git a/src/slides/functional-programming-map/function-programming-array-map.js b/src/slides/functional-programming-map/function-programming-array-map.js index 529e8f2..943e129 100644 --- a/src/slides/functional-programming-map/function-programming-array-map.js +++ b/src/slides/functional-programming-map/function-programming-array-map.js @@ -1,34 +1,63 @@ -import * as mapCode from "!raw-loader!./functional-programming-map.example"; -import { - BasicCodeSlideMaker, - ListSlideMaker, - ReplClassSignup, - ReplFrameSlide -} from "../../tools"; -import { MAP } from "../../links"; +import React from 'react'; +import * as mapCode from '!raw-loader!./functional-programming-map.example'; +import { BasicCodeSlideMaker, ReplClassSignup, ReplFrameSlide } from '../../tools'; +import { MAP } from '../../links'; +import { Slide, Heading, List, ListItem, Text } from 'spectacle'; -const Slide1 = ListSlideMaker("Array Map", [ - "Iterates through a list of items in an array and applies a provided function to each item before putting the result into a new array", - "The .map() method expects a function 'callback'", - "This function is fired for each item in the array - if there are three items, the function will run three times", - "Each time the function is run, it is passed the current array item as the first parameter" -]); +export class Slide1 extends React.Component { + render() { + return ( + + + Map + + + To transform a value from one value to another + + + ); + } +} -const Slide2 = ListSlideMaker("Array Map", [ - "The result of the callback function will be added to the new array at the same index as the input from the original", - "Map will always return a new array that is the same length of the original", - "The original list will -not- be changed or mutated" -]); +export class Slide2 extends React.Component { + render() { + return ( + + + Array.map() + + + [ + + 🌽, 🐮, 🐔 + + ].map(cook) => [ + + 🍿, 🍔, 🍳 + + ] + + + + Takes a transform function + + + Does not change the given array + + + Returns a new array + + + New array values are the values of the original array after applying the transform + + + + ); + } +} -const Slide3 = ReplClassSignup("Array Map", MAP.invite); +const Slide3 = ReplClassSignup('Array Map', MAP.invite); const Slide4 = ReplFrameSlide(MAP.exercise1); const Slide5 = ReplFrameSlide(MAP.exercise2); -export const FPMapSlideSet = [ - Slide1, - Slide2, - BasicCodeSlideMaker(mapCode), - Slide3, - Slide4, - Slide5 -]; +export const FPMapSlideSet = [Slide1, Slide2, BasicCodeSlideMaker(mapCode), Slide3, Slide4, Slide5]; diff --git a/src/slides/functional-programming-map/functional-programming-map.example.js b/src/slides/functional-programming-map/functional-programming-map.example.js index 5136f91..e2cc302 100644 --- a/src/slides/functional-programming-map/functional-programming-map.example.js +++ b/src/slides/functional-programming-map/functional-programming-map.example.js @@ -2,4 +2,4 @@ const listOfNumbers = [1, 2, 3, 4, 5]; // this results in the array [2, 4, 6, 8, 10] - and this does NOT effect the original // listOfNumbers is still [1, 2, 3, 4, 5] -const addIndexToNumber = listOfNumbers.map(num => num * 2); +const doubleNumbers = listOfNumbers.map(num => num * 2); diff --git a/src/slides/functional-programming-reduce/reduce-slides.js b/src/slides/functional-programming-reduce/reduce-slides.js index 23f80a0..75548e3 100644 --- a/src/slides/functional-programming-reduce/reduce-slides.js +++ b/src/slides/functional-programming-reduce/reduce-slides.js @@ -1,49 +1,73 @@ -import * as reduceCode from "!raw-loader!./reduce.example"; -import * as reduceCode2 from "!raw-loader!./reduce-2.example"; -import * as reduceCode3 from "!raw-loader!./reduce-3.example"; +import React from 'react'; +import * as reduceCode from '!raw-loader!./reduce.example'; +import * as reduceCode2 from '!raw-loader!./reduce-2.example'; +import * as reduceCode3 from '!raw-loader!./reduce-3.example'; -import { - BasicCodeSlideMaker, - ListSlideMaker, - ReplClassSignup, - ReplFrameSlide -} from "../../tools"; -import { REDUCE } from "../../links"; +import { BasicCodeSlideMaker, ReplClassSignup, ReplFrameSlide } from '../../tools'; +import { REDUCE } from '../../links'; +import { Slide, Heading, Text, List, ListItem } from 'spectacle'; -const Slide1 = ListSlideMaker("Array Reduce", [ - "Iterates through a list of items in an array and applies a provided function to each item to create the desired output value", - "The .reduce() method can be called on any array", - "The .reduce() method expects a function 'callback' and accepts an optional 'initial value'", - "Unlike filter and map, reduce does not have to result in an array; it could return any kind of value" -]); +export class Slide1 extends React.Component { + render() { + return ( + + + Reduce + + + To reduce a collection of values into one new value + + + ); + } +} -const Slide2 = ListSlideMaker("Array Reduce", [ - "The callback in reduce is different from the previous ones we've seen; it takes in two parameters", - "The first parameter in the callback is often referred to as the accumulator; it contains the combined result of the previous iterations' returns", - "The second parameter in the callback is the current array item from the source array" -]); +export class Slide2 extends React.Component { + render() { + return ( + + + Array.reduce() + + + [ + + 🍿, 🍳 + + ].reduce(eat) => + + 💩 + + + + + Takes a reduce function + + + Does not change the given array + + + Returns the reduced value computed by the passing each item in the array into the reduce function + + + + ); + } +} -const Slide3 = ListSlideMaker("Array Reduce", [ - "In addition to the callback method, reduce can take an optional second parameter: an initial value for the callback's accumulator", - "You often use this to indicate the final output's type", - "If you don't provide an initial value, reduce will pass the first item from the source array to the callback instead. This will be used as the initial value of the accumulator", - "The last time the reduce callback fires, the result it outputs will be the final reduced value" -]); - -const Slide4 = ReplClassSignup("Array Reduce", REDUCE.invite); -const Slide5 = ReplFrameSlide(REDUCE.exercise1); -const Slide6 = ReplFrameSlide(REDUCE.exercise2); -const Slide7 = ReplFrameSlide(REDUCE.exercise3); +const Slide3 = ReplClassSignup('Array Reduce', REDUCE.invite); +const Slide4 = ReplFrameSlide(REDUCE.exercise1); +const Slide5 = ReplFrameSlide(REDUCE.exercise2); +const Slide6 = ReplFrameSlide(REDUCE.exercise3); export const ReduceSlideSet = [ Slide1, Slide2, - Slide3, BasicCodeSlideMaker(reduceCode), BasicCodeSlideMaker(reduceCode2, 24), BasicCodeSlideMaker(reduceCode3), + Slide3, Slide4, Slide5, Slide6, - Slide7 ]; diff --git a/src/slides/index.js b/src/slides/index.js index 65f53ec..2393322 100644 --- a/src/slides/index.js +++ b/src/slides/index.js @@ -1,22 +1,22 @@ -export * from './promises'; -export * from './function-anatomy-overview'; -export * from './function-arrow'; -export * from './function-anatomy-parameters/function-anatomy-parameters'; -export * from './function-pure'; -export * from './function-anatomy-return'; -export * from './functional-programming-filter/function-programming-array-filter'; -export * from './functional-programming-map'; -export * from './functional-programming-overview'; -export * from './immutability/immutability'; -export * from './intro'; -export * from './overview'; -export * from './interperter'; -export * from './function-callback'; -export * from './react-components-intro/components-intro'; -export * from './react-function-component/function-component'; -export * from './react-class-component/class-component'; -export * from './react-props/props'; -export * from './react-component-lifecycle/lifecycle'; -export * from './react-state/react-state'; -export * from './redux-intro/redux-intro'; -export * from './redux-thunks'; +export * from "./promises"; +export * from "./function-anatomy-overview"; +export * from "./function-arrow"; +export * from "./function-anatomy-parameters/function-anatomy-parameters"; +export * from "./function-pure"; +export * from "./function-anatomy-return"; +export * from "./functional-programming-filter/function-programming-array-filter"; +export * from "./functional-programming-map"; +export * from "./functional-programming-overview"; +export * from "./immutability/immutability"; +export * from "./intro"; +export * from "./overview"; +export * from "./interperter"; +export * from "./function-callback"; +export * from "./react-components-intro/components-intro"; +export * from "./react-function-component/function-component"; +export * from "./react-class-component/class-component"; +export * from "./react-props/props"; +export * from "./react-component-lifecycle/lifecycle"; +export * from "./react-state/react-state"; +export * from "./redux-intro/redux-intro"; +export * from "./redux-thunks"; diff --git a/src/slides/react-component-lifecycle/lifecycle.js b/src/slides/react-component-lifecycle/lifecycle.js index 5bde7c1..6d77b2a 100644 --- a/src/slides/react-component-lifecycle/lifecycle.js +++ b/src/slides/react-component-lifecycle/lifecycle.js @@ -29,56 +29,58 @@ class OverviewSlide extends React.Component { const MountSlide = ListSlideMaker(`Mounting Events`); -const ConstructorSlide = ListSlideMaker( - `constructor (props)`, - [`Called to construct an instance of the component class`, - `Used to initialize state and bind methods`] -); +const ConstructorSlide = ListSlideMaker(`constructor (props)`, [ + `Called to construct an instance of the component class`, + `Used to initialize state and bind methods` +]); const DerivedStateSlide = ListSlideMaker( `getDerivedStateFromProps (props, state)`, - [`Called just before the render method. Both on initial mount and updates`, - `Used to help compute state based on a prop change`, - `Returns an object to update the state or null to update nothing`, - `Should be used sparingly`] + [ + `Called just before the render method. Both on initial mount and updates`, + `Used to help compute state based on a prop change`, + `Returns an object to update the state or null to update nothing`, + `Should be used sparingly` + ] ); -const DidMountSlide = ListSlideMaker( - `componentDidMount ()`, - [`Called once the component is successfully mounted (rendered into the DOM)`, - `A great place to make fetch calls`] -); +const DidMountSlide = ListSlideMaker(`componentDidMount ()`, [ + `Called once the component is successfully mounted (rendered into the DOM)`, + `A great place to make fetch calls` +]); const UpdateSlide = ListSlideMaker(`Updating Events`); const ShouldUpdateSlide = ListSlideMaker( `shouldComponentUpdate (nextProps, nextState)`, - [`Called after getDerivedStateFromProps`, - `Used to return a boolean to determine whether the component should rerender`, - `Useful but should not be needed often`] + [ + `Called after getDerivedStateFromProps`, + `Used to return a boolean to determine whether the component should rerender`, + `Useful but should not be needed often` + ] ); const DidUpdateSlide = ListSlideMaker( `componentDidUpdate (previousProps, PreviousState)`, - [`Called right after the component is updated in the DOM`, - `Good place to make HTTP requests as long as you compare your previous state and props their current values`, - `Can call this.setState as long is it wrapped in a condition to avoid an infinite loop`] + [ + `Called right after the component is updated in the DOM`, + `Good place to make HTTP requests as long as you compare your previous state and props their current values`, + `Can call this.setState as long is it wrapped in a condition to avoid an infinite loop` + ] ); const UnmountSlide = ListSlideMaker(`Unmounting Events`); -const WillUnmountSlide = ListSlideMaker( - `componentWillUnmount ()`, - [`Called before the component is unmounted and destroyed`, - `Used for clean up like removing timers, cancelling network requests, etc`] -); +const WillUnmountSlide = ListSlideMaker(`componentWillUnmount ()`, [ + `Called before the component is unmounted and destroyed`, + `Used for clean up like removing timers, cancelling network requests, etc` +]); -const DeprecatedSlide = ListSlideMaker( - `Deprecated Events`, - [`componentWillMount`, +const DeprecatedSlide = ListSlideMaker(`Deprecated Events`, [ + `componentWillMount`, `componentWillUpdate`, - `componentWillRecieveProps`] -); + `componentWillRecieveProps` +]); class ResourcesSlide extends React.Component { render() { diff --git a/yarn.lock b/yarn.lock index def5988..7f47db3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1418,14 +1418,6 @@ clipboard@^1.5.5: select "^1.1.2" tiny-emitter "^2.0.0" -clipboard@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a" - dependencies: - good-listener "^1.2.2" - select "^1.1.2" - tiny-emitter "^2.0.0" - cliui@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1" @@ -5223,18 +5215,12 @@ pretty-format@^20.0.3: ansi-regex "^2.1.1" ansi-styles "^3.0.0" -prismjs@1.6.0: +prismjs@1.6.0, prismjs@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365" optionalDependencies: clipboard "^1.5.5" -prismjs@^1.6.0: - version "1.15.0" - resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9" - optionalDependencies: - clipboard "^2.0.0" - private@^0.1.6, private@^0.1.7: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"