The React Universe

Packages to improve your react application

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