Soy Luis Antonio Gomez, fundador de HTML5 Fácil.
Contáctame por doquier como:
@jimmylagp
Twitter | Facebook | GitHub
Una librería para construir interfaces de usuario, permite desarrollar aplicaciones "SPA" más eficientes y aumentando la interactividad usando Javascript.
Funciona tanto en el cliente como el servidor (Node.js).
Ract.js fue desarrollada por Facebook en el 2013 y liberado con licencia Apache 2.0 hasta hace poco.
Principalmente desarrollado por Jordan Walke.
La complejidad de los servicios web cada vez son más grandes, si distribuimos todo a componentes, podemos notar que son muchos.
Podemos manipular el DOM, cambiar estilos, contenido y hacer Ajax. Todo esto genera cierta cantidad de callbacks para automatizar el trabajo cuando es una aplicación grande (No hay MVC).
Angular.js maneja sus vistas de una forma muy peculiar, las vistas son actualizadas cuando ViewModel cambia y viceversa (todo reacciona a todo), una desventaja del "Two way data binding".
React.js propone usar "One way data binding", de esta forma los controladores se generan a partir de la información de los modelos y estos se pueden actualizar explícitamente.
Es una arquitectura para construir aplicaciones web del lado del cliente, maneja un flujo de datos de un solo sentido, por supuesto usado por React.js.
Son todos los eventos que suceden cuando el usuario interactúa con la interfaz, son eventos de Javascript.
Es quien recibe y administra todos los eventos, decide si actúa o no en consecuencia por lo que puede esperar a recibir muchos mas eventos. (Se puede encontrar como librería por separado)
Es un intermediario entre el Dispatcher y las Views, se asegura de mantener los datos necesarios que se presentarán en las vistas.
En comparación con MVC, las vistas reaccionan a los cambios en los modelos y a su vez los controladores a las vistas, que también pueden actualizar el modelo.
var Button = React.createClass({
render: function() {
return (
<a className="mybutton">
This is a button
</a>
);
}
});
Es un pseudo lenguaje similar a HTML basado en XML, esto permite crear los componentes para el DOM, está sintaxis es opcional, los puedes escribir totalmente en JS.
<input type="text" value={valueLink.value} onChange={handleChange} />
// tutorial13.json
[
{"author": "Pete Hunt", "text": "This is one comment"},
{"author": "Jordan Walke", "text": "This is *another* comment"}
]
// tutorial13.js
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});
Es el objeto que contiene las propiedades del componente y se genera al mismo tiempo que se crea, estos datos son inmutables y solo pueden heredarse de padres a hijos.
Este contiene la información del estado en el que se encuentra el componente y si puede ser modificado o alterado por el mismo al interactuar con el. Cuando el componente cambia.
Cada vez que existen cambios en los componentes, React.js actualiza todo el DOM de nuevo para mantener la interfaz actualizada.
Este se actualiza cada vez que hay cambios en los componentes, no es visible para le usuario solo está en memoria pero es comparado con el DOM real el cual solo es actualizado en secciones especificas donde solo hubo cambios.
Puedes enterarte de mucho mas siguiendo: