React/Redux resources and links

gistfile1.md

Another big ol' list of React resources

• https://github.com/markerikson/react-redux-links

Tutorials

• https://medium.com/@firasd/quick-start-tutorial-using-redux-in-react-apps-89b142d6c5c1
• https://github.com/firasd/react-redux-tutorial
• https://github.com/reactjs/react-redux
• http://www.youhavetolearncomputers.com/blog/2015/9/15/a-conceptual-overview-of-redux-or-how-i-fell-in-love-with-a-javascript-state-container

React redux project structure

• https://medium.com/@mmazzarolo/my-journey-toward-a-maintainable-project-structure-for-react-redux-b05dfd999b5#.29uqidjvz

React cheatsheet

• http://ricostacruz.com/cheatsheets/react.html

redux cheatsheet

• http://ricostacruz.com/cheatsheets/awesome-redux.html

• https://github.com/gajus/canonical-reducer-composition

LONG full stack redux tut

• http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

Redux best practices

• https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e#.z1kdhv1re <— good best practices here, I agree. one cool thing to do is to clear all stores on a route action, since all reducers listen to all actions Working with Data Structures - interesting references here
• reduxjs/redux#815
• http://stackoverflow.com/questions/32634320/how-to-structure-redux-components-containers
• http://redux.js.org/docs/FAQ.html
• http://konkle.us/state-management-with-redux/
• https://blog.risingstack.com/react-js-best-practices-for-2016/
• reduxjs/redux#1171
• reduxjs/redux#749
• https://www.reddit.com/r/javascript/comments/3p9o0j/redux_best_practices/
• http://andrewhfarmer.com/react-ajax-best-practices/ <— best practices for various AJAX / async requests
• http://stackoverflow.com/questions/35032204/react-redux-connect-to-multiple-components-best-practices Investigate using Redux for pseudo-local component state
• reduxjs/redux#159
• http://www.code-experience.com/problems-with-flux/

Example of handling page-level responses to lower-component states

• https://github.com/erikras/redux-form

Mixins are dead - use composition

• https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.rmfg79fm8

Reselect - selectors for navigating the state tree and avoiding expensive calculations on the entire state tree - memoized selectors. You also want to use them so that if your store shape changes it’s easy to update the selector functions instead of rewiring a whole bunch of code. Selector functions are a natural decoupling layer.

• https://github.com/reactjs/reselect
• http://redux.js.org/docs/recipes/ComputingDerivedData.html
• http://blog.startifact.com/posts/a-brief-history-of-reselect.html

Passing props to deeply nested children

• http://jaketrent.com/post/send-props-to-children-react/
• remix-run/react-router#1857
• remix-run/react-router#1531
• http://stackoverflow.com/questions/30440297/react-js-passing-nested-props-into-react-createelement
• http://stackoverflow.com/questions/26120230/reactjs-how-to-pass-global-data-to-deeply-nested-child-components
• http://stackoverflow.com/questions/20913288/react-js-how-to-pass-properties-object-to-child-component

Art of reducers

• http://blog.javascripting.com/2016/02/02/encapsulation-in-redux/

Validating propTypes of nested children

• http://stackoverflow.com/questions/26923042/how-do-you-validate-the-proptypes-of-a-nested-object-in-reactjs

ReactJS jsdoc

• https://www.reddit.com/r/reactjs/comments/3zfh3c/jsdoc_for_reactjsx/

Redux state shape "How to separate UI and application state in Redux”: - http://stackoverflow.com/questions/33556252/how-to-separate-ui-and-application-state-in-redux - have a separate “ui” subtree

• https://github.com/paularmstrong/normalizr
• https://www.reddit.com/r/reactjs/comments/48k852/help_designing_redux_state_for_a_single_page/ Real world redux
• https://www.youtube.com/watch?v=zmN0Vhx2Jgg&feature=youtu.be&t=1h3m18s
• https://github.com/uniqueway/redux-crud-store
• http://stackoverflow.com/questions/33940015/how-to-choose-the-redux-state-shape-for-an-app-with-list-detail-views-and-pagina <— answered by Dan Abramov, good approach
• https://tonyhb.gitbooks.io/redux-without-profanity/content/hard_and_fast_rules_for_apps.html

Sharing state between Redux reducers

• https://invalidpatent.wordpress.com/2016/02/18/sharing-state-between-redux-reducers/

State is an antipattern

• https://www.reddit.com/r/reactjs/comments/3bjdoe/state_is_an_antipattern/

