React Night
React + Flux
Chi sono
Francesco Strazzullo
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
Flux
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
Flux
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/
Copy of React Night: Web
By Alessandro Annini
Copy of React Night: Web
- 552