Ihor HarahatyiExecutive Software Delivery Boy

(I feel good about myself)

@

Let’s speak about:

+ REACT + FLUX+ Yahoo’s Fluxible+ ES6 for REACT+ Problems we met

Not now:

- REACT without FLUX- Other realizations of FLUX

Lot of code + Frequent changes = Many bugs

html + jQuery

.html

<header><div class="name"></div>

</header>

.js

$.post('/login', credentials, function( user ) {// Modify the DOM here$('header .name').show().text( user.name );

});

REACT.js

class Header extends React.Component {render() {return (<header>{ this.props.name ?<div>this.props.name</div> : null }

</header>);

}}

Use:

<Header name={name_from_store} />

Do not refresh. Rerender!

It’s fast

MVC

More models

FLUX

Fluxible

Fluxible

ES6http://es6-features.org/

Classes

ES5

var Photo = React.createClass({handleDoubleTap: function(e) { },render: function() { },});

ES6

class Photo extends React.Component {handleDoubleTap(e) { }render() { }}

Props and StateES5

var Counter = React.createClass({getDefaultProps: function() {return { start: 0 };},getInitialState: function() {return { currentCount: this.props.start, };},});

ES6

class Video extends React.Component {static defaultProps = { start: 0 }state = { currentCount: this.props.start }}

Use arrow functionsES6

class ClickBtn extends React.Component {onButtonClick(e) {alert('Clicked!');}render() {return (<button onClick={this.onButtonClick.bind(this)>

Click Me!<button>);

}}

ES6

onButtonClick = (e) => { alert('Clicked!'); }

Destructuring and Spread attributesES6

class AutoloadingPostsGrid extends React.Component {render() {let {className,...others,} = this.props;

return (<div className={className}><PostsGrid {...others} /><button onClick={this.loadMore}>Load more<button><div>);}}

Problems?

Markup Engineers

World changes

No documentation

Real Programmers don’t write specs. Users shouldconsider themselves lucky to get any programs atall, and take what they get.

(Real Programmer’s rulebook)

You should not change DOM

We don’t have good UI Kit

When use REACT:

▶ You have lot of componets.▶ Your components change frequently.▶ You’re ready to avoid mentioned problems.

React Native

Things to read

▶ reactjs for stupid people▶ flux for stupid people