Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment