Another big ol' list of React resources
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
React cheatsheet
redux cheatsheet
LONG full stack redux tut
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
Mixins are dead - use composition
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
Validating propTypes of nested children
ReactJS jsdoc
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
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.
Watching for state changes
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
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
Creating a modal for React
"Is it a good idea to access redux store in route?"
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
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
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
Refactoring Redux
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
-
https://github.com/reactjs/react-router/tree/master/examples/dynamic-segments
-
http://randycoulman.com/blog/2016/02/02/composing-routes-in-react-router/
Redux saga es6 generators vs es7 async
Async Middleware