React Day 1

# Explore React: Day 1

## Overview
A collaborative introduction to modern JavaScript (ES2015+), React, and the key pieces of its ecosystem. The day will alternate between presentation and hands-on exercises. Attendees will get comfortable with React and modern JavaScript approaches by example, by building a React app from scratch.

## 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?
- [x] What preferences do you already have?
* Types
* State management
* Styling
* Testing
* Server rendering
* Mobile
- [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

## React Fundamentals

- [x] [Why React?](https://app.pluralsight.com/library/courses/react-big-picture/table-of-contents)
- [x] Library vs framework
- [x] [Virtual DOM](https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom)
- [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] [Props](https://reactjs.org/docs/components-and-props.html)
- [ ] [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)
- [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)
- [ ] [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)
- [x] [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
- [x] 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/)
- [x] [Default props](https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values)
- [x] [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)
- [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)

## Modern JavaScript

- [ ] [The history and future of JS](https://en.wikipedia.org/wiki/ECMAScript)
- [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)
- [ ] [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)
- [x] [Object Rest/spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/)
- [x] [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]()
- [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)
* 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)
- [x] Debugging
* Sourcemaps
* debugger;

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

## Potential Future Sessions
* Styling
* Custom development environment
* Coding standards
* Linting / Prettier
* Automated testing
* Automated build and deploy
* State management
* Redux
* MobX
* Selectors
* Thunks
* API calls
* Mock APIs
* Reusable React components
* Design
* Creation
* Sharing
* Documentation
* React Router
* Advanced React
* HoC
* Function as child / render props
* refs
* context
* reselect
* Integrating with existing codebases
* Portals
* Error handling
* Performance
* Accessibility
* Server rendering
* Advanced React
* Code and architectural reviews
* Sharing and standardizing work via npm