React Flux

[Pages:31]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

Composition

import * as React from 'react' import {Header} from './components/Header' import {Footer} from './components/Footer'

export class App extends ponent { render() { return A header Hello from React A footer };

};

? 2017 RoCk SOLid KnOwledge

6

Demo

React `hello world'

? 2017 RoCk SOLid KnOwledge

7

Client-side routing

React router

Declarative, nested routes Default route Not found route etc Route parameters Links Programmatic redirect

? 2017 RoCk SOLid KnOwledge

8

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

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

Google Online Preview   Download