
Utilizando ReactJS - Parte 1
Compartir
Tabla de contenido
###¿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
;
}
});
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:
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}
- 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
Blogs relacionados

Cómo elegir la empresa outsourcing de software adecuada
September 3rd 2025
La externalización de software es una modalidad en la que una empresa opta por contratar a una empresa externa para que ofrezca servicios relacionados con el desarrollo de software

Staff Augmentation vs Servicios Manejados
September 3rd 2025
Rootstack puede ayudarte con cualquiera que elijas de entre estos dos servicios, tenemos la experiencia suficiente para asesorarte, trabajar juntos y llevar el proyecto a un final feliz.

Tendencias de aumento de personal de TI para 2026
September 2nd 2025
Debido al constante cambio en la tecnología, es inevitable pensar que, dentro de unos años, o ya pronto en el 2026, las empresas buscarán personal experimentado en soluciones y herramientas específicas

Validated ID + Signaturit
August 29th 2025
Un ecosistema integral que responde a los desafíos de 2025: deepfakes, IA maliciosa, movilidad y necesidad de identidad digital confiable en entornos online y offline

Amenazas a la ciberseguridad bancaria
August 28th 2025
Desde hace unos 20 años, la tecnología se ha apoderado de la industria bancaria cambiando por completo cómo sus clientes realizan transferencias y distintos procesos, hoy en día muchos de estos involucran incluso la inteligencia artificial

Seguridad en la banca móvil: mejores prácticas para instituciones financieras
August 28th 2025
La banca se topa con un mundo digital muy retador: ataques maliciosos, engaños en ingresos por celular y clientes exigentes. Un reporte de BAI revela que usar la banca por celular es tan común que es algo clave para cuidar los bienes del banco y de la gente