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
You can’t perform that action at this time.