Fullstack React Notes

# p2
- JS representation of DOM, diffing in userland

# p16
- http//semantic-ui.com (bootstrap alternative)

# p19
- first annoying side quest, figure out how to make `standardjs` compatible with project
  - added standard config to package.json

# p20
- comparison of JSX vs JS (React.createElement())
- JSX is compiled into javascript

# p23
- babel introduced, transpling
  - for now using "on-the-fly" -> will explore transpiling for production later

# p26
- first mention of react-dom

# p27
- first mention of child/parent component relationships

# p28
- 'class' reserved word, hence we use className. 

# p31
- first mention of `props`
- braces are delmiters

# p35
- first example using Array.prototype.map()
- first example using `key` attribute/property

# p39
- "a child does not own its props" - one way data flow
- passing down functions in props is "the canonical manner"

# p41
- onClick handler first mentioned
- `this` context binding. Custom component methods contexts null
  - React binds context automatically only for defaut set of API methods

# p42
- review ES5/ES6 classes https://gist.github.com/remarkablemark/fa62af0a2c57f5ef54226cae2258b38d

# p43
- "state" introduced

# p44
- this.setState() introduced

# p45
- contrast of components not owning props but owning state

# p46
- react lifecycle methods introduced

# p47
- this.setState() required for state modification

# p49
- first mention of javascript pass by reference
- Array.prototype.concat() > push(), concat doesn't mutate

# p53
- babel plugin: transform-class-properties
- introduction of babel plugins and presets
- babel-standalone
  - default uses 2 presets:  (preset set of plugins used to support particular lang features)
    - es2015
    - react

# p54
- javascript features stages (1-4)
- https://github.com/tc39/proposal-class-public-fields
  - https://github.com/tc39/proposal-class-fields (stage 3)
- had to add to package.json:
```
"standard": {
  "parser": "babel-eslint",
  "globals": [
    "React",
    "ReactDOM"
  ]
}
```
and install babel-eslint (--save-dev)
side read: https://itnext.io/property-initializers-what-why-and-how-to-use-it-5615210474a3
- method definition order matters

# p61
- new project steps to work with standardjs
  - npm install babel-eslint eslint --save-dev
  - add ^ standard prop to package.json
- skipping jsx-a11y/label-has-for (TODO read)

# p66
- https://en.wikipedia.org/wiki/Single-responsibility_principle
- https://blog.cleancoder.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html
  - "We want to increase the cohesion between things that change for the same
    reasons, and we want to decrease the coupling between those things that
    change for different reasons.
- TimersList & TimersDashboard components

# p67
- ToggleableTimerForm component

# p69
- EditableTimer component, child either Timer or TimerForm
- remame TimerList to EditableTimerList

# p71
- layout of steps to build app from scratch
  - good first step, define heirarchy, then build static version
- in this ch example top component will talk to server (TimersDashboard)

# p77
- react property defaultValue

# p81
- bottom level components known as leaf components

# p82
- https://reactjs.org/docs/thinking-in-react.html
  - also references single responsibility principle
  - build top down or bottom up
  - if passed in from parent via props not state?

# p83
- forms specia state managers (stateful situation even when properties are passed down from parent)
- sometimes make parent components just for holding state

# p84
- TimersDashboard logical home of state not EditableTimerList because of need to create

# p91
- avoid initializing state of input field to `undefined`
- introduction of input fields initialized by state becoming out of sync

# p92
- React onChange attribute
- combination of `value` and `onChange` attributes is how form elements are handled in react

# p96
- noticing naming strategy
  - name of method passed down to child: `onSomethingSomething` (comes in on props)
  - name of custom component method that "calls up" `handleSomethingSomethin`
  - EX: <foo onSomethingSomething={this.handleSomethingSomething}></foo>

# p108
- `forceUpdate` introduced
- `componentDidMount` `componentWillUnmount`

