Agenda

## Intro

- [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?
- [x] Types
- [x] State management
- [x] Styling
- [x] Testing
- [x] Server rendering
- [x] Mobile
- [x] Philosophy

> To learn and not to do is really not to learn. To know and not to do is really not to know. - Stephen Covey

> Repetition helps you remember.

- [x] Flow
* Introduce concept
* I show example
* Challenge: You try
* Review

- [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
- [x] [VS Code](https://code.visualstudio.com)
- [x] [Webstorm](https://www.jetbrains.com/webstorm/)
- [x] [Codesandbox](https://codesandbox.io)
- [x] [Stackblitz](https://stackblitz.com)
- [x] [ReKit](http://rekit.js.org)
- [ ] 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

## JavaScript Intro

- [x] [The history and future of JS](https://en.wikipedia.org/wiki/ECMAScript)
- [ ] [Debugging](https://javascript.info/debugging-chrome)
- [x] [Variables](https://javascript.info/variables)
- [ ] [Var vs let](https://javascript.info/var) and [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
- [x] [Data types](https://javascript.info/types)
- [x] [Type conversions](https://javascript.info/type-conversions)
- [x] [Operators](https://javascript.info/operators)
- [x] [Comparisons](https://javascript.info/comparison)
- [x] [Interactions](https://javascript.info/alert-prompt-confirm)
- [x] [Conditional Operators](https://javascript.info/ifelse)
- [x] [Logical Operators](https://javascript.info/logical-operators)
- [x] [Loops](https://javascript.info/while-for)
- [x] [Switch](https://javascript.info/switch)
- [x] [Functions](https://javascript.info/function-basics)
- [Built in array functions](https://www.quora.com/What-is-a-simple-explanation-of-higher-order-functions-and-callbacks-in-JavaScript/answer/Mattias-Petter-Johansson) (filter, reject, map, reduce, find)
- [x] [Specials](https://javascript.info/javascript-specials)
- [x] Comments

## Modern JS

- [x] [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
- [x] [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)
- [x] [Classes](https://babeljs.io/learn-es2015/#ecmascript-2015-features-classes)
- [ ] The this keyword
- [ ] [Function expressions and arrows](https://javascript.info/function-expressions-arrows)
- [x] Handling Immutable data
- [x] Object.assign
- [x] Object Spread
- [x] map, filter, reduce
- [x] [Default arguments]()
- [x] [Properties](http://babeljs.io/docs/plugins/transform-class-properties/)
- [x] [Template strings](https://babeljs.io/learn-es2015/#ecmascript-2015-features-template-strings)
- [x] [Enhanced object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)
- [x] Object shorthand
- [x] [Rest/Spread](https://babeljs.io/learn-es2015/#ecmascript-2015-features-default-rest-spread)
- [x] [Object Rest/spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/)
- [x] [Destructuring](https://babeljs.io/learn-es2015/#ecmascript-2015-features-destructuring)

[Day 2 challenge](https://codesandbox.io/s/kykzj9m93)
- [x] Functional approaches
- [x] [Write pure functions](https://en.wikipedia.org/wiki/Pure_function)
- [x] find
- [x] [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- [x] [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
- [x] [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- [x] [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
- [x] [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
- [x] 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)
- [x] [Ramda](http://ramdajs.com) or [LoDash FP]()
- [x] [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). - [Video by Kent C Dodds](https://www.youtube.com/watch?v=kTlcu16rSLc&index=23&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
- [x] Imports
- [x] Named imports
- [ ] Wildcard imports
- [ ] Aliasing imports via `as`
- [x] Exports
- [x] Default exports
- [ ] Export * from a module
- [ ] Exporting multiple functions at the bottom of the file (looks like an object, but technically isn't).
- [ ] Barrel pattern
- [ ] Show what these look like in Babel
- [ ] ES modules must be statically analyzable (for tree shaking, autocomplete, and compile-time checks like eslint-plugin-import 👍)
- [ ] [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)

## React Introduction

- [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)
- [x] [JSX - The Other Side of the Coin](https://medium.freecodecamp.org/react-s-jsx-the-other-side-of-the-coin-2ace7ab62b98)
- [x] [React without JSX](https://reactjs.org/docs/react-without-jsx.html)
- [x] [String literals](https://reactjs.org/docs/jsx-in-depth.html#string-literals)
- [x] [Props default true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true)
- [x] [Spread attributes](https://reactjs.org/docs/jsx-in-depth.html#spread-attributes)
- [x] [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)
- [ ] [State](https://reactjs.org/docs/components-and-props.html)
- [ ] [Why treat state immutable?](https://reactjs.org/tutorial/tutorial.html#why-immutability-is-important)
- [ ] [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)
- [x] [Forms](https://reactjs.org/docs/forms.html)
* [Controlled vs Uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html)
- [x] [createClass](https://reactjs.org/docs/react-without-es6.html) and [Class components](https://reactjs.org/docs/components-and-props.html#functional-and-class-components)
- [x] [Functional components](https://reactjs.org/docs/components-and-props.html#functional-and-class-components)
- [x] [The good parts](https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc)
- [x] [The bad parts](https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c)
- [ ] Handling events
- [x] [Binding Patterns - 5 Ways to handle the `this` keyword](https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56)
- [x] [Avoid arrow functions and bind in render](https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36)
- [x] [Lifecycle methods](https://reactjs.org/docs/react-component.html#the-component-lifecycle)
- [x] [Conditionals in render](https://reactjs.org/docs/conditional-rendering.html) - [Many options](https://blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e)
- [x] Ternary
- [x] Logical &&, || in render
- [x] Multiple return/return early
- [x] Typechecking via [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
- [x] [Centralizing declarations](https://medium.freecodecamp.org/react-pattern-centralized-proptypes-f981ff672f3b)
- [x] Declaring shapes
- [x] PropTypes vs [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/)
- [x] [Default props](https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values)
- [x] [Keys](https://reactjs.org/docs/lists-and-keys.html)
- [x] [Lifecycle methods](https://reactjs.org/docs/react-component.html#the-component-lifecycle) - Handy concise descriptions in [React Cheatsheet](https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/react.js)
- [x] componentWillMount
- [x] componentDidMount
- [x] componentWillReceiveProps -> getDerivedStateFromProps
- [ ] [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)
- [x] [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)
- [ ] [Common mistakes](https://dev.to/samerbuna/reactjs-frequently-facedproblems--l5g)
- [ ] [Summary image](https://www.dropbox.com/s/0mfqjwxx11n0l4l/Screenshot%202018-03-18%2020.49.32.png?dl=0)

## 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)

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

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

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

# Feedback

- [ ] [Feedback form](http://bit.ly/helmes-react)

# Potential Additional Topics

**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

* 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

## Styling

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

# Resources:

- https://javascript.info/first-steps
- https://github.com/mbeaudru/modern-js-cheatsheet#tdz_sample