React component library - http://tech.adroll.com/blog/frontend/2015/11/12/rollup-react-and-npm-at-adroll.html

UI State could be managed here: - https://github.com/tonyhb/redux-ui

Interview questions and misc.

• https://medium.com/@matt.krick/solving-redux-s-shortcoming-in-150-locs-540979ce6cf9#.w2udzyf2w

Watching for state changes

• reduxjs/redux#227

Dispatching actions on route changes

• reduxjs/redux#227
• acdlite/redux-router#65
• remix-run/react-router#2101
• http://jamesknelson.com/join-the-dark-side-of-the-flux-responding-to-actions-with-actors/
• http://stackoverflow.com/questions/31268740/firing-redux-actions-in-response-to-route-transitions-in-react-router
• http://stackoverflow.com/questions/32612418/transition-to-another-route-on-successful-async-redux-action
• http://jamesknelson.com/simple-routing-redux-react/
• https://github.com/acdlite/redux-rx
• remix-run/react-router#964 (comment) <— solid, simple, semi-reactive approach

---

Reactive JS

• https://medium.com/@andrestaltz/2-minute-introduction-to-rx-24c8ca793877#.lsxhlen6x
• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
• http://queue.acm.org/detail.cfm?id=2169076
• http://reactivex.io/tutorials.html <— everything under RxJS
• http://paulstovell.com/blog/reactive-programming
• https://www.youtube.com/watch?v=XRYN2xt11Ek
• https://www.youtube.com/watch?v=8EExNfm0gt4
• http://bahmutov.calepin.co/journey-from-procedural-to-reactive-javascript-with-stops.html
• http://stackoverflow.com/questions/1028250/what-is-functional-reactive-programming
• http://www.cs.brown.edu/research/pubs/techreports/reports/CS-03-20.html

Async actions

• http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux

Routing with redux and react

• http://jamesknelson.com/simple-routing-redux-react/
• reduxjs/redux#637
• http://stackoverflow.com/questions/33205364/how-to-organize-state-with-redux-and-react-router
• http://stackoverflow.com/questions/31268740/firing-redux-actions-in-response-to-route-transitions-in-react-router?rq=1
• http://ngokevin.com/blog/redux-react-router/
• https://github.com/reactjs/react-router-redux
• http://stackoverflow.com/questions/36722584/how-to-sync-redux-state-and-url-hash-tag-params/36749963#36749963

Injecting auth requirements into specific routes

• http://stackoverflow.com/questions/35849970/reactjs-accessing-redux-store-from-routes-set-up-via-react-router

Creating a modal for React

• http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680

"Is it a good idea to access redux store in route?"

• reduxjs/redux#1336

large scale react applications

• http://blog.siftscience.com/blog/2015/best-practices-for-building-large-react-applications
• http://engineering.kapost.com/2016/01/organizing-large-react-applications/
• https://speakerdeck.com/dfguo/things-to-know-before-building-large-scale-react-dot-js-application
• https://www.reddit.com/r/javascript/comments/2la0l7/things_to_know_before_starting_a_reasonably/
• https://www.reddit.com/r/reactjs/comments/3jcdfk/has_anyone_did_any_serious_large_real_web/
• https://www.reddit.com/r/javascript/comments/49box8/reactredux_for_ultra_large_scale_apps/
• https://news.ycombinator.com/item?id=10040310
• https://news.ycombinator.com/item?id=8050440
• https://gijs.github.io/2015/08/26/lessons-learned-from-building-a-larger-app-with-react-dot-js.html
• http://jpnarowski.com/enterprise-react-redux-part-1/

react component design

• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.o9ol6a3jw
• https://gist.github.com/chantastic/fc9e3853464dffdb1e3c
• https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.3xjgwk9or
• https://medium.com/@learnreact/container-components-c0e67432e005#.5u65wgpdt
• https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.djmjp8u3m
• http://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components/
• http://stackoverflow.com/questions/25720595/extending-react-js-components

reusable react components

• http://jkaufman.io/reusable-react-components/
• https://discuss.reactjs.org/t/reusable-components/748
• http://stackoverflow.com/questions/21854938/using-mixins-vs-components-for-code-reuse-in-facebook-react
• http://facebook.github.io/react/docs/thinking-in-react.html
• http://facebook.github.io/react/docs/reusable-components.html#mixins

immutablejs w/ redux