# p112
- another example of 'wiring up' event handling propagation from child to parent components

# p122
```
NOW="$(date +%s)000"
# UUID=$(uuidgen | tr '[:upper:]' '[:lower:]')
UUID="a73c1d19-f32d-4aff-b470-cea4e792406a"
DATA=$(printf '{"start":%s,"id":"%s"}' $NOW $UUID)
curl -X POST \
  -H 'Content-Type: application/json' \
  -d "$DATA" \
  http://localhost:3000/api/timers/start
```

# p126
- since I was last paying attention, AJAX handled by "fetch" object/api in browsers

# p130
- JS Date object doesn't stringify as presented in book?

# p135
- The virtual DOM introduced, tree of React elements
- virtual dom vs shadow dom
- https://www.webcomponents.org/community/articles/introduction-to-shadow-dom
- https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=en

# p141
- introduction of ReactText object

# p143
- Explanation of react parser and jsx (javascript syntax extension)

# p146
- JSX attributes need values, ex:
`<input name='foo' disabled={true} />` {true} required

# p147
- spread syntax 好用 <Component {...props} />

# p148
- recommendation npm package `classnames`
- for/htmlFor gotcha
- html entitites/emoji "gotcha"

# p150
- html element attributes must be prefixed with `data-`

# p151
- aria accessability attributes
- TODO: read links on p151

# p153
- contrast of ReactComponent vs ReactElement, ReactComponent.render() returns ReactElement

# p157
- `context` introduced "implicit props"

# p158
- `propTypes` introduced

# p159
- proptypes can validate simple scalar types or do more complex validations
- `defaultProps`

# p160
- pass context to all kids: `childContextTypes` and `getChildContext`

# p162
- example of `childContextTypes` and `getChildContext()` in a component

# p163
- `contextTypes` in child element tells react what context properties the child wants
so in short:
PARENT: [childContextTypes{} + getChildContext()] --> CHILD: [contextTypes{}]

# p164
- first example of require() on css file

# p165
- functional stateless components
- context global potential good use case: logged in user

# p169
- render function onClick value calls a func that returns a func

# p171
- webpack CSS encapsulation

# p172
- stateful components required class property `state`

# p173
- remember constructor run once and before component mounted

# p174
- *pass function to setState(), when state update depends on current state, preferable to pass function
- setState asynchronous
- example of user spamming the decrement button faster that state asynch updates
```
this.setState((prevState) => {
  return {
    value: prevState.value - 1
  }
})
```

# p176
- mitigate/minimize complex states build apps single stateful component composed of stateless components

# p177
- extracting some functionality of Switch to stateless component Choice

# p179
- props.children, sort of 'transposing' elements
EX:
<Container>STUFF</Container
class Container extends React.Component {
  render () {
    return (
      <div className='container'>{this.props.children}</div>
    )
  }
}
^ "STUFF" will be wrapped in div.container

# p180
- propTyes.oneOf()
static propTypes = {
  children: PropTypes.oneOf([...])
}

# p181
- React.Children.map()
- React.Children.forEach()
- React.cloneElement()
- React.createElement()

# p182
- example of "wrapping" each element in a list of child elements with a wrapper component
  - makes use of React.Children.map()

# p183
- React.Children.toArray()

# p184
- coming in next ch, lifecycle methods like `componentWillUpdate()` - useful for stuff like form validation

# p188
- SyntheticMouseEvent && .nativeEvent (cross browser standardization wrapper)

# p189
- onMouseMove, (other event handler props listed) - also other groups of events (ex keyboard, focus, animation, transition, etc)

# p191
- shared event handler func for button (using event object to determine which button clicked)

# p192
- using 'refs' property to access DOM elements in a component (useful in forms for getting values)

# p195
- must use `key` property when children in iterator (read Dynamic Children docs)

# p196
- controlled v/ uncontrolled components (text field accessed via event object) (react is not controlling the input field, therefore uncontrolled)

