Breve introducción a la construcción de aplicaciones con React.js

1. Aplicaciones Modernas

2. REACT.JS
Octavio Luna
@tavo_luna@Itaqua
Desarrollador, Geek, OCD y
Fisico-Matemático de hobbie,
Programación Funcional y Procesos de Negocio

3. REACT.JS
Octavio Luna
@tavo_luna@Itaqua
Gerente de Desarrollo de Software
Unlimited Vacation Club by AM Resorts
(http://www.unlimitedvacationclub.com/)
Fellow Developer para NavigatorMD
( http://www.navigatormd.com/)

4. REACT.JS
@tavo_luna@Itaqua
REACT.JS
Octavio Luna
@tavo_luna@Itaqua
Miembro del Tequila Valley Cancun Group (TQV)
campist 2013: Scala Un lenguaje para la era del Multiprocesad
(http://es.slideshare.net/octavio_luna/scala-un-lenguaje-para-multiprocesador)
Contributor to Asterisk-Java API Interface
(https://github.com/asterisk-java/asterisk-java)

5. REACT.JS
@tavo_luna@Itaqua
FRAMEWORKS

6. REACT.JS
@tavo_luna@Itaqua
W T F …ramework

7. REACT.JS
@tavo_luna@Itaqua

8. REACT.JS
@tavo_luna@Itaqua

9. REACT.JS
@tavo_luna@Itaqua
https://facebook.github.io/react/

10. REACT.JS
@tavo_luna@Itaqua
W T F

11. REACT.JS
@tavo_luna@Itaqua
W
T
F
HY
his
ramework

12. REACT.JS
@tavo_luna@Itaqua
• Es la V en un MVC
• Amigable con SEO
• Los componentes son el Futuro de la Red
• Extremadamente eficiente (gracias al DOM
virtual)
• Mucha retroalimentación al Desarrollador

13. REACT.JS
@tavo_luna@Itaqua
• La mutabilidad es la raíz de todos los Males.
• Puede colaborar con otros Frameworks y otras
librerías (mientras no alteres el DOM)
• Permite migrar una aplicación existente poco a
poco
• Facebook lo usa y mantiene, así que no se ira
pronto.

14. REACT.JS
@tavo_luna@Itaqua
var HelloMessage = React.createClass({
render: function() {
return <div>Hola {this.props.name}</div>;
}
});
React.render(
<HelloMessage name="Octavio" />,
document.getElementById('example')
);
JSX

15. REACT.JS
@tavo_luna@Itaqua
var HelloMessage = React.createClass({
displayName: "HelloMessage",
render: function render() {
return React.createElement(
"div",
null,
"Hola ",
this.props.name
);
}
});
React.render(
React.createElement(HelloMessage, { name: "Octavio" }),
document.getElementById('example')
);
Javascript

16. REACT.JS
@tavo_luna@Itaqua
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.getElementById('example'));
Statefull Component

17. REACT.JS
@tavo_luna@Itaqua
Ampersand.js

18. Especificación del
Componente
• render
• getInitialState
• getDefaultProps
• propTypes
• mixins
• statics
• displayName
REACT.JS
@tavo_luna@Itaqua

19. Ciclo de Vida del
Componente
• Montaje
• componentWillMount
• componentDidMount
• Desmontaje
• componentWillUnmount
REACT.JS
@tavo_luna@Itaqua
• Actualización
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

20. REACT.JS
@tavo_luna@Itaqua
• Es importante que elijas tu arquitectura en un
inicio
• Cada vez se verán mas SPAs

21. GRACIAS