• https://facebook.github.io/immutable-js/
• https://github.com/indexiatech/redux-immutablejs
• http://stackoverflow.com/questions/31892767/how-to-use-immutable-js-with-redux
• https://www.toptal.com/react/react-redux-and-immutablejs
• https://github.com/gcanti/tcomb

react resources

• http://reactjsnews.com/composing-components/
• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

organizing react apps

• http://engineering.kapost.com/2016/01/organizing-large-react-applications/
• https://github.com/nicolashery/example-react-app
• https://gist.github.com/ryanflorence/110d4538bf98694538de <— interesting structure
• https://reactjsnews.com/structuring-react-projects
• http://marmelab.com/blog/2015/12/17/react-directory-structure.html <— this is good
• https://www.codementor.io/reactjs/tutorial/organizing-your-react-redux-application <— includes DDD thoughts

Unit testing redux

• http://redux.js.org/docs/recipes/WritingTests.html

Unit testing React

• https://facebook.github.io/jest/docs/tutorial-react.html
• https://facebook.github.io/react/docs/test-utils.html (especially shallow rendering)
• https://discuss.reactjs.org/t/whats-the-prefered-way-to-test-react-js-components/26
• https://github.com/jesstelford/react-testing-mocha-jsdom
• https://www.toptal.com/react/how-react-components-make-ui-testing-easy
• https://github.com/robertknight/react-testing <— demo
• http://reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/
• http://stackoverflow.com/questions/31459720/how-to-test-decorated-react-component-with-shallow-rendering
• https://blog.algolia.com/how-we-unit-test-react-components-using-expect-jsx/

Enzyme Testing

• https://github.com/airbnb/enzyme
• https://medium.com/airbnb-engineering/enzyme-javascript-testing-utilities-for-react-a417e5e5090f#.p2hu8rg3m
• http://airbnb.io/enzyme/docs/api/index.html

Validation with React

• http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html
• https://react.rocks/tag/Validation
• http://stackoverflow.com/questions/24019431/how-to-properly-validate-input-values-with-react-js
• https://www.npmjs.com/package/react-validation

Redux forms

• https://github.com/erikras/redux-form

• https://www.reddit.com/r/reactjs/comments/3v9tsv/redux_or_reflux_or_composing_multiple_instances/

Testing immutableJS objects

• http://stackoverflow.com/questions/34040939/mocha-tests-using-immutable-js-are-failing-when-runned-with-karma
• reduxjs/redux#153
• http://stackoverflow.com/questions/29589753/how-to-update-element-inside-list-with-immutablejs
• immutable-js/immutable-js#493
• reduxjs/redux#153
• immutable-js/immutable-js#692

Listening to the store

• https://github.com/markerikson/redux-ecosystem-links/blob/master/store.md#store-change-subscriptions

Complex async and redux-saga

• https://shift.infinite.red/using-redux-saga-to-simplify-your-growing-react-native-codebase-2b8036f650de
• http://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es7-async/34933395
• http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout

React end-to-end testing Nightwatch.js

• https://www.syncano.io/blog/testing-syncano/

Refactoring Redux

• https://blog.boldlisting.com/so-youve-screwed-up-your-redux-store-or-why-redux-makes-refactoring-easy-400e19606c71#.1y66iekf6

Unit testing connected components

• reduxjs/redux#588
• https://jeremydmiller.com/2016/01/26/how-im-testing-reduxified-react-components/
• https://medium.com/@iamcherta/testing-async-actions-on-redux-without-following-the-manual-87d7bd804fb8#.5wqt03qsx
• http://stackoverflow.com/questions/36848831/unit-test-react-redux-connected-components
• http://stackoverflow.com/questions/33931224/redux-promise-middleware-redux-mock-store-testing

Nested components

• https://medium.com/@joshuawcomeau/efficient-nested-react-components-dd9347e9b3f3#.3tgajij2m
• http://stackoverflow.com/questions/20851533/react-js-wrapping-one-component-into-another/31564812#31564812
• http://stackoverflow.com/questions/29020863/dynamically-nesting-react-js-components

React-router dynamic routes

• https://github.com/reactjs/react-router/blob/master/docs/guides/DynamicRouting.md

• remix-run/react-router#243

• https://github.com/reactjs/react-router/tree/master/examples/dynamic-segments

• http://randycoulman.com/blog/2016/02/02/composing-routes-in-react-router/

• http://ricostacruz.com/cheatsheets/react-router.html

• reduxjs/redux#1176

Redux saga es6 generators vs es7 async

• http://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es7-async/34933395

Async Middleware

• http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34623840#34623840