react-redux-recycle.md

Afternoon All,

Thank you for attending/avoiding (delete as appropriate) my bewildering talk on React and Redux.

Here’s the application I built in a day to demonstrate the wonderful world of React/Redux: https://github.com/thomasmichaelwallace/Retrospectively

If you want to relive the presentation, start at BrownBag.md and follow the instructions. If you want to run it, follow the vague guidance in ReadMe.md.

Below is a semi-curated long list of resources/libraries for anyone who would like to learn more.

The libraries themselves:

• React: https://facebook.github.io/react/docs/getting-started.html
• Redux: http://redux.js.org/index.html

Some invaluable articles I read along the way:

• A walkthrough of how to write Redux from scratch [30 mins]: https://github.com/tayiorbeii/egghead.io_redux_course_notes
• Dan Abramov on Medium (Wrote pretty much everything): https://medium.com/@dan_abramov
• Issue #419 (A big discussion on who to use react-redux’s connect properly): reduxjs/redux#419
• Full stack redux tutorial (Massively detailed, with BDD inline; I still use this when I have trouble): http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

Bootstraps/boilerplates:

• React Redux Universal Hot Example (Does all the things; good to browse if you can’t get something to work): https://github.com/erikras/react-redux-universal-hot-example
• React/Redux/Electron (For desktop apps): https://github.com/chentsulin/electron-react-boilerplate

Libraries anyone developing in React should at least be aware of:

• react-redux (React bindings for Redux): http://redux.js.org/docs/basics/UsageWithReact.html
• Flux Standard Actions (standard way of describing actions): https://github.com/acdlite/flux-standard-action
• redux-actions (removes boiler plate for implementing FSA): https://github.com/acdlite/redux-actions
• Reselect (a memorised selector): https://github.com/reactjs/reselect
• … anything in the https://github.com/reactjs repos
• Immutable (Immutable collections for JS): https://facebook.github.io/immutable-js/
• electron-prebuilt (Turn R/R into a desktop application): https://github.com/electron-userland/electron-prebuilt
• React Native (Use React to build iOS and Android): https://facebook.github.io/react-native/
• React-Bootstrap (Bootstrap components for React): https://react-bootstrap.github.io/
• Material-UI (Material Design components for React): http://www.material-ui.com/
• redux-react-firebase (Redux middleware for realtime databases): https://github.com/tiberiuc/redux-react-firebase

R/R testing tools:

• Jest (Facebook’s “official” testing library): https://facebook.github.io/jest/
• enzyme (Shallow render and query React elements): https://github.com/airbnb/enzyme

React/Redux development tools:

• redux-devtools (Monitor redux’ state): https://github.com/gaearon/redux-devtools
• react-devtools (Chrome Developer Tools extension): [link]
• react-hot-loader (Live code editing for react): https://github.com/gaearon/react-hot-loader

The modern Javascript webstack:

• Webpack (a module bundler/compiler): http://webpack.github.io/docs/tutorials/getting-started/
• Babel (a transpiler to allow you to use js v.Next today): https://babeljs.io/
• ECMAScript 6 (the latest version of JavaScript): http://es6-features.org/
• ES7 object spread properties (A proposed enhancement): https://github.com/sebmarkbage/ecmascript-rest-spread
• eslint (Automated code criticiser): http://eslint.org/
• node (the JavaScript run time): https://nodejs.org/en/
• npm (Node’s package manager and script runner): https://www.npmjs.com/

Event driven databases:

• Firebase (a realtime/notifying database): https://www.firebase.com/
• Pusher (a subscriable database): https://pusher.com/
• RethinkDB (another realtime database): https://www.rethinkdb.com/

Some more cool things React related:

• React-Haskell (Nope, I’m not joking): https://github.com/joelburget/react-haskell
• ReactJS.NET (Bridge for React to C#): http://reactjs.net/
• Cycle.js (R/R for functional purists): http://cycle.js.org/
• elm (Functional programming language for websites): http://elm-lang.org/

Some strong opinions:

• Evangelically prefer React’s stateless functions ({ …props }) => ( );
• The Immutable library is more hassle than it’s worth
• Jest is slow, and if you’re using stateless functions you don’t even need its mocking framework. Use Jasmine/Karma instead.
• Read and freely copy from boilerplates, but don’t use them.
• Forget bower, grunt and gulp, you can do it all centrally in npm
• Treat npm -g like rm rf; it is not your friend
• VSCode is a surprisingly good editor.

Tom = Reduce(Tom, { type: "STOP_WRITING_REALLY_LONG_EMAIL" });