navigating the react ecosystem
TRANSCRIPT
A TOOLBOX FOR DEVELOPERS WHO DON’T HAVE TIME TO SPEND WEEKS FINDING THE RIGHT PACKAGE
NAVIGATING THE REACT ECOSYSTEM
FEDERICO BONDLEAD DEVELOPER @ BITCOURT @FEDERICOBOND
RATING SYSTEM
Mind blowingYou will want more of it
ExcellentUse it without doubts
Good for nowBut better solutions will come up soon
ARCHITECTURE & STATE CONTAINER
REDUX
Reducers
Single state atom
Action creators
Several async approaches
Awesome DevTools
react-redux bindings
ROUTING
REACT-ROUTER
Multiple backends
Nested routes
Callbacks
Redux syncing with react-router-redux
INTERNATIONALIZATION
REACT-INTL
Keyed messages, manual extraction
Next version adds tooling for extracting strings
Alternative: gettext approaches
SELECTORS
RESELECT
Selectors a la Nuclear.js
BUNDLING
WEBPACK
Batteries included
ES6 transpiling (and flow!)
Hot Reloading
COMPONENT STYLING
CLASSNAMES
Dynamic component styling helper
TESTING
IT’S COMPLICATED
Jest vs Karma + Jasmine
ReactTestUtils vs enzyme
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
THANKSFEDERICO BOND LEAD DEVELOPER @ BITCOURT @FEDERICOBOND
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