React

React

"A JavaScript library for building user interfaces"

React

"Lots of people use React as the V in MVC"

React

React

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="World" />, document.body);

Features

JSX

Features

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "World"}), document.body);

Features

Virtual Dom

Features

Testing

Features

Isomorfico

Features

Composite Components

Stato

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

React.render(<Timer />, document.body);

Stato

Stato

MVC

MVC

MVC

MVC

Flux

Action

Un evento scatenato nel sistema che ha lo scopo di modificarne lo stato 

Dispatcher

Un Event Bus che fa girare gli eventi scatenati dalle Action all’interno dell’applicazione.

Store

Gli oggetti che contengono la business logic della vostra applicazione. Sono gli oggetti che in un classico MVC formerebbero la parte Model.

View

I componenti React

Why React?

Un unico modo di ragionare

Why React?

Complessità costante al crescere del progetto

Why (Not) React?

Markup + Codice (+ CSS?)

Why (Not) React?

Verbosità

That's It!

http://goo.gl/forms/K6Z4NXwTCs

That's It!

http://www.cosenonjaviste.it/react-tutorial/

http://www.cosenonjaviste.it/sviluppare-applicazioni-con-react-e-flux/