React Flux

RoCk SOLiD KnOwledge



Managing Data in an SPA using the Flux Pattern

? 2017 RoCk SOLid KnOwledge

1

Motivation

2-way data binding can lead to complex and unpredictable data flows Leads to sluggish UI Leads to code that is difficult to reason about and debug

? 2017 RoCk SOLid KnOwledge

2

Solution

React

UI framework Better performance Encourages uni-directional data flows

Flux

Uni-directional data flow pattern

? 2017 RoCk SOLid KnOwledge

3

React

Component-based JSX Virtual DOM Promotes uni-directional data flow

? 2017 RoCk SOLid KnOwledge

4

Component definition & JSX

import * as React from 'react'

export class MyComponent extends ponent { render() { return ( Hello from React )};

};

React.createElement( "div", null, React.createElement( "span", { id: "foo", className: "bar" }, "Hello from React"));

? 2017 RoCk SOLid KnOwledge

5

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download