Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The React Universe

The React Universe

Packages to improve your react application

move:elevator

October 12, 2017
Tweet

More Decks by move:elevator

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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