###¿Qué es ReactJS?
Es una librería creada por Facebook, enfocada en el desarrollo de componentes de UI para la web y su performance. Ésta utiliza lo que ellos llaman “Virtual DOM”, que actualiza sólo las partes del DOM que cambiaron, sin necesidad de tener que hacer render de toda la página o sección de la página. Esto les da una ventaja en performance y tiempos de renderizado, dejando atrás a otras librerías como AngularJS.
ReactJS solo provee las herramientas para el desarrollo de los web components, mas no provee herramientas para hacer llamados ajax, ni eventos, ni promesas, pero esto está bien, ya que nos permitiría agregar solo las librerías que necesitamos, por ejemplo : superagent, kriskowal/q y lodash, angularjs, con este último se pueden usar haciendo wrap de los componentes de react con una directiva de angular.
###¿Cómo se usa?
ReactJS funciona en base a clases, para renderizar HTML, primero debemos crear una clase de ract.
[prism:javascript]
var HelloWorld = React.createClass({
render: function() {
return
Hello, {this.props.name}!
;
}
});
React.render(new HelloWorld({ name: "Yohendry Hurtado" }), document.body);
[/prism:javascript]
Acá podemos ver esta línea : [prism:javascript] return
Hello, {this.props.name}!
; [/prism:javascript]
this.props, es un objeto con todas las propiedades que se asignan al momento de instanciar el componente, estas propiedades son la forma de pasar información a los componentes de react, como podemos apreciar acá [prism:javascript]React.render(new HelloWorld({ name: "Yohendry Hurtado" }), document.body);[/prism:javascript] donde pasamos la propiedad name al componente HellowWorld. Cualquier cambio a estas propiedades hará que la vista se actualice, como mencionamos antes solo el lugar donde cambió realmente, estos cambios pueden venir desde vistas padres o componentes hijos (nested views).
[prism:javascript]
var HelloWorld = React.createClass({
getInitialState: function() {
return {
counter: 0
};
},
increment: function() {
this.setState({ counter: this.state.counter+1 });
},
render: function() {
return
{this.state.counter}
;
}
});
React.render(new HelloWorld(), document.body);
[/prism:javascript]
La otra forma de manejar variables dentro de los componentes de react son los state, al igual que los props cualquier cambio hecho a un state causará que el componente haga render de nuevo, pero esta vez solo si se usa el método setState como podemos ver en el método increment de la clase HelloWorld, de otra forma los cambios al state no se realizarán; ¿Qué debo utilizar, props or state? para atributos propios de la vista, como información que se mostrará al usuario o algún ícono, usa state; si es una variable de control de flujo o no relacionada directamente a la vista, usa props o variables privadas, si el prop no es heredado de una vista padre.
ReactJS provee una serie de listeners que podemos sobreescribir en cada clase para tener control de los que se renderiza y cuando se renderiza, o si no queremos que se renderize basado en algún estado, propiedad o variable privada, estos métodos son:
componentWillMountt - se ejecuta antes de renderizar por primera vez el componente
componentDidMount - se ejecuta justo después de renderizar por primera vez el componente
componentWillUpdate - se ejecuta antes de actualizar el componente, si retornas false en este listener, previenes la actualización del componente
componentDidUpdate - se ejecuta al actualizar el componente
componentWillUnmount- se ejecuta antes de destruir un componente
Para más infromación ver la documentación
En conclusión ReactJS, nos provee una herramienta ligera para desarrollar componentes de UI reutilizables,versátiles y bastante ligeros, que nos ayudarán en nuestro desarrollo.
Su curva de aprendizaje no es para nada pronunciada y te permitirá crear componentes que no solo utilizarás en un proyecto, si no, en varios proyectos.
Related Blogs
Mejora la experiencia del cliente en retail con ESB
October 23, 2024
Tags: Tecnologías
En este contexto, muchas organizaciones están descubriendo que una solución tecnológica robusta puede marcar la diferencia. Aquí es donde entra en juego un Enterprise Service Bus (ESB), o bus de servicios empresariales
ESB integrado en sincronización de la cadena de suministro
October 23, 2024
Tags: Tecnologías
En este artículo, exploraremos cómo una solución ESB puede transformar la gestión de la cadena de suministro, permitiendo una sincronización más fluida, una mejor toma de decisiones y una mayor eficiencia operativa
Herramientas de ESB para mejorar la atención al paciente
October 23, 2024
Tags: Tecnologías
En este artículo, analizaremos cómo las herramientas de ESB pueden transformar los servicios de salud, haciendo más eficientes los flujos de trabajo, facilitando el intercambio de información y, en última instancia, mejorando la calidad de la atención que reciben los pacientes
En este artículo, exploramos qué es la banca móvil, cómo funciona, y por qué es crucial para las instituciones financieras que buscan mantenerse competitivas en el mercado actual
Aquí analizamos cómo lograr una ejecución sin fallas y garantizar que una aplicación de banca móvil esté preparada para satisfacer las expectativas tanto de los usuarios como del sector
Empresa de desarrollo de aplicaciones de banca móvil
October 22, 2024
Tags: Tecnologías
Este artículo describe los pasos y consideraciones esenciales para contratar a la empresa de desarrollo adecuada, guiándolo a través de cada fase del proceso para garantizar un proyecto fluido y exitoso