The React Universe

The React Universe

Packages to improve your react application



October 12, 2017


  1. The React Universe Packages that help developing React projects.

  2. Frank Jogeleit Softwareentwickler @move:elevator

  3. Agenda • react introduction • react-redux: an interface to connect

    react with redux • redux-observable: React + Redux + RxJS = Awesome • recompose: functional- and high order component utilities
  4. React an Introduction


  6. React on

  7. React • Create component based UserInterfaces. • … uses an

    Virtual DOM implementation to manage the application and rerender the minimal set of components after an state change. • … implements components in its own language 
 called JSX. Features
  8. React JSX Stateful Class Component

  9. React JSX Stateless Function Component

  10. react-redux an interface to connect react with redux

  11. react-redux on

  12. react-redux • …connects components with the redux store • Get

    access of the whole state or single parts in each component. • …simplifies the dispatch of actions in components. • …supports separating application code (container) from presentation components. Theory
  13. react-redux GitHub Repo: talk/blob/03-react-redux/src/App.js Live Example

  14. redux-observable React + Redux + RxJS = Awesome

  15. redux-observable on

  16. redux-observable • RxJS 5 based middleware for redux. • „Compose

    and cancel async actions to create side effects and more.“ - Official description • Transform dispatched actions to RxJS Streams and add a new layer to redux called „epic“. So you can handle actions the reactive programming way. • Cancel ajax requests or retry if the request failed. • Dispatch different actions on success or error. Theory
  17. redux-observable GitHub Repo: talk/blob/04-react-observable/src/App.js Live Example

  18. recompose functional- and high order component utilities

  19. recompose on

  20. recompose • … simplifies the nesting of multiple high order

    components with compose() • …separate the definition of logical component code from its rendering with high order components like withHandlers • …supports common patterns like: • composition over inheritance • prefer properties instead of state • write functional components Theory
  21. recompose GitHub Repo: talk/blob/05-recompose/src/App.js Live Example

  22. Questions?

  23. Resources • react Introduction: to-react/ • react-redux: • redux-observable • recompose • example code repository: Content Resources
  24. Resources • react logo: React-icon.svg • redux logo: logo/logo.png • redux-observable logo blob/master/logo/logo.png Image Resources