# p197
- converting form elements to controlled has advantages, validation, localstorage for persisting 1/2 completed

# p199
- Create ReactComponent for individual form elements to do realtime validation

# p210
- introduce componentWillReceiveProps() lifecycle method

# p212
- exploration of validation at field and form level

# p218
- CouseSelect component, heirarichal w/ server-side data
- `_loading` naming convention used to indicate presentational state

# p219
- another example of `componentWillReceiveProps()` - when parent component will pass in list of "courses" per department

# p221
- splitting render() function into parts

# p222
- `...this.state.courses.map((course, i) =>` example of spread operator to populate a list

# p227
- example of lazily enforced ENUM variable

# p229
- localStorage

# p231
- example of inline object literal selection for reactElement: {{SAVING: <>, ERROR: <>}[STATE]}

# p233
- dun dun dun... REDUX
- redux reducers and actions
- moving component state to redux store (now read-only props)

# p234
- REDUX action types, corresponding action creator functions

# p235
- asynchronous action creators -> return functions that dispatch actions
- asynchronous action creators not supported by default, `redux-thunk` middleware

* It's weird that the book just dives into talking about reduct action creators and reducers without explaining them

asynch action creators return functions -> these functions call action creators -> these AC's call 'dispatch()' when then calls the reducer

# p238
- moving to using redux, components wont interact with API client at all and shift dependence from component-level state to props

# p242
- `const store = createStore(reducer, applyMiddleware(thunkMiddleware))`
- react-redux -> connect()
  - mapStateToProps: definies mapping store -> props
  - mapDispatchToProps: connection between props.onSubmit() and dispatch action creator

# p244
- redux-store -> Provider: component that makes store available to children
- various form module projects

# p247
- webpack modules

# p249
- everyone loves webpack
- Create React App project

# p251
- Create React App 'eject' feature

# p256
- example of webpack requiring non js files
- book indicates ReactComponent is module (App)

# p257
- heart-webpack project index.js why `React` imported not used? answer: JSX resulting transformation uses it

# p262
- breakdown of how webpack bundles various files. bundle is served from server on the fly.

# p270
- source maps, uglification, minification

# p284
- webpack development proxy convenient way to avoid dealing with CORS

# p306
- book focuses primarily on unit tests instead of integration tests (tests components)
- shallow rendering, not actually using the DOM just using the virtual DOM for testing
  - doesn't instantiate children
  - `react-test-renderer` and `Enzyme`
```
const wrapper = Enzyme.shallow(
  <App />
)
```

# p316
- Enzyme contains() method explained with test 
- containsMatchingElement()

# p318
- wrapper.find() method demo'd

# p322
- behavior-driven style

# p323
- demonstration of Enzyme API simulate browser UI interaction (populate text in input) simulate()

# p333
- input.simulate() will re-render so any cached find() returned Enzyme Wrapper elements will be stale

# p354
- jest has a mocking library. Convenience method will mock all function properties:
`jest.mock('../src/Client')`
* zone out sometimes because too complicated (requiring a lot of side googling) and sometimes because way too simple

# p357
- "antipode"... had to google that. Just say "opposite"...

# p362
- shallow rendered components do not automaticall rerender when state changes like normally rendered components
- must call ShallowComponent.update() after simulate()

# p375
- nightwatch.js looks interesting

# p378
- basic SPA stuff

# p390
- History.js cross browser compatible history API library

# p398
- second object passed to stateless functional component is `context`

# p400
- I'm initially slightly confused about the "redirect" component

# p409
- `exact` attribute for route components

# p410
- Route components wrapped in Switch component: only first matching Route will be displayed

# p432
- DRY component strategy (close button album component)

# p437
- NavLink component introduced, automatically adds style attributes (activeClassName)

# p440
- had to replace the book provided spotify app id and secret with one of my own prob bc rate limiting

