The React Universe

The React Universe

Packages to improve your react application

1e3f36cacc64d0a924cdbb3fdc59e8af?s=128

move:elevator

October 12, 2017
Tweet

Transcript

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

    abstract…
  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

  5. A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

  6. React on https://www.npmjs.com/package/react

  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 https://www.npmjs.com/package/react-redux

  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: https://github.com/fjogeleit/react-universe- talk/blob/03-react-redux/src/App.js Live Example

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

  15. redux-observable on https://www.npmjs.com/package/redux-observable

  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: https://github.com/fjogeleit/react-universe- talk/blob/04-react-observable/src/App.js Live Example

  18. recompose functional- and high order component utilities

  19. recompose on https://github.com/acdlite/recompose

  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: https://github.com/fjogeleit/react-universe- talk/blob/05-recompose/src/App.js Live Example

  22. Questions?

  23. Resources • react Introduction: 
 https://survivejs.com/react/getting-started/introduction- to-react/ • react-redux: 


    http://redux.js.org/docs/basics/UsageWithReact.html • redux-observable
 https://redux-observable.js.org/ • recompose
 https://github.com/acdlite/recompose • example code repository:
 https://github.com/fjogeleit/react-universe-talk Content Resources
  24. Resources • react logo: 
 https://upload.wikimedia.org/wikipedia/commons/a/a7/ React-icon.svg • redux logo:

    
 https://raw.githubusercontent.com/reactjs/redux/master/ logo/logo.png • redux-observable logo
 https://github.com/redux-observable/redux-observable/ blob/master/logo/logo.png Image Resources