A toolbox for developers who don't have time to spend weeks finding the right package.

1. A TOOLBOX FOR DEVELOPERS WHO
DON’T HAVE TIME TO SPEND WEEKS
FINDING THE RIGHT PACKAGE
NAVIGATING THE
REACT ECOSYSTEM
FEDERICO BOND
LEAD DEVELOPER @ BITCOURT
@FEDERICOBOND

2. RATING SYSTEM
Mind blowing
You will want more of it
Excellent
Use it without doubts
Good for now
But better solutions will come up soon

3. ARCHITECTURE & STATE CONTAINER
REDUX
Reducers
Single state atom
Action creators
Several async approaches
Awesome DevTools
react-redux bindings

4. ROUTING
REACT-ROUTER
Multiple backends
Nested routes
Callbacks
Redux syncing with react-router-redux

5. INTERNATIONALIZATION
REACT-INTL
Keyed messages, manual extraction
Next version adds tooling for extracting
strings
Alternative: gettext approaches

6. SELECTORS
RESELECT
Selectors a la Nuclear.js

7. BUNDLING
WEBPACK
Batteries included
ES6 transpiling (and flow!)
Hot Reloading

8. COMPONENT STYLING
CLASSNAMES
Dynamic component styling helper

9. TESTING
IT’S COMPLICATED
Jest vs Karma + Jasmine
ReactTestUtils vs enzyme

10. ONE MORE THING…
BEST PRACTICES
▸ Use Flux Standard Action (FSA)
▸ Avoid side-effects in reducers
▸ Split presentational and container components
▸ Use Immutable.js to enforce immutability

11. THANKS
FEDERICO BOND
LEAD DEVELOPER @ BITCOURT
@FEDERICOBOND

12. CASE STUDY
BUILDING A COMPLEX INTERACTION
▸ User starts an action that requires authorization
▸ App opens password-required modal
▸ User types password
▸ User presses enter or clicks Accept
▸ App closes modal or shows password error
▸ User can close the modal to abort action
▸ Application continues with action on success