Agenda

# Day 1

## Intro

- [x] Who is this guy?
- [x] Name tags
- [x] Introductions: Name, JS & React experience, what you're most excited to learn this week.
- [ ] What are you building?
- Summary from Chris, Lead UI engineer: I was brought in rewrite the current application in React and that has been my focus for the last few years. The current app (with the unfortunate name of “Greenfield”) is written in Angular 1.x and ES3/5 with no build/bundling system beyond some simple gulp tasks. The onshore team is Gurdeep Art Simon and myself – all 3 have been splitting their time between the angular and react app I have been making, I’ve been full time on the react product.

- The application is essentially a “portal” SPA of analytics data - users can do different things to see visualizations of data in chart/table and graph form. Its pretty extensive and has many “pages” and makes a lot of different ajax calls. The api (python) is pretty mature and has good documentation – the version 2 app will of course reuse that.

- The new app (“Greenfield-react”) has been coming along well, but has a lot more to go. It was bootstrapped by leveraging a product called Praxis – that is a react starter kit for Target and there is a team maintaining it that will most likely be a part of any training you do here. Praxis is essentially an wrapper around an ejected create-react-app with many Target specific things in it. It uses material-ui and so does Greenfield – we are using material-ui-next for react components. A few things I have done different/extended from Praxis:

- Ducks pattern for redux code
- Sagas (but not decorators/other “ES7” things) for ajax with axios
- SCSS in place of praxis’s JSS
- Container-component pattern
- Pre-commit npm package and all code must pass eslint (based off of praxis rules using standardjs) and unit tests
- Everyone must use prettier

* Browser support
- [ ] What is your development background?
* Biggest frustrations with current dev setup
* What is your current JS experience?
- [ ] Why did you select React?
- [ ] What do you already know about React? Are you comfortable with the prerequisites above?
- [ ] What preferences do you already have?
- [ ] Types
- [ ] State management
- [ ] Styling
- [ ] Testing
- [ ] Server rendering
- [ ] Mobile
- [ ] 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.

- [ ] Flow
* Introduce concept
* I show example
* Challenge: You try
* Review
- [ ] Review agenda
- [ ] Breaks ☕️🍩🍕🏃‍♂️💨🍺

## Development Environment

Discuss options and review development environment for session
- [ ] Install [Node](http://nodejs.org), [Git](http://git-scm.com).
- [ ] Git overview
- [ ] 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)
- [ ] [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

## Modern JS with React
- [ ] [The history and future of JS](https://en.wikipedia.org/wiki/ECMAScript)
- [ ] [Var vs let](https://javascript.info/var) and [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) Block scoping. Const should be default.
- [ ] [Comparisons](https://javascript.info/comparison)
- [ ] [Conditional Operators](https://javascript.info/ifelse)
- [ ] [Logical Operators](https://javascript.info/logical-operators)
- [ ] The this keyword
- [ ] [Function expressions and arrows](https://javascript.info/function-expressions-arrows)
- [ ] [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)
- [ ] [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
- [ ] [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
- [ ] Object literal enhancements (object shorthand, function declarations)
- [ ] Functional approaches
- [ ] [Write pure functions](https://en.wikipedia.org/wiki/Pure_function)
- [ ] [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)
- [ ] find
- [ ] [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)
- [ ] Object.assign
- [ ] Object Spread
- [ ] map, filter, reduce
- [ ] Pure functions
- [ ] [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)
- [Final challenge](https://codesandbox.io/s/kykzj9m93)

## React Design Patterns
- [ ] Noteworthy React Features
- [x] [Handle app-wide data via Context](https://reactjs.org/docs/context.html)
- [x] [Catch errors via Error Boundaries](https://reactjs.org/docs/error-boundaries.html)
- [x] [Eliminate needless wrapper divs with Fragments](https://reactjs.org/docs/fragments.html)
- [x] [Render outside the parent's DOM via Portals](https://reactjs.org/docs/portals.html)
- [x] [Functional components](https://reactjs.org/docs/components-and-props.html#functional-and-class-components)
- [x] [Use refs to manipulate DOM directly](https://reactjs.org/docs/refs-and-the-dom.html)
- [x] [Props default true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true)
- [x] [Avoid derivable state]()
- [x] State best practices
- [x] Use instance vars for data that's not used in render
- [x] [Use functional setState to get prevState](https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b#.47r5k656u)
- [x] [Init state without a constructor](http://stackoverflow.com/questions/35662932/react-constructor-es6-vs-es7)
- [x] [Avoid state that can be calculated on demand](http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html)
- [x] Avoid mutating state - remember to clone before mutation. Mutation fights
- [ ]
- Performance
- [x] Use shouldComponentUpdate/PureComponent. But only use after measuring result.
- [x] Avoid bind in render
- [x] Prefer constructor bind if there will be a massive number of instances. (otherwise, suggest class fields for convenience)
- [ ] [Use ESI to reduce DB calls by selectively caching pieces of the page via an HOC](https://twitter.com/housecor/status/984239691003236353)
- [x] Use selectors for Redux
- [ ] Normalize your Redux store
- [ ] Structure your Redux store by key for fast access
- [ ] Consider Preact
- [ ] Use [Barrel pattern](https://basarat.gitbooks.io/typescript/docs/tips/barrel.html) to shorten imports
- [ ] [Component folder pattern](https://medium.com/styled-components/component-folder-pattern-ee42df37ec68)
- [ ] [JSX IIFE Debugger pattern](https://twitter.com/_ericelliott/status/974866657322479616?s=21)
- [ ] [Spread attributes](https://reactjs.org/docs/jsx-in-depth.html#spread-attributes)
- [ ] [Four immutable approaches](https://medium.freecodecamp.org/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5)
- [ ] Centralized change handler
- [ ] [Container vs Presentation components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) (aka smart vs dumb)
- [ ] [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)
- [ ] [Conditionals in render](https://reactjs.org/docs/conditional-rendering.html) - [Many options](https://blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e)
- [ ] 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/)
- [ ] [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)
- [ ] [The 8 Key React Component Decisions](https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594)
- [ ] [Higher order components](https://codesandbox.io/s/ym50n3y8zj)
- [ ] [Render props / function as child](https://codesandbox.io/s/ym50n3y8zj)

## Third Party Libraries
- Component libraries
- React-loadable
- Awesome react

## Redux Intro

- [ ] Actions
- [ ] Action creators
- [ ] Action constants
- [ ] Store
- [ ] Reducers
- [ ] Immutable data structure approaches
- [ ] immutableStateInvariant
- [ ] Connect
- [ ] mapStateToProps
- [ ] mapDispatchToProps
- [ ] Testing
- [ ] Ducks
- [ ] Selectors / Reselect

## Redux Thunks

# Day 2

## Redux Saga
- Slides
- Generators
- Effects
- Helpers

## Reusable React 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

## Creating a mock API framework

## Automated Testing [Slides](https://www.dropbox.com/s/ccx0g8jgt7hvh2q/Testing%20React%20components.pptx?dl=0)

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

## Custom React development framework
- [ ] Review existing company specific framework and patterns

# Other:

- Tips & Tricks to work with any visualization libraries which involve large volume of data being rendered in the visualizations specifically d3 libraries
- Any kind of caching techniques we can leverage.

# Feedback
[Feedback Form](http://bit.ly/target-react)

Start by reviewing the agenda in this issue, including the Day 1 and Day 2 sections and their unchecked topics. No repository files or tests are identified. The work is complete only when the intended agenda scope and specific documentation changes are defined and the outstanding topics are resolved.

Written by the indexing model from the issue text.