Agenda

## Overview
A 2 day collaborative exploration of advanced React topics, focused on:
- Reusable components
- Automated testing
- Styling

The days will alternate between presentation and hands-on exercises, so bring your laptops! :) A whiteboard would be helpful as well.

## React Prerequisites

If the team isn't familiar with these React concepts, we should review them first:

- [x] [Why React?](https://app.pluralsight.com/library/courses/react-big-picture/table-of-contents)
- [x] Library vs framework
- [x] [JSX](https://reactjs.org/docs/jsx-in-depth.html)
* [JSX - The Other Side of the Coin](https://medium.freecodecamp.org/react-s-jsx-the-other-side-of-the-coin-2ace7ab62b98)
* [React without JSX](https://reactjs.org/docs/react-without-jsx.html)
* [String literals](https://reactjs.org/docs/jsx-in-depth.html#string-literals)
* [Props default true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true)
* [Spread attributes](https://reactjs.org/docs/jsx-in-depth.html#spread-attributes)
* [Booleans, null, undefined are ignored](https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored)
- [x] [Virtual DOM](https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom)
- [x] [Props](https://reactjs.org/docs/components-and-props.html)
- [x] [State](https://reactjs.org/docs/components-and-props.html)
* [Tips for using state correctly](https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly)
* [Four immutable approaches](https://medium.freecodecamp.org/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5)
- [ ] [Forms](https://reactjs.org/docs/forms.html)
* [Controlled vs Uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html)
- [ ] [createClass](https://reactjs.org/docs/react-without-es6.html) and [Class components](https://reactjs.org/docs/components-and-props.html#functional-and-class-components)
- [ ] [Functional components](https://reactjs.org/docs/components-and-props.html#functional-and-class-components)
* [The good parts](https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc)
* [The bad parts](https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c)
- [ ] [Binding Patterns - 5 Ways to handle the `this` keyword](https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56)
* [Avoid arrow functions and bind in render](https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36)
- [ ] [Lifecycle methods](https://reactjs.org/docs/react-component.html#the-component-lifecycle)
- [ ] [Conditionals in render](https://reactjs.org/docs/conditional-rendering.html)
* Ternary
* Logical &&, || in render
* Multiple return/return early
- [ ] Typechecking via [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
* [Centralizing declarations](https://medium.freecodecamp.org/react-pattern-centralized-proptypes-f981ff672f3b)
* [Declaring shapes]()
* PropTypes vs [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/)
- [ ] [Default props](https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values)
- [ ] [Keys](https://reactjs.org/docs/lists-and-keys.html)
- [ ] [Component composition](https://reactjs.org/docs/composition-vs-inheritance.html)
* [props.children](https://reactjs.org/docs/composition-vs-inheritance.html#containment)
* [Specialization](https://reactjs.org/docs/composition-vs-inheritance.html#specialization)
- [ ] [Container vs Presentation components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) (aka smart vs dumb)
- [ ] [The 8 Key React Component Decisions](https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594)

## JavaScript Prerequisites

If the team isn't familiar with these JavaScript concepts, we should review them first:

- [ ] [The history and future of JS](https://en.wikipedia.org/wiki/ECMAScript)
- [ ] [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
- [ ] [Const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)/[let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
- [ ] [Classes](https://babeljs.io/learn-es2015/#ecmascript-2015-features-classes)
- [ ] [Default arguments]()
- [ ] [Properties](http://babeljs.io/docs/plugins/transform-class-properties/)
- [ ] [Template strings](https://babeljs.io/learn-es2015/#ecmascript-2015-features-template-strings)
- [ ] [Enhanced object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)
* Object shorthand
- [ ] [Rest/Spread](https://babeljs.io/learn-es2015/#ecmascript-2015-features-default-rest-spread)
- [ ] [Object Rest/spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/)
- [ ] [Destructuring](https://babeljs.io/learn-es2015/#ecmascript-2015-features-destructuring)
- [ ] Functional approaches
* [Write pure functions](https://en.wikipedia.org/wiki/Pure_function)
* [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
* [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
* [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
* [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
* [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
* Avoid mutators like [pop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop), [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
* [Ramda](http://ramdajs.com) or [LoDash FP]()
- [ ] [ES modules](https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules) vs [CommonJS](https://nodejs.org/docs/latest/api/modules.html) [Simple example](https://stackoverflow.com/a/16522990/26180)
* Imports
* Exports
* Named imports
* Default exports
- [ ] [Async patterns](https://stackify.com/async-javascript-approaches/)
* [Callbacks](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)
* [Async/Await](https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9)
- [ ] Debugging
* Sourcemaps
* debugger;

# Day 1 Agenda

## Intro
- [x] Name tags 🔖
- [x] Who is this guy?
- [x] What are you building?
* Browser support
- [x] What is your development background?
* Biggest frustrations with current dev setup
* What is your current JS experience?
- [x] Why did you select React?
- [x] What do you already know about React? Are you comfortable with the prerequisites above?
- [x] What preferences do you already have?
* Types
* State management
* Styling
* Testing
* Server rendering
* Mobile
- [x] Flow - Challenges or code as group?
- [x] Review agenda
- [x] Breaks ☕️🍩🍕🏃‍♂️💨🍺

## Development Environment

Discuss options and review development environment for session
- [x] Install [Node](http://nodejs.org), [Git](http://git-scm.com).
- [x] Git overview
- [x] Select a JS editor
* [VS Code](https://code.visualstudio.com)
* [Webstorm](https://www.jetbrains.com/webstorm/)
- [x] Explore [Codesandbox](https://codesandbox.io) and [Stackblitz](https://stackblitz.com)
- [x] Dev environment
* Install [react dev tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
* [Review dev env options](https://www.javascriptstuff.com/react-starter-projects/)
* Install [create-react-app](https://github.com/facebookincubator/create-react-app) and explore

## Code review
- [ ] Walk through existing Farfetch code and discuss opportunities for improvement

## Reusable components [Slides](https://www.dropbox.com/s/qur7rf39c1k5huw/Reusable%20Components.zip?dl=0)

- [x] Link, wrap, or fork?
- [x] The rule of three
- [x] Keeping UX and UI in sync
- [x] Selecting an audience
- [ ] Specific components in mind?
- [x] Component libraries
- [x] Keep booleans positive
- [x] Handling API calls, auth, Redux (smart vs dumb components)
- [x] Creation
- [ ] Sharing
- [ ] Generating docs
- [ ] Automated build
- [ ] CommonJS build
- [ ] ES build
- [ ] UMD build
- [ ] Development workflow
- [ ] Link
- [ ] Pack
- [ ] Beta
- [ ] Hosting options

### Patterns
- [ ] Portals
- [x] Higher order components
- [x] Render props / function as child
- [x] Atomic design
- [x] Atoms
- [x] Molecules
- [x] Organisms
- [x] Generating documentation

**Potential Exercises (as time allows)**:
- [ ] Select a component library as a foundation
- [ ] Create a reusable component library from scratch
- [x] Generate documentation
- [ ] Publish library
- [ ] Consume library

# Day 2

## Automated Testing [Slides](https://www.dropbox.com/s/ccx0g8jgt7hvh2q/Testing%20React%20components.pptx?dl=0)
- [ ] Frameworks
- [ ] Testing React
- [ ] Stateless components
- [ ] Instance methods
- [ ] Extracting to pure functions
- [ ] [Extracting setState / functional setState](https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b)
- [ ] Jest
- [ ] Configuration
- [ ] Snapshot testing
- [ ] [Focused / Partial snapshots](https://twitter.com/kentcdodds/status/956372500413165570)
- [ ] Enzyme
- [ ] Cheerio
- [ ] Testing Redux
- [ ] Actions
- [ ] Reducers
- [ ] Connected components
- [ ] [Cypress](https://docs.cypress.io/examples/examples/tutorials.html#Test-a-React-Todo-App)

**Potential Exercises (as time allows)**:
- [ ] Configure create-react-app with:
- [ ] Enzyme
- [ ] Cypress
- [ ] react-test-renderer
- [ ] redux-mock-store
- [ ] Jest code coverage reports (command line and in-browser).
- [ ] Add tests to example app
- [ ] Review existing Farfetch app and add tests

## Styling
- [ ] CSS
- [ ] Sass/Less
- [ ] Inline styles
- [ ] CSS in JS
- [ ] CSS Modules

## Wrap up
- [ ] [Feedback](http://bit.ly/react-farfetch)

# Potential Additional Topics
* Custom development environment
* Coding standards
* Linting / Prettier
* Automated build and deploy
* State management
* Redux
* MobX
* Selectors
* Thunks
* API calls
* Mock APIs
* React Router
* Advanced React
* refs
* context
* reselect
* Integrating with existing codebases
* Portals
* Error handling
* Performance
* Accessibility
* Server rendering
* Code and architectural reviews
* Sharing and standardizing work via npm