The React Universe - Speaker Deck

Slide 1

Slide 1 text

The React Universe Packages that help developing React projects.  an abstract…

Slide 2

Slide 2 text

Frank Jogeleit Softwareentwickler @move:elevator

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

React an Introduction

Slide 5

Slide 5 text

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

React JSX Stateful Class Component

Slide 9

Slide 9 text

React JSX Stateless Function Component

Slide 10

Slide 10 text

react-redux an interface to connect react with redux

Slide 11

Slide 11 text

react-redux on https://www.npmjs.com/package/react-redux

Slide 12

Slide 12 text

react-redux • …connects components with the redux store • Get access of the whole state or single parts in each component. • …simpliﬁes the dispatch of actions in components. • …supports separating application code (container) from presentation components. Theory

Slide 13

Slide 13 text

react-redux GitHub Repo: https://github.com/fjogeleit/react-universe- talk/blob/03-react-redux/src/App.js Live Example

Slide 14

Slide 14 text

redux-observable React + Redux + RxJS = Awesome

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

redux-observable • RxJS 5 based middleware for redux. • „Compose and cancel async actions to create side effects and more.“ - Ofﬁcial 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

Slide 17

Slide 17 text

redux-observable GitHub Repo: https://github.com/fjogeleit/react-universe- talk/blob/04-react-observable/src/App.js Live Example

Slide 18

Slide 18 text

recompose functional- and high order component utilities

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

recompose • … simpliﬁes the nesting of multiple high order components with compose() • …separate the deﬁnition 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

Slide 21

Slide 21 text

recompose GitHub Repo: https://github.com/fjogeleit/react-universe- talk/blob/05-recompose/src/App.js Live Example

Slide 22

Slide 22 text

Questions?

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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