Upload
octavio-luna-bernal
View
532
Download
3
Embed Size (px)
Citation preview
Aplicaciones Modernas
REACT.JS
Octavio Luna
@tavo_luna@Itaqua
Desarrollador, Geek, OCD y Fisico-Matemático de hobbie,
Programación Funcional y Procesos de Negocio
REACT.JS
Octavio Luna
@tavo_luna@Itaqua
Gerente de Desarrollo de SoftwareUnlimited Vacation Club by AM Resorts
(http://www.unlimitedvacationclub.com/)
Fellow Developer para NavigatorMD( http://www.navigatormd.com/)
REACT.JS
@tavo_luna@Itaqua
REACT.JS
Octavio Luna
@tavo_luna@Itaqua
Miembro del Tequila Valley Cancun Group (TQV)
Barcampist 2013: Scala Un lenguaje para la era del Multiprocesador(http://es.slideshare.net/octavio_luna/scala-un-lenguaje-para-multiprocesador)
Contributor to Asterisk-Java API Interface (https://github.com/asterisk-java/asterisk-java)
REACT.JS
@tavo_luna@Itaqua
FRAMEWORKS
REACT.JS
@tavo_luna@Itaqua
W T F …ramework
REACT.JS
@tavo_luna@Itaqua
REACT.JS
@tavo_luna@Itaqua
REACT.JS
@tavo_luna@Itaqua
https://facebook.github.io/react/
REACT.JS
@tavo_luna@Itaqua
W T F
REACT.JS
@tavo_luna@Itaqua
WTF
HYhisramework
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
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.
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
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
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
REACT.JS
@tavo_luna@Itaqua
Ampersand.js
Especificación del Componente
• render• getInitialState• getDefaultProps• propTypes• mixins• statics• displayName
REACT.JS
@tavo_luna@Itaqua
Ciclo de Vida del Componente
• Montaje• componentWillMount• componentDidMount
• Desmontaje• componentWillUnmount
REACT.JS
@tavo_luna@Itaqua
• Actualización• componentWillReceiveProps• shouldComponentUpdate• componentWillUpdate• componentDidUpdate
REACT.JS
@tavo_luna@Itaqua
• Es importante que elijas tu arquitectura en un inicio
• Cada vez se verán mas SPAs
GRACIAS