navigating the react ecosystem

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