Navigating the React Ecosystem
0 likes550 views
The document discusses various React packages and tools for developers including: Redux for state management, React Router for routing, React Intl for internationalization, Reselect for selectors, Webpack for bundling, classNames for component styling, and best practices like Flux Standard Action and Immutable.js. It also provides an example of building a complex user interaction with modal authorization.
Navigating the React Ecosystem
- 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