# p447
- PrivateRoute component concept introduced

# p448
- Higher order component, component that wraps another component

# p451
- redirect state, redirect app back to component that redirected to a login component

# p457
- component-state paradigm
- "Flux is a design pattern" predecessor: MVC

# p458
- FLUX: action -> dispatcher -> store -> view \/
          ^------------------------------------|

# p459
- Redux is the community favorite implementation of flux
- Redux is like 100 lines of code
- All application data called state which lives in store

# p460
- views emit actions
- new state is created (merging old state with action) by reducer

# p467
- In react, only store has access to reducer
- redux.createStore()

# p482
- introduction of "observer" pattern
* running my finger across pages is helpful for focusing

# p490
- moving from passing functions down to child components for state modification to allowing
  child components to directly touch the store

# p516
- Example of keeping reducer a pure function and not mutating objects when dealing with updating properties on nested state objects

# p517
- Discussion of spread operator for objects

# p528
- reducer composition

# p529
- top level reducer "reducer", sub-reducers namespaced by state property
- EX:
  - state.activeThreadId -- activeThreadIdReducer()
  - state.threads -- threadsReducer()

# p541
- moving initialState into reducers

# p547
- presentational vs container components
  - presentational just render HTML, don't know about store
  - presentational accepts props from container component

# p548
- container: <ThreadTabs>, presentational: <Tabs>

# p554
- approach isolates all knowledge of redux to container components

# p555
- exampe of presentational component composed of 2 child presentational components
- TextFieldSubmit is a class component that's also a presentational component*

# p561
- react-redux glue container-presentational components
- react-redux.connect generates container components

# p562
- Provider component, wrap top level component in this. Made available to all child components
  via context

# p571
- Covering final callback function to connect, merging stateProps and dispatchProps

# p573
- introduction of the action creators pattern

# p575
- benefit action creators, list all possible actions in one place

# p581
- graphql type system: living form of documentation

# p591
- graphql queries must be specified in way that is entirely scalar types

# p592
- graphql field arguments can be complex objects not just scalar types

# p599
- in graphql, all nodes should have globally unique ID's. This allows top level field to query nodes arbitrarily by id

# 600
- top level "viewer" field, current user and connections to user

# 619
- `__schema` & `__type` introspection meta field

# p621
- GraphQL type system tracks whether types can be null or not
- logical code errors in book examples [key/id]

# p631
- GraphQL node interfacet `resolveType` function - informs graphql engine what node type to return

# p637
- graphql can "look ahead" to do JOINS

# p539
- argument `info` to resolve() no longer has `.fieldASTs` property -- renamed .fieldNodes

# p653
- "GraphQL schemas should not handle authorization logic directly...that responsibility should fall into the underlying data loading libraries or services."

# p659
- graphql-relay-js package introduced (npm install graphql-relay)

# p661
- N+1 query problem: example, N database queries for finding ID's and then 1 query each for the related object

# p662
- DataLoader library introduced https://github.com/graphql/dataloader
  - intelligently batches together multiple database requests

# p667
- Relay, the glue between graphql and react

# p673
- react-relay has a lot of major releases... we're on 8.0? Book might be fairly out of date

# p674
- relay/redux essentially incompatible, both want to be central store of state
- Relay additional GraphQL requirements
  - 1. fetch any object by id
  - 2. traverse relationships between objects with pagination
  - 3. structure around changing data with mutations

# p680+
* concerned by how out of date the section on relay appears to be. Will read but then do more follow up.

# p690
- `babel-relay-plugin` will verify query fragments in container components at compile time
  - does this with a local (client-side) copy of the schema (exported from the server)

# p692
- schema.json - for client
- schema.graphql - human readable

# p695
- book is going to use `react-router` and `react-router-relay`

[skipping 700-733 section on relay, it's out of date. I'm going to learn it with online resources]

# p736
- routing in react native is conceptulized around "layers" instead of URLs