Manual de React
Manual de React
http://desarrolloweb.com/manuales/manual-de-react.html Página 1 de 68
Manual de React
React fue creada por Facebook y actualmente es un software libre que se usa en cientos de
páginas y aplicaciones de primer nivel. El desarrollo con React se basa en componentes, una
arquitectura que nos permite una mayor reutilización del código, y la realización de
aplicaciones complejas que más sencillas de programar y de mantener.
React es una herramienta muy usada en el desarrollo del lado del cliente, no solamente en
Facebook, sino también en miles de páginas y aplicaciones web. Es una evolución natural para
aquellos que quieren llegar más lejos de lo que permiten otras librerías más básicas, como
jQuery.
En este manual iremos publicando los artículos sobre React, comenzando por una
introducción general y una guía para los primeros pasos. Luego abordaremos asuntos tan
importantes como el desarrollo de componentes, la gestión del estado y mucho más. Con este
manual esperamos que aprender React se convierta en una experiencia sencilla y agradable
para el desarrollador
http://desarrolloweb.com/manuales/manual-de-react.html Página 2 de 68
Manual de React
Las siguientes personas han participado como autores escribiendo artículos de este manual.
David García
http://desarrolloweb.com/manuales/manual-de-react.html Página 3 de 68
Manual de React
Introducción a React
En la primera parte de este manual aprenderemos qué es React, aclarando las características
principales de esta librería para la creación de interfaces de usuario para la web. Además, a lo
largo de los primeros artículos tendremos ocasión de hacer nuestros primeros ejemplos con
React.
Por tanto, React representa una base sólida sobre la cual se puede construir casi cualquier cosa
con Javascript. Además facilita mucho el desarrollo, ya que nos ofrece muchas cosas ya listas,
en las que no necesitamos invertir tiempo de trabajo. En este artículo te ampliaremos esta
información, aportando además diversos motivos por los que usar React como librería del lado
del cliente.
http://desarrolloweb.com/manuales/manual-de-react.html Página 4 de 68
Manual de React
Un poco de historia
React es una librería desarrollada inicialmente por Facebook. Es software libre y a partir de su
liberación acapara una creciente comunidad de desarrolladores y entusiastas. Su creación se
realizó en base a unas necesidades concretas, derivadas del desarrollo de la web de la popular
red social. Además de facilitar el desarrollo ágil de componentes de interfaces de usuario, el
requisito principal con el que nació React era ofrecer un elevado rendimiento, mayor que otras
alternativas existentes en el mercado.
Detectaron que el típico marco de binding y doble binding ralentizaba un poco su aplicación,
debido a la cantidad de conexiones entre las vistas y los datos. Como respuesta crearon una
nueva dinámica de funcionamiento, en la que optimizaron la forma como las vistas se
renderizaban frente al cambio en los datos de la aplicación.
A partir de ahí la probaron en su red social con resultados positivos y luego en Instagram,
también propiedad de Facebook. Más adelante, después de su liberación y alentados por los
positivos resultados en el rendimiento de React, muchas otras aplicaciones web de primer
nivel la fueron adoptando. BBC, Airbnb, Netflix, Dropbox y un largo etc.
Sirve para desarrollar aplicaciones web de una manera más ordenada y con menos código que
si usas Javascript puro o librerías como jQuery centradas en la manipulación del DOM.
Permite que las vistas se asocien con los datos, de modo que si cambian los datos, también
cambian las vistas.
El código spaguetti que se suele producir mediante librerías como jQuery se pretende
arquitecturizar y el modo de conseguirlo es a través de componentes. Una interfaz de usuario
es básicamente creada a partir de un componente, el cual encapsula el funcionamiento y la
presentación. Unos compoentes se basan además en otros para solucionar necesidades más
complejas en aplicaciones. También permite crear otras piezas de aplicación cómodamente,
como los test.
Con respecto a librerías sencillas como jQuery, React aporta una serie de posibilidades muy
importantes. Al tener las vistas asociadas a los datos, no necesitamos escribir código para
manipular la página cuando los datos cambian. Esta parte en librerías sencillas es muy
laboriosa de conseguir y es algo que React hace automáticamente.
También en comparación con jQuery nos permite una arquitectura de desarrollo más
avanzada, con diversos beneficios como la encapsulación del código en componentes, que nos
ofrecen una serie de ventajas más importantes que los plugin, como la posibilidad de que esos
componentes conversen e interaccionen entre si, algo que que sería muy difícil de conseguir
con Plugins.
ReactJS solapa por completo las funcionalidades de jQuery, por lo que resulta una evolución
natural para todos los sitios que usan esa librería. Podrían convivir pero no es algo que
http://desarrolloweb.com/manuales/manual-de-react.html Página 5 de 68
Manual de React
realmente sea necesario y recargaría un poco la página, por lo que tampoco sería muy
recomendable.
Ya luego en comparación con frameworks como es el caso de Angular o Ember, React se queda
a mitad de camino, pues no incluye todo lo que suele ofrecer un framework completo. Pero ojo,
a partir de todo el ecosistema de React se llega más o menos a las mismas funcionalidades, así
que es una alternativa perfecta.
Nota: Decimos que se queda a mitad de camino porque React por sí mismo es una librería
y no un framework, puesto que React se ocupa de las interfaces de usuario. Quizás nos sirva
decir que sería la "V" en un framework "MVC", aunque es solo una manera de hablar,
puesto que React podría ocupar también parcelas de lo que sería la "C". Todo depende de
nuestra manera de trabajar aunque, no obstante, esta posible carencia con respecto a los
frameworks Javascript se soluciona con capas adicionales a React. Lo que podría
interpretarse como una desventaja, muchos desarrolladores lo entienden como una ventaja
con respecto a frameworks completos, ya que tú puedes desarrollar con React a tu gusto,
aplicando aquellas herramientas y librerías adicionales que desees. Como resultado, es
posible usar React de múltiples maneras y elegir aquella que mejor se adapte al proyecto o
las costumbres de los desarrolladores.
No se puede decir de una manera objetiva si es ReactJS es mejor o peor que otras alternativas,
porque eso ya entra más en el terreno de la opinión. Lo cierto es que muchas librerías se
especializan en el "data-binding", pero React toma esa misma necesidad y la resuelve de otra
manera. La diferencia es que React le pone más inteligencia a la necesidad de actualizar una
vista cuando es necesario y lo consigue mediante el "DOM Virtual" o "Virtual DOM".
A lo largo del Manual de React volveremos varias veces sobre el concepto de "Virtual DOM",
que es una de las principales características de React. De momento, en líneas generales
podemos decir que el virtual DOM es una representación del DOM pero en memoria, que usa
React para aumentar sensiblemente el rendimiento de los componentes y aplicaciones front-
end.
El Virtual DOM se basa en una idea bastante sencilla e ingeniosa. Básicamente hace que,
cuando se actualiza una vista, React se encargue de actualizar el DOM Virtual, que es mucho
más rápido que actualizar el DOM del navegador (DOM real). Cuando React compara el DOM
Virtual con el DOM del navegador sabe perfectamente qué partes de la página debe actualizar y
se ahorra la necesidad de actualizar la vista entera. Es algo muy potente, pero que se hace de
manera transparente para el desarrollador, que no necesita intervenir en nada para alcanzar
ese mayor rendimiento de la aplicación.
React es isomórfico
http://desarrolloweb.com/manuales/manual-de-react.html Página 6 de 68
Manual de React
El problema de las aplicaciones Javascript es que muchas veces reciben los datos en crudo del
servidor, o de un API o servicio web, en formato JSON. Las librerías Javascript y frameworks
toman esos datos para producir el HTML que debe representar el navegador. Esta arquitectura
representa la solución más adecuada para el desarrollo de aplicaciones web modernas, porque
nos permite desacoplar el desarrollo del lado del servidor y el desarrollo del lado del cliente,
pero se convierte en un aspecto negativo de cara al posicionamiento en buscadores como
Google, debido a que el cuerpo de la página no tiene contenido.
Nota: Al no tener contenido una página que recibe los datos en un JSON, Google no sabe
qué palabras clave son interesantes y no otorga ranking para ellas. Con ello la aplicación o
página no consigue posicionar. Google está haciendo cambios y ha comenzado a procesar el
Javascript para saber los datos de una página, pero aún dista de las ventajas que supone
que el contenido esté en el propio HTML que entrega el servidor.
React permite isomorfismo, lo que significa que, con el mismo código, somos capaces de
renderizar tanto en el cliente como el servidor. Por tanto, cuando llega un buscador como
Google, con la misma base de código se le puede entregar el HTML con el contenido ya
renderizado, lo que lleva a que una aplicación React sea capaz de posicionarse tan bien como
una aplicación web tradicional que renderice del lado del servidor, como es el caso de un
desarrollo tradicional o un desarrollo basado en un CMS como WordPress.
Ecosistema de React
Como hemos dicho, React en sí es una librería y, como tal, hay cosas que se deja del lado de
fuera con respecto a soluciones aportadas por los frameworks MV* para Javascript. Sin
embargo existe todo un ecosistema de herramientas, aplicaciones y librerías que al final
equiparan React a un framework.
Hay herramientas que se usan en múltiples proyectos, como el caso de Redux o Flux, que
aportan partes que React no se encarga. Éstos se ocupan del flujo de datos en React y lo
resuelven de una manera optimizada, elegante, poniendo énfasis en la claridad de las
aplicaciones. Como desarrolladores podemos escoger entre varios frameworks encargados del
flujo de los datos, basados en React. Como otros ejemplos tenemos generadores de
aplicaciones, sistemas de routing del lado del cliente, etc.
Por otra parte, al desarrollar en base a componentes reutilizables, permite que puedas usar el
desarrollo de un proyecto en otro. Y por el mismo motivo, encuentras una amplia comunidad
que libera sus propios componentes para que cualquier persona los pueda usar en cualquier
proyecto. Por tanto, antes de desarrollar algo en React conviene ver si otro desarrollador ya ha
publicado un componente que lo haga y en la mayoría de los casos, cuando se trata de cosas de
ámbito general, veremos que siempre es así.
http://desarrolloweb.com/manuales/manual-de-react.html Página 7 de 68
Manual de React
Hay componentes desde simples botones, sliders, tooltips, etc. Es muy sencillo que se pueda
compartir, gracias a que los componentes son capaces de trabajar de manera independiente y
que encapsulan funcionalidad para que no interaccionen con otros componentes si no se
desea.
React Native es otra de las herramientas disponibles en el ecosistema, que permite llevar una
aplicación escrita con Javascript y React como aplicación nativa para dispositivos iOS,
Android, etc. Y se trata de aplicaciones nativas! el código Javascript con React se compila a
nativo, en lugar de usar web views como ocurre generalmente en el desarrollo híbrido.
Conclusión
React es una librería completa, adecuada en muchos tipos de proyectos distintos. Nos permite
un desarrollo ágil, ordenado y con una arquitectura mantenible, focalizada en componentes y
que nos ofrece un gran performance.
Aunque React no se encarga de todas las partes necesarias para hacer una aplicación web
compleja, la serie de componentes y herramientas diversas que encontramos dentro del
ecosistema React, nos permite beneficiarnos de alternativas capaces de desarrollar cualquier
cosa que podríamos hacer con un complejo framework.
Agradecemos a nuestros compañeros Gorka Laucirica y Miguel Angel Durán, que en un evento
en directo en DesarrolloWeb y EscuelaIT nos informaron sobre todas estas características de
React.
React, a veces conocida también como ReactJS, es una librería Javascript potente, focalizada
en la sencillez y el rendimiento, usada en cientos de proyectos de primer nivel como Facebook,
Netflix o Airbnb. Merece la pena conocerla puesto que se postula como una evolución natural
para miles de desarrolladores que usan librerías más sencillas como jQuery. React en resumen
aporta diversas ventajas, permitiendo escribir menos código y aumentando su facilidad de
mantenimiento de las aplicaciones.
En el artículo anterior del Manual de React, ya ofrecimos una serie de información útil y
http://desarrolloweb.com/manuales/manual-de-react.html Página 8 de 68
Manual de React
general sobre React y los motivos por los que usar la librería. En este artículo pretendemos
presentar React de una manera más práctica y para ello vamos a utilizar un paquete muy
interesante, llamado "Create React App", puesto a disposición por el propio Facebook.
A no ser que seas un experto desarrollador frontend, la mejor alternativa para dar los primeros
pasos con React es usar el paquete create-react-app. Te permitirá empezar muy rápido y
ahorrarte muchos pasos de configuración inicial de un proyecto.
Generalmente cuando se construye un sitio o app web se tiene que lidiar con una serie de
herramientas que forman parte del tooling de un frontend developer, como gestores de
paquetes, de tareas, transpiladores, linters, builders, live reload, etc. Toda esta serie de
herramientas pueden tener su complejidad si se quieren aprender con el suficiente detalle
como para comenzar a usarlas en un proyecto, pero son esenciales para un buen workflow.
Por tanto, si queremos ser detallistas y proveernos de las herramientas necesarias para ser
productivos y eficientes, se puede hacer difícil la puesta en marcha en un proyecto Frontend en
general. Ahí es donde entra Create React App, ofreciéndonos todo lo necesario para
comenzar una app con React, pero sin tener que perder tiempo configurando
herramientas. Comenzaremos una app con un par de comandos sencillos, obteniendo
muchos beneficios de desarrolladores avanzados.
Una vez lo hemos instalado de manera global, nos metemos en la carpeta de nuestros
proyectos y lanzamos el comando para comenzar una nueva aplicación:
create-react-app mi-app
Nota: Por si no quedó claro "mi-app" será el nombre de tu aplicación React. Obviamente,
podrás cambiar ese nombre por uno de tu preferencia.
http://desarrolloweb.com/manuales/manual-de-react.html Página 9 de 68
Manual de React
Mediante el anterior comando se cargarán los archivos de un proyecto vacío y todas las
dependencias de npm para poder contar con el tooling que hemos mencionado. Una vez
terminado el proceso, que puede tardar un poco, podemos entrar dentro de la carpeta de
nuestra nueva app.
cd mi-app/
npm start
Observarás que, una vez lanzas el comando para iniciar la app, se abre una página en tu
navegador con un mensaje de bienvenida. Ese es el proyecto que acabamos de crear. No
obstante, en el propio terminal nos indicarán la URL del servidor web donde está funcionando
nuestra app, para cualquier referencia posterior. De manera predeterminada será el
http://localhost:3000/, aunque el puerto podría cambiar si el 3000 está ocupado.
Create React App configura otra serie de comandos interesantes para el desarrollo del
proyecto. Al terminar la instalacion del proyecto nos informan sobre ellos, tal como aparece en
la siguiente imagen.
http://desarrolloweb.com/manuales/manual-de-react.html Página 10 de 68
Manual de React
Uno de los comandos especialmente útil es "yarn build" (o su equivalente "npm build"), que
sirve para generar los archivos de nuestro proyecto optimizados para producción.
Otro comando super interesante es "yarn eject", que sirve para liberar todas las herramientas
que están detrás de Create React App, de modo que puedas personalizar su funcionamiento.
Create React App usa por debajo varias herramientas como Webpack, el transpilador Babel, un
Linter, etc. Sin embargo, todas estas herramientas permanecen escondidas y no se pueden
personalizar. Si tu proyecto necesita una configuración más específica de cualquiera de estas
herramientas, puedes lanzar el comando "eject", con lo que consigues que toda la
configuración escondida de Create React App salga a la luz y puedas trabajar de manera
normal. Solo ten en cuenta que la acción "eject" no se puede deshacer!
yarn eject
El listado de nuestra app recién creada es bastante sencillo. Observarás que tenemos varias
carpetas:
http://desarrolloweb.com/manuales/manual-de-react.html Página 11 de 68
Manual de React
dependencias de npm, tanto para desarrollo como para producción. Si conoces npm no
necesitarás más explicaciones.
.gitignore que es el típico archivo para decirle a git que ignore ciertas cosas del
proyecto a la hora de controlar el versionado del código.
yarn.lock Este archivo no se debe tocar, puesto que es código generado por Yarn. Su
utilidad es ofrecer instalaciones de dependencias consistentes a lo largo de todas las
instalaciones de un proyecto.
Para nuestros primeros pasos con React no necesitamos más que entrar en la carpeta src y
empezar a editar su código. De entre todos los archivos que encuentras en la carpeta src por
ahora nos vamos a quedar con uno en concreto, src/App.js, en el que se crea el componente
principal de nuestra app.
Nota: no lo hemos comentado, pero React fue una de las primeras librerías que están
orientadas a componentes. Con React debemos construir componentes que son como
etiquetas nuevas de HTML, que encapsulan un contenido, presentación y funcionalidad. A
base de tener unos componentes que se apoyan en otros es como se consigue la
arquitectura de componentes, que es la base del desarrollo más actual en las librerías y
frameworks frontend más destacados.
Si abres src/App.js verás que la mayoría del código que aparece es como si fuera HTML,
aunque encerrado dentro de un script Javascript. Es la manera en la que ReactJS trabaja con
las vistas de la aplicación. En realidad no es código HTML sino "JSX", una extensión a la
sintaxis de Javascript que nos permite de una manera amigable crear y mantener el HTML
que necesitas para "renderizar" (pintar) los componentes. JSX tiene muchas cosas interesantes
que comentar, pero no vamos a entretenernos hasta más adelante.
render() {
http://desarrolloweb.com/manuales/manual-de-react.html Página 12 de 68
Manual de React
return (
<div>
<h1>Hola Mundo!</h1>
</div>
);
En la primera línea "import React…" se está importando la librería React y la clase Component,
que es la que usamos para, en la segunda línea, extender la clase App.
Nota: En React hay varias alternativas para crear componentes. Esta que se ha utilizado es
la forma de ECMAScript 6, que sería la recomendada. No necesitas preocuparte porque ese
Javascript no sea compatible con todos los navegadores, ya que el propio Create React App
nos ha configurado ya el transpilador para convertirlo a Javascript compatible con
ECMAScript 5.
Las clases que usamos para implementar componentes React solo necesitan un método render
para poder funcionar. En nuestro caso observarás que el componente que estamos creando,
llamado App (como el nombre de la clase), solamente tiene ese método render().
render() {
return (
<div>
<h1>Hola Mundo!</h1>
</div>
);
Todo el código que coloques dentro del método render() será el marcado que usará el
componente para su representación en la página.
Nota: Es importante fijarse en una cosa: render() debe devolver el contenido con la
palabra "return", colocando entre paréntesis el HTML necesario para pintar el componente
en la página. Aunque lo parezca, el marcado devuelto por el método render no es
exactamente HTML, sino JSX, como ya se adelantó en este artículo.
http://desarrolloweb.com/manuales/manual-de-react.html Página 13 de 68
Manual de React
Arquitectura de componentes
Vamos a mejorar un poquito nuestro ejemplo anterior y para ello, dentro del mismo App.js,
vamos a crear un segundo componente para ver cómo unos componentes se pueden basar en
otros. El código de nuestro nuevo componente será el siguiente:
render() {
return (
Usar este componente nuevo es tan simple como colocar una etiqueta en el componente que lo
necesite usar, que tendrá el mismo nombre que el de la clase que acabamos de crear para este
componente.
<div>
<h1>Hola Mundo!</h1>
<OtroSaludo />
</div>
Debes observar cómo hemos usado la etiqueta "OtroSaludo" en la vista del componente App.
Pondremos todo de momento dentro del mismo App.js, con lo que el código completo del
archivo nos quedará como esto:
render() {
return (
<div>
<h1>Hola Mundo!</h1>
<OtroSaludo />
</div>
);
render() {
return (
http://desarrolloweb.com/manuales/manual-de-react.html Página 14 de 68
Manual de React
Conclusión y vídeo
Esto es solo una pequeña muestra de lo que se puede hacer con un mínimo conocimiento de
React. Cabe señalar que React es válido para hacer componentes que se pueden usar dentro de
aplicaciones ya existentes, por ejemplo un proyecto PHP tradicional, que renderiza HTML del
lado del servidor, como en aplicaciones enteramente del lado del cliente, que renderizan el
HTML por medio de vistas React y con datos que traerás con JSON de un API REST o de
cualquier otro medio.
Todo esto lo veremos en el futuro, pero si te interesa contar ya mismo con una formación
completa y tutorizada para aprender React, te recomendamos participar en el Curso de React
de EscuelaIT.
Como presentación de estas funcionalidades básicas de React y otras que no hemos tratado en
este artículo te recomendamos asistir al vídeo siguiente, de los primeros pasos en React.
http://desarrolloweb.com/manuales/manual-de-react.html Página 15 de 68
Manual de React
Características de React
En este artículo vamos a conocer algunas de las principales características de
React.
Antes de comenzar a programar nuevos ejemplos con React nos vamos a tomar nuevamente
algo de tiempo para la teoría, en concreto para analizar la librería y así conocer más de cerca
algunas de sus características. Ya tendremos tiempo en el Manual de React de ponernos algo
más prácticos.
React es una librería para crear aplicaciones web, con Javascript del lado del
cliente y del lado del servidor. Esa definición hace hincapié en una dualidad (cliente +
servidor) que resulta una de las principales características de la librería, de las que ya hemos
hablado anteriormente, en el artículo de Qué es React y por qué usarlo. Aunque volveremos
sobre ese punto, ahora vamos a conocer otros datos de interés.
Composición de componentes
Así como en programación funcional se pasan funciones como parámetros para resolver
problemas más complejos, creando lo que se conoce como composición funcional, en ReactJS
podemos aplicar este mismo patrón mediante la composición de componentes
http://desarrolloweb.com/manuales/manual-de-react.html Página 16 de 68
Manual de React
componentes que trabajan entre sí. Este modelo de trabajo tiene varias ventajas, como la
facilidad de mantenimiento, depuración, escalabilidad, etc.
En la experiencia de desarrollo con librerías más sencillas como jQuery, o el propio "Vanilla
Javascript" realizamos un estilo de programación imperativo. En ese estilo se realizan scripts
que paso por paso tienen que informar sobre qué acciones o cambios en el DOM se deben
realizar. Hay que ser muy concisos en esas acciones, especificando con detalle cada uno de los
cambios que se quieren realizar. La forma imperativa de declarar nos obliga a escribir mucho
código, porque cada pequeño cambio se debe definir en un script y cuando el cambio puede ser
provocado desde muchos sitios, cuando agregamos eventos, el código comienza a ser poco
mantenible.
Sin embargo, el estilo de React es más declarativo, en el que nosotros contamos con un estado
de la aplicación y sus componentes reaccionan ante el cambio de ese estado. Los componentes
tienen una funcionalidad dada y cuando cambia una de sus propiedades ellos producen un
cambio. En el código de nuestra aplicación tendremos ese componente, y en él se declarará de
donde vienen los datos que él necesita para realizar su comportamiento. Podremos usarlo
tantas veces como queramos declarando que lo queremos usar y declarando también los datos
que él necesita para funcionar.
Ésta es otra de las cosas que facilita React, aunque no es exclusivo. En este modelo de
funcionamiento, los componentes de orden superior propagan datos a los componentes de
orden inferior. Los de orden inferior trabajarán con esos datos y cuando cambia su estado
podrán propagar eventos hacia los componentes de orden superior para actualizar sus estados.
Este flujo tiende a ser unidireccional, pero entre componentes hermanos muchas veces se hace
más cómodo que sea bidireccional y también se puede hacer dentro de React. Sin embargo, si
tratamos siempre de mantener el patrón de funcionamiento unidireccional, nos facilitará
mucho el mantenimiento de la aplicación y su depuración.
El DOM Virtual está cargado en memoria y gracias a la herramienta que diferenciación entre él
y el real, el DOM del navegador se actualiza. El resultado es que estas operaciones permiten
actualizaciones de hasta 60 frames por segundo, lo que producen aplicaciones muy fluidas, con
movimientos suavizados.
http://desarrolloweb.com/manuales/manual-de-react.html Página 17 de 68
Manual de React
Isomorfismo
Como anteriormente ya hemos hablado sobre este punto, lo vamos a dejar por aquí.
Elementos y JSX
ReactJS no retorna HTML. El código embebido dentro de Javascript, parece HTML pero
realmente es JSX. Son como funciones Javascript, pero expresadas mediante una sintaxis
propia de React llamada JSX. Lo que produce son elementos en memoria y no elementos del
DOM tradicional, con lo cual las funciones no ocupan tiempo en producir pesados objetos del
navegador sino simplemente elementos de un DOM virtual. Todo esto, como hemos dicho, es
mucho más rápido.
React DOM y la herramienta de diffing, se encargarán más tarde de convertir esos elementos
devueltos por JSX en DOM Real, sin que nosotros tengamos que intervenir.
React permite crear componentes de diversas maneras, pero hay una diferencia entre
componentes con y sin estado.
Los componentes stateless son los componentes que no tienen estado, digamos que no
guardan en su memoria datos. Eso no quiere decir que no puedan recibir valores de
propiedades, pero esas propiedades siempre las llevarán a las vistas sin producir un estado
dentro del componente. Estos componentes sin estado se pueden escribir con una sencilla
función que retorna el JSX que el componente debe representar en la página.
Los componentes statefull son un poco más complejos, porque son capaces de guardar un
estado y mantienen lógica de negocio generalmente. Su principal diferencia es que se escriben
en el código de una manera más compleja, generalmente por medio de una clase ES6
(Javascript con ECMAScript 2015), en la que podemos tener atributos y métodos para realizar
todo tipo de operaciones. Los componentes statefull, con estado, necesitan tener un método
render() que se encarga de devolver el JSX que usar para representarlo en la página.
Podemos decir que los componentes con estado son componentes "listos" y los que no tienen
estado son "tontos". Los statefull se usan para resolver problemas mayores, con lógica de
negocio, mientras que los stateless se usan más para interfaces de usuario.
React implementa un ciclo de vida para los componentes. Son métodos que se ejecutan cuando
pasan cosas comunes con el componente, que nos permiten suscribir acciones cuando se
produce una inicialización, se recibe la devolución de una promesa, etc.
En definitiva, todas estas cosas las iremos conociendo a lo largo del Manual de React de
http://desarrolloweb.com/manuales/manual-de-react.html Página 18 de 68
Manual de React
DesarrolloWeb.com. Aunque recuerda que si quieres aprender mucho mejor, con menos
tiempo y ayudado por profesores, tienes el Curso de React de EscuelaIT.
Antes de comenzar la lectura: Este artículo aborda una posible forma de iniciar un
proyecto React, sin embargo no es la más fácil y tampoco sería muy recomendada para una
aplicación real. A nivel didáctico está bien, porque nos permite ir conociendo algunas de las
piezas que forman una aplicación React, sin la envoltura de un entorno de desarrollo ni la
necesidad de configurar herramienta alguna. Si estás aprendiendo React desde cero y no tienes
mucha prisa, es una buena lectura para ir familiarizándote con algunas de las cosas que React
dispone para desarrollar componentes y aplicaciones, como el método ReactDOM.render(). Si
tienes prisa por aprender React en un entorno de desarrollo mejor preparado y más apropiado
para una aplicación real, la recomendación sería comenzar tu aplicación con Create React App.
Puedes ver esa introducción en el artículo de primeros pasos en React con Create React App.
Aclarado lo anterior, vamos a dar los primeros pasos con React, pero desde un proyecto
completamente vacío, es decir, una página en blanco y sin la necesidad de descargar ninguna
herramienta. Solo con un index.html y un poco de código.
Pero, si no es la manera más adecuada para desarrollar React, ¿Por qué explicamos cómo
comenzar con React usando esta alternativa?. Para responder la pregunta aclararemos el
objetivo del artículo: ofrecer una vía sencilla para poner en marcha React sin las
complejidades de un entorno de desarrollo avanzado. Hay personas que prefieren
enfrentarse a una nueva tecnología desde un lienzo vacío, o una página en blanco, donde
tengamos pocas cosas y nos sean familiares. Además, al comenzar desde un proyecto
completamente en blanco, tendremos ocasión de familiarizarnos mejor con las partes de una
aplicación React.
Nota: Si no te asusta tener un entorno complejo y prefieres código ES6 te interesa mejor
ver cómo comenzar React a través de Create React App. Esa aproximación es la que vimos
en el artículo Primeros pasos con React.
Además, si alguien ya tiene una estructura de aplicación y desea integrar React en ella, este
artículo le dará una buena idea de cómo se podría comenzar. El problema en este caso es que
React usa JSX, que requiere de un compilado por medio de Babel. A esta operación se la
http://desarrolloweb.com/manuales/manual-de-react.html Página 19 de 68
Manual de React
conoce como "transpilado", término a medio camino entre compilación y traducción. Por ese
motivo al menos, para integrar Babel en un proyecto existente, estaríamos obligados a realizar
una transpilación antes de poner en producción el código, lo que nos obligaría a definir nuestro
entorno necesariamente.
CDN de React
Comenzaremos entonces cargando React desde el CDN, de modo que no tengamos que instalar
en nuestro proyecto ninguna librería. React se ofrece con un CDN sobre el que podemos
encontrar información y las versiones más actuales desde la página de links a CDN.
El código que deberemos usar a partir del CDN está dividido en varios scripts. Usaremos los
tres siguientes:
<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
Nota: Sobre JSX hemos hablado poco. Es un superset de Javascript que permite escribir
código HTML dentro de un script Javascript. Es algo que se hace extraño al principio, pero
que resulta muy potente. Puedes verlo inicialmente como un sistema de templating, donde
de una manera clara y mantenible puedo generar salida en HTML, interpolando datos e
incluso funcionalidad que viene de Javascript. Tampoco vamos a introducirnos ahora al
detalle. Una de las grandes novedades de React en el panorama de desarrollo frontend es
justamente el JSX.
http://desarrolloweb.com/manuales/manual-de-react.html Página 20 de 68
Manual de React
Ahora que ya tenemos nuestras tres librerías necesarias, podemos crear un script que use react
para producir una pequeña salida. Sin embargo, necesitamos algún sitio de nuestro HTML
donde volcar esta salida. Este sitio será una sencilla etiqueta HTML a la que le pondremos un
identificador para poder referirnos a ella.
La salida con React será inyectada en esa etiqueta. Nosotros simplemente al ejecutar React
especificaremos el id que tiene el elemento donde inyectar esa salida. React se encargará de lo
demás.
El código de nuestra página HTML, una vez colocados los scripts del CDN y el elemento de
anclaje quedaría de esta manera.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="anclaje"></div>
<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
</body>
</html>
Script React
Ahora vamos con lo que todos estarán esperando ver, cómo ejecutar React para producir esa
salida, que se inyectará en el elemento de anclaje. Es bien sencillo, a través del objeto
ReactDOM.
ReactDOM permite hacer cosas como renderizar HTML en un lugar de la página. La gracia es
que ReactDOM soporta escribir código en JSX, de modo que nos simplifica escribir HTML
dentro del propio Javascript. El método que usamos de ReactDOM es render(), el cual requiere
dos parámetros: 1) El JSX con el HTML a generar. 2) el objeto del DOM donde inyectar la
salida.
El ejemplo podría ser algo como esto, aunque luego veremos alguna variación:
http://desarrolloweb.com/manuales/manual-de-react.html Página 21 de 68
Manual de React
<script type="text/babel">
ReactDOM.render(contenido, anclaje);
</script>
El método "render" de ReactDom recibe dos parámetros. El contenido que debe renderizar y el
objeto del DOM donde volcar el resultado de esa renderización. Esos dos parámetros son los
que hemos generado en las variables contenido y anclaje generadas en las líneas anteriores.
Como alternativa, veamos ahora el mismo código pero expresado de otra manera. En vez de
generar variables en pasos anteriores enviamos los valores directamente al método render().
<script type="text/babel">
ReactDOM.render(
document.getElementById('example')
</script>
Ejemplo completo del hola mundo react sin setup del entorno de desarrollo
Ahora puedes ver el código de nuestra página, un archivo HTML que podrías poner en
cualquier lugar de tu disco duro y ejecutar directamente con un doble clic. Sin dependencias de
ningún otro paso que debas realizar para que esto funcione correctamente.
http://desarrolloweb.com/manuales/manual-de-react.html Página 22 de 68
Manual de React
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="anclaje"></div>
<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
<script type="text/babel">
ReactDOM.render(contenido, anclaje);
</script>
</body>
</html>
Es un ejemplo de React básico, pero como hemos dicho poco apropiado por varios motivos.
Además, aunque el archivo se ejecute correctamente haciendo doble clic sobre él, te conviene
acceder a los ejemplos a través de un servidor web, al menos ir acostumbrándote a ello, porque
más adelante las cosas no funcionarán desde file:// y sí desde http://.
Espero que te haya parecido interesante esta práctica para comenzar con ReactJS sin tener que
preocuparte de la creación de un entorno de desarrollo y una carpeta de aplicación.
http://desarrolloweb.com/manuales/manual-de-react.html Página 23 de 68
Manual de React
En la segunda sección del Manual de React vamos a abordar con mayor detalle el desarrollo de
componentes. Recordemos que React es una de las primeras librerías que nos permiten el
desarrollo basado en componentes, lo que nos ofrece muchas ventajas a la hora de realizar la
arquitectura de la aplicación frontend.
En los próximos artículos abordaremos diversas maneras de crear componentes con React,
basados en código ES5 (el método de React Create Class) y basados en código ES6 (el método
más nuevo y recomendado para la creación de componentes en React).
Como ya hemos comentado anteriormente sobre las bondades del desarrollo basado en
componentes, vamos a abordar más técnicamente este apartado, observando algunas cosas
interesantes sobre cómo debemos desarrollar componentes mediante la alternativa más
clásica.
Los componentes se definen de diversas maneras. Lo ideal es que encontremos la que más se
adapta a nuestros gustos o necesidades. Veremos en esta ocasión un método llamado
createClass(), que es el más tradicional a la hora de construir componentes, y que nos permite
empezar sin la necesidad de crear un entorno de desarrollo complejo para producir nuestras
aplicaciones.
Nota: Este artículo es interesante porque createClass() es una manera bastante tradicional
de crear componentes React. Hoy, dado que todos los navegadores modernos aceptan
programación con Javascript ES6, no es tan relevante. Sin embargo, sigue siendo
importante que conozcas este mecanismo, ya que seguramente lo encontrarás en tutoriales
y código heredado de proyectos antiguos. Por tanto, te vendrá bien conocer los detalles de
la creación de componentes con createClass. En futuros artículos estudiaremos alternativas
que a nuestro juicio son más recomendables, basicamente la creación de componentes
React con clases de ES6.
http://desarrolloweb.com/manuales/manual-de-react.html Página 24 de 68
Manual de React
Actualización: Es importante aclarar que en la versión más nueva de React han cambiado
la locaclización del método createClass(). El código de este ejercicio funciona, porque
traemos React desde un CDN en la versión 15, pero en la versión 16 quitaron ese método del
núcleo de React. Es todavía posible crear componentes con createClass(), pero hay unas
pequeñas diferencias para acceder a esa funcionalidad. Lo puedes ver resumido en el
artículo React Without ES6 de la documentación de React. De todos modos, como se ha
mencionado, la manera recomendada actualmente para crear componentes en React es a
partir de clases ES6, por lo que quizás sería más útil ir directamente a ese artículo para
continuar con el manual.
Comencemos creando un componente por medio de un método que pertenece al objeto React,
llamado createClass(). No es la manera más novedosa de crear componentes pero sí la más
tradicional. Luego veremos cómo crear los componentes con clases de verdad, de las que nos
permite realizar Javascript con ES6, pero createClass() es interesante de ver por dos motivos.
1. Porque nos permite crear componentes sin necesidad de crear un entorno de desarrollo
complicado.
2. Porque hay muchos tutoriales más antiguos que éste donde podrás encontrar código
como el que te vamos a proponer ahora. Así te será más fácil entender otras posibles
referencias de estudio.
Nota: Este modo de desarrollo haría continuación al artículo Comenzar con React en un
entorno vacío. Sería interesante echarle un vistazo a ese artículo para entender algunas
cosas que ahora no vamos a explicar de nuevo.
En el código que encuentras a continuación observarás que para crear un componente usamos
React.createClass(), enviando como parámetro la configuración del componente, indicada por
medio de un literal de objeto Javascript.
render: function() {
return (
<div>
<p>Este componente React lo creo como simple prueba. Lo hago con CreateClass porque quiero centrarme en ES5</p>
http://desarrolloweb.com/manuales/manual-de-react.html Página 25 de 68
Manual de React
</div>
);
});
Dentro del objeto de configuración enviado colocamos todas las cosas que debería tener
nuestro componente. De momento observarás que le hemos pasado único método: render(),
que es lo mínimo que debería tener todo componente básico.
El método render() contiene el código que debe usarse para representar el componente en la
página. Como estamos dentro de React podemos usar la sintaxis JSX.
Como render() solamente sirve para devolver código que representar en la vista, lo único que
encontramos es un return. Ya dentro del return estará el código JSX que construye la vista a
usar para la representación del componente.
Usar un componente
Una de las posibilidades de desarrollar con componentes es que, una vez definido el
componente, lo podemos usar varias veces en el código de nuestra aplicación. Para ello
simplemente colocamos varias veces su etiqueta. Su contenido entonces se renderizaría en
cada sitio donde lo estamos usando.
http://desarrolloweb.com/manuales/manual-de-react.html Página 26 de 68
Manual de React
en una etiqueta cualquiera. Esto es porque JSX es como si produjera un return por cada
etiqueta que tiene y no es posible que una función devuelva dos return diferentes. La envoltura
nos permite que solo se devuelva una única salida, aunque luego esa etiqueta pueda tener
hijos, nietos, etc. en cualquier estructura de árbol.
ReactDOM.render(
<div>
<MiComponente />
<MiComponente />
</div>,
anclaje
);
Observarás como hemos colocado unos saltos de línea en el código, simplemente para que se
pueda leer mejor por el ojo humano. Estos saltos de línea son perfectamente válidos y
dulcifican la sintaxis de JSX, a la vez que producen un código más mantenible y similar al
HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="anclaje"></div>
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
<script type="text/babel">
render: function() {
return (
<div>
<p>Este componente React lo creo como simple prueba. Lo hago con CreateClass porque quiero centrarme en ES5</p>
</div>
);
});
ReactDOM.render(
<div>
<MiComponente />
http://desarrolloweb.com/manuales/manual-de-react.html Página 27 de 68
Manual de React
<MiComponente />
</div>,
anclaje
);
</script>
</body>
</html>
Ese código lo puedes ejecutar tal cual, copiando y pegando en cualquier fichero con extensión
.html y luego abriéndolo en tu navegador. No necesita de nada más para funcionar, salvo que
tengas conexión a Internet para que se puedan cargar los códigos de los scripts cargados desde
el CDN de React.
De momento no hay mucho más que agregar, solo que permanezcas atento a futuros artículos
donde estaremos explicando otros mecanismos interesantes que nos permiten crear
componentes con clases ES6.
En el pasado artículo del Manual de React comenzamos a explicar cómo crear componentes.
En aquella ocasión lo hicimos con el método createClass() y ahora conoceremos otro
mecanismo más actual, basado en clases de las que nos aporta ECMAScript 2015.
No es que por hacer los componentes mediante clases podamos realizar cosas adicionales a las
que nos permitía el método de createClass(), sino que nos permitirá organizar el código de
nuestras aplicaciones de una manera diferente, más práctica y mantenible. Básicamente
podremos colocar cada componente en su módulo independiente e importarlo cuando sea
necesario con imports de ES6. Al mismo tiempo, el hecho de ser clases nos permitirá de
beneficiarnos de los beneficios de la Programación Orientada a Objetos en general.
http://desarrolloweb.com/manuales/manual-de-react.html Página 28 de 68
Manual de React
En la documentación de React afirman que los componentes con clases ES6 tienen un mejor
desempeño que usar createClass(), que se notará en aplicaciones grandes. Como desventaja,
tendremos que escribir algún código adicional que React ya te hace de manera automática si
usas createClass(), como por ejemplo el bindeo del contexto (this) en los métodos defindos
como manejadores de eventos. Hablaremos de ello con detalle llegado el momento.
Quizás pienses en que agregar ES6 te añade la dificultad en la operativa de desarrollo, por la
necesidad de la transpilación. Pero dado que ya estamos en la necesidad de transpilar código
JSX, será indiferente tener que transpilar también ES6.
Ahora que vamos a trabajar con ES6, por facilitarnos la vida en lo que respecta a la
organización del código del proyecto, vamos a tener el cuidado de crear cada componente en su
propio archivo. Cuanto menores sean los archivos, más fáciles serán de mantener.
Cada archivo de código Javascript independiente forma parte de lo que se conoce como
"módulo". Así que "cada componente en su módulo" sería más correcto de decir.
Los archivos de los componentes los colocarás en la carpeta "src", contenida en un proyecto en
http://desarrolloweb.com/manuales/manual-de-react.html Página 29 de 68
Manual de React
blanco de Create React App. Ya luego cómo desees organizar los módulos dentro de esa carpeta
puede variar, pero una buena práctica sería crear una carpeta para cada componente o incluso
carpetas de grupos de componentes que tengan una responsabilidad asociada. Iremos viendo
estructuras más complejas en el futuro y también tus propios gustos y necesidades te irán
marcando una pauta. Nosotros de momento nos contentaremos con colocar los archivos del
componente en su carpeta independiente.
Así pues, dentro de src podrás crear una carpeta que se llame "MiComponente" o "mi-
componente" o y dentro un "index.js" que tendrá el código del componente.
Pienso que casi ni hace falta, pero en la siguiente imagen tenemos una estructura de carpetas y
archivo que vamos a crear.
Ahora dentro de nuestro index.js colocamos el código del componente. Comenzamos con la
necesidad de importar React y la clase Component. React es la propia librería y Component es
la clase de la que vamos a extender nuestros componentes.
render() {
http://desarrolloweb.com/manuales/manual-de-react.html Página 30 de 68
Manual de React
return (
<div>
Bienvenido a FeedbackMessage!
</div>
Simplemente fíjate que estamos extendiendo de Component. El resto del código ya lo debes de
reconocer, con su método render que devuelve el HTML a renderizar. Siendo que lo que hay en
el return no es HTML, sino JSX.
Una vez tenemos la clase, nos tenemos que preocupar de exportarla, para que se conozca desde
fuera de este módulo. Esto se consigue con la sentencia "export" de ES6.
Estamos diciendo que exporte la clase "FeedbackMessage", que es la clase con la que hemos
implementado el componente. Además con "default" estamos permitiendo que no tengamos
que especificar el nombre de la clase cuando queremos importarla, en el siguiente paso.
Solo un detalle, que podríamos definir el export al mismo tiempo que declaramos la clase, con
una cabecera combinada como esta:
El único detalle nuevo ahora es que, para usar el componente, debemos importar su código
definido en el módulo independiente. Lo conseguimos a partir de un "import" de ES6. Si estás
familiarizado con esta práctica no tendrás duda alguna, pero vamos con ello.
Ese import lo colocarás en cualquier módulo que desee usar tu componente nuevo. En el caso
de un proyecto de Create React App tenemos el archivo App.js, que es donde se desarrolla todo
el trabajo con la aplicación. Colocaremos allí el import de nuestro componente.
http://desarrolloweb.com/manuales/manual-de-react.html Página 31 de 68
Manual de React
render() {
return (
<div>
<h1>Manual de React</h1>
<FeedbackMessage />
</div>
);
Como puedes comprobar, una vez realizado el import del código del componente
FeedbackMessage, podemos usarlo en el componente App. Para ello, en el JSX colocaremos la
cantidad de código que sea necesario, junto con la etiqueta del componente que acabamos de
crear.
Conclusión
Las clases ES6 nos facilitan muchas cosas en nuestro desarrollo y siempre es una buena idea
tratar de aprovechar las ventajas de las versiones de Javascript más recientes. Para mantener
una coherencia, en lo sucesivo del manual de React vamos a intentar centrarnos en el
desarrollo mediante clases ES6.
Ten muy en cuenta Create React App, que te ofrece una estructura de proyecto con un entorno
ya perfectamente configurado. También nuestros ejemplos los crearemos basando su
funcionamiento en Create React App, porque así podemos abstraernos de varios aspectos de la
configuración del proyecto. Recuerda que ya presentamos Create React App en el artículo de
Primeros pasos con React.
En el próximo artículo comenzaremos con una de las utilidades más fundamentales para el
desarrollo de componentes React: sus propiedades.
Uno de los recursos elementales que tenemos al desarrollar componentes React son las
http://desarrolloweb.com/manuales/manual-de-react.html Página 32 de 68
Manual de React
propiedades. Nos sirven básicamente para cargar de datos a los componentes, de modo que
éstos puedan personalizar su comportamiento, o para transferir datos de unos componentes a
otros para producirse la interoperabilidad entre componentes. Existen diversas maneras de
pasar propiedades, aunque lo más común es hacerlo de manera declarativa, al usar el
componente dentro del código JSX.
Al usar clases, las propiedades enviadas al componente (enseguida mostraremos cómo usar el
componente y enviarle las propiedades) las vamos a recibir en forma de propiedades o
atributos del objeto. Por tanto accedemos a ellas a través de "this". En concreto usaremos
this.props para acceder a un objeto donde tenemos todas las propiedades definidas como
atributos.
render() {
return (
<div>
</div>
http://desarrolloweb.com/manuales/manual-de-react.html Página 33 de 68
Manual de React
El único detalle nuevo aquí es que estamos usando propiedades: this.props.nombre contendrá
el valor pasado en la propiedad "nombre" y this.props.app el valor de la propiedad "app".
A la hora de usar un componente podemos enviarle propiedades con sus valores. Es una
operación que se hace comúnmente de forma declarativa en el código JSX, cuando usamos un
componente.
Cada propiedad se indica como si fuera un atributo del HTML, al que le indicamos su valor.
Este sería un código donde se usa el componente FeedbackMessage, indicando los valores de
sus propiedades. Fíjate como los valores son indicados como atributos del componente
"nombre" y "app", que son las propiedades usadas en el ejemplo anterior.
render() {
return (
<div className="App">
</div>
);
Otro modo de definir este tipo de componentes sencillos es por medio de simples funciones, lo
que dulcifica bastante la sintaxis de implementación de un componente. En este caso las
propiedades se recibirán por parámetro en la función que implementa el componente.
Nota: Este tipo de componentes sencillos normalmente se conoce como "componentes sin
estado". En un capítulo posterior veremos una contraposición entre los componentes con y
sin estado.
http://desarrolloweb.com/manuales/manual-de-react.html Página 34 de 68
Manual de React
return (
<div>
</div>
Luego, al definir la función se prescinde del método render, porque no estamos haciendo una
clase. La propia función es el equivalente al método render() que teníamos al crear
componentes por medio de una clase ES6. Por lo tanto, devuelve el JSX para representar el
componente.
En lo que respecta al uso de propiedades debes observar que te llegan mediante un parámetro.
Luego accederás a esas propiedades con el nombre que hayas puesto a tu parámetro, seguido
de un punto y el nombre de la propiedad.
Como antes, para volcar datos que viene de Javascript dentro de un JSX, usamos la notación
de las llaves.
Nota: El uso de un componente definido con una función no difiere del uso de cualquier
otro componente, simplemente que debido a que estamos usando una función no podemos
almacenar estado en este componente. Volveremos sobre el estado más adelante.
Ya que estamos en ES6, podríamos perfectamente usar las conocidas "arrow functions" para
definir este componente. La sintaxis todavía quedará más resumida!
<div>
http://desarrolloweb.com/manuales/manual-de-react.html Página 35 de 68
Manual de React
</div>
render: function() {
return (
<div>
</div>
})
Ya conoces lo básico sobre las propiedades. Las hemos podido usar hasta de tres maneras
distintas:
Al final, las diferencias de trabajo con propiedades son mínimas, pero es importante que
conozcas cada alternativa, porque seguramente te las encuentres en tu día a día desarrollando
con React.
En el siguiente artículo comenzaremos a hablar con detalle de algo fundamental para poder
entender el desarrollo con React, como es el estado de los componentes.
http://desarrolloweb.com/manuales/manual-de-react.html Página 36 de 68
Manual de React
Todavía no hemos visto demasiados ejemplos, así que aprovecharemos también para ver
algunos otros y así ir familiarizándonos con el desarrollo usando esta librería Javascript.
Para comenzar queremos analizar estos dos conceptos en contraposición. Cuando empezamos
con React pueden provocar dudas, pero realmente es sencillo. Básicamente, la diferencia entre
componentes con o sin estado estriba en que los componentes con estado permiten mantener
http://desarrolloweb.com/manuales/manual-de-react.html Página 37 de 68
Manual de React
datos propios a lo largo del tiempo e implementar comportamientos en sus diferentes métodos
del ciclo de vida.
Los componentes sin estado no guardan ninguna información y por ello no necesitan de datos
locales. Todos los componentes implementados hasta el momento eran stateless, sin estado.
Eso no significa que no puedan personalizar su comportamiento, lo que se consigue con la
ayuda de las propiedades de los componentes. Estas propiedades que nos pasan se podrán
incluso transformar al producir una salida, de modo que sea acorde con las necesidades, pero
no se guardará ningún valor y el componente no tendrá un ciclo de vida.
Nota: El ciclo de vida de los componentes es algo que todavía no hemos abordado. Más
adelante hablaremos de él, porque entenderlo es muy importante en React.
Para que quede más claro, esto sería una implementación de componente sin estado que recibe
un timestamp como propiedad y genera una vista donde ese instante se muestra convertido en
una fecha en español.
return (
<span>{fecha}</span>
);
Nota: El estilo anterior para la creación del componente se conoce en React como
"stateless function component". Es una alternativa a la creación del componente a partir de
una clase, que solo podemos usar para los componentes sin estado.
http://desarrolloweb.com/manuales/manual-de-react.html Página 38 de 68
Manual de React
render() {
return (
);
Con este ejemplo queremos dejar claro que las propiedades de los componentes se pueden
manipular para transformarlas en cualquier otro dato. Pero atención, en los componentes
stateless las propiedades debemos tratarlas como valores de solo lectura, para evitar
posibles situaciones inesperadas.. Si queremos manipular las propiedades y transformarlas en
otra cosa lo más normal es guardemos los datos nuevos generados como variables, o estado si
fuera necesario. Incluso, si solo se trata de una transformación sencilla para visualizar en la
vista, podrías incluirla como una expresión Javascript embebida entre llaves dentro del JSX,
aunque por claridad del código es preferible crear variables locales para generar esos cambios,
como en el ejemplo anterior. En todo caso, quédate con que las propiedades deben trabajar
como solo lectura.
Los componentes con estado son aquellos que almacenan datos de manera local al
componente. Estos datos pueden variar variar a lo largo del tiempo bajo diversas
circunstancias, por ejemplo por la interacción del usuario con el componente. Este tipo de
componentes tienen algunas particularidades y posibilidades por encima de los componentes
sin estadao que veremos a continuación.
Un ejemplo de componente con estado podría ser un contador. Ese contador puede
incrementarse o decrementarse. Incluso podrían pasarnos como propiedad el valor inicial del
contador, pero el valor actual de la cuenta lo guardaremos en el estado. Otro ejemplo podría
ser un componente que se conecte con un API Rest. A este componente le podemos pasar como
propiedad la URL del API y una serie de parámetros para realizar la solicitud al servidor. Una
vez que recibamos los datos lo común será almacenarlos como estado del componente, para
usarlos como sea necesario.
El componente podrá además reaccionar al cambio de estado, de modo que actualice su vista
cuando sea necesario. Eso lo veremos cuando analicemos el ciclo de vida de los componentes.
Seguro que estarás deseando ver ya un componente con estado. Enseguida nos ponemos con
ello, pero quiero que veamos antes el código de "boilerplate" para crear un componente con
http://desarrolloweb.com/manuales/manual-de-react.html Página 39 de 68
Manual de React
estado.
constructor(...args) {
super(...args)
render() {
return (
Lo primero decir que este componente todavía no tiene un estado implementado, es solo un
código de partida para ver un par de cosas.
Como primer detalle no estamos importando implícitamente la clase Component, para hacer el
extends. No es problema porque depende de React. Así que ahora estamos haciendo "extends
React.Component", lo que es perfectamente válido. Esto no tiene mucho que ver con el tema
que nos ocupa, de los estados, pero así vemos más variantes de codificación.
Nota: Eso de "...args" es una desestructuración, algo que nos viene de ES6, que permite en
este caso recibir todos los argumentos o parámetros enviados a una función, sin necesidad
de indicarlos uno a uno. Puedes obtener más información en el Manual de ES6, artículos
del operador Rest y el operador Spread.
Generalmente en los componentes que tienen estado necesitamos inicializarlo, por lo que el
sitio más correcto sería el constructor. Si realizamos un constructor tenemos que asegurarnos
que se invoque al constructor de la clase padre, que realiza una serie de tareas genéricas para
todos los componentes de React. Como esa invocación hay que hacerla explícita al
sobreescribir el constructor, nos obliga a escribir la llamada a super(). Enseguida veremos
cómo inicializar el estado, pero he querido mostrar ese código, aún sin la inicialización, para
comentar este detalle del constructor.
En el boilerplate encuentras también el método render(), que ya sabemos que es el que nos
sirve para definir la representación del componente.
http://desarrolloweb.com/manuales/manual-de-react.html Página 40 de 68
Manual de React
constructor(...args) {
super(...args)
this.state = {
contador: 0
render() {
return (
A la hora de renderizar el componente, por supuesto, podremos usar el estado para mostrar la
salida. En este caso puedes ver cómo se vuelca el estado en la vista, con la expresión
{this.state.contador}. Algo muy parecido a lo que hacíamos con las propiedades, solo que
ahora los datos nos llegan del estado.
Solo nos falta implementar un botón para incrementar ese contador para ello tenemos que
entrar en un tema nuevo, que son los eventos. Veamos el siguiente código.
constructor(...args) {
super(...args)
this.state = {
contador: 0
incrementar() {
this.setState({
contador: this.state.contador + 1
})
render() {
return (
http://desarrolloweb.com/manuales/manual-de-react.html Página 41 de 68
Manual de React
<div>
<button onClick={this.incrementar.bind(this)}>+</button>
</div>
Ahora tenemos un botón y al hacer clic sobre él se invocará a la función incrementar(). Sin
querer entrar en demasiados detalles sobre eventos, pues no es el asunto de este artículo, cabe
decir que se pueden definir como si fueran atributos de los elementos o componentes. Como
valor le colocamos su manejador de eventos. Además el "bind(this)" lo hacemos para bindear
el contexto. Sobre eventos hablaremos más adelante.
Dicho de otra manera, en el momento que cambiemos el estado con setState(), se pone en
ejecución el motor de React para que se actualice el DOM virtual, se compare con el DOM del
navegador y por último se actualicen aquellos elementos que sea necesario (porque realmente
hayan cambiado). Si no usamos setState() todas esas operativas no se producirían y los
componentes empezarían a funcionar de manera no deseada.
Hay un detalle extra que no queremos dejar pasar, sobre la asincronía en el manejo del estado
por parte de React. Resulta que React, por motivos de rendimiento, puede llegar a acumular
varias llamadas a setState, para procesarlas en un mismo instante.
Lo anterior significa que this.state puede ser actualizado de manera asíncrona. Es decir,
this.setState() puede no ejecutarse inmediatamente, sino esperar a que React juzgue oportuno
hacer las actualizaciones del estado. Esto podría resultar en una situación complicada de
resolver, cuando el cálculo del nuevo valor del estado necesita basarse en el estado que haya
anteriormente.
incrementar() {
this.setState({
contador: this.state.contador + 1
})
En el código del método incrementar anterior, nos basamos en el estado actual del contador,
para incrementarlo en una unidad. Sin embargo, si no sabemos realmente cuándo se va a
http://desarrolloweb.com/manuales/manual-de-react.html Página 42 de 68
Manual de React
ejecutar this.setState. Por ello, podría ocurrir que ese incremento se realice a partir de un valor
del estado que no era realmente el válido.
Para resolver esta situación en React se puede usar un mecanismo de manipulación del estado
basado en una función. Veamos el código para clarificarlo un poco.
incrementar() {
this.setState(prevState => {
});
Como puedes ver, en lugar de enviarle un objeto a setState() le estamos enviando una función.
Esa función es capaz de recibir como parámetro el estado actual. Entonces, el nuevo estado lo
calculo en función del estado actual.
Si habías probado ejemplos anteriores en los que no habías tenido problemas con el cálculo del
estado es normal. Aunque sea asíncrona la actualización del estado es muy rápida, por lo que
es fácil no percibir ningún comportamiento anómalo. Simplemente tenlo en cuenta como una
buena práctica en React.
Conclusión
De momento hemos dado bastante información sobre el estado de los componentes, hemos
podido distinguir componentes con estado y componentes sin estado, y aunque todavía nos
quedan cosas que aprender, hemos podido ver ejemplos para hacernos una idea de cada tipo
de componente.
En futuros artículos tenemos que abordar otros asuntos clave, como la inicialización de
propiedades y estado ante diversos estilos de codificación, así como el ciclo de vida de los
componentes, que es necesario conocer a fondo para resolver muchas de las necesidades de
desarrollo en React.
En capítulos anteriores del Manual de React tuvimos la ocasión de aprender a crear, y usar,
propiedades en los componentes. También analizamos el estado de los componentes y
aprendimos a crear componentes statefull, con sus métodos para definir y alterar el estado, así
http://desarrolloweb.com/manuales/manual-de-react.html Página 43 de 68
Manual de React
En este capítulo vamos a analizar los modos mediante los cuales podemos definir tanto los
valores predeterminados de las propiedades, como del estado. Nos detenemos en este punto
porque, dependiendo de cómo se creen los componentes, el modo de trabajo será diferente.
Antes de comenzar cabe simplemente recordar las variantes básicas para la creación de
componentes, que ya conoces:
Primer render
Como primer render nos referimos a la primera vez que se representa el componente dentro de
la página, y se inyecta en el DOM del navegador. Cuando ocurre esa operación de renderizado,
el componente debe tener tanto sus propiedades como su estado inicializados.
Nota: Estos métodos están muy ligados al ciclo de vida de los componentes, puesto que se
ejecutan en etapas muy concretas de la vida de un componente. Analizaremos con detalle el
ciclo de vida en el próximo artículo.
Vamos a comenzar viendo cómo se usan los métodos de renderizado con la variante de
creación de componentes a partir clases ES6 y luego veremos la alternativa en ES5 mediante
createClass().
Para ambas alternativas debemos tener en cuenta los siguientes procedimientos comunes:
La inicialización de las propiedades se realiza una vez para todos los elementos de la
clase. Si tenemos un componente que se usa 5 veces, los valores de las propiedades
predeterminadas se definirán una única vez.
http://desarrolloweb.com/manuales/manual-de-react.html Página 44 de 68
Manual de React
La inicialización del estado se realiza una vez para cada instancia del componente. Si
tenemos un componente que se usa en 5 ocasiones, la inicialización de su estado se
realizará 5 veces, una para cada instancia del componente.
Nota: En el caso de la inicialización de propiedades, como se realiza una única vez para
todos los componentes de un tipo, no tiene sentido realizarlo en el constructor, puesto que
en ese caso se realizaría para cada una de sus instancias. Por tanto, cuando se ejecuta el
constructor ya estarán inicializadas las propiedades con sus valores por defecto, o aquellos
definidos al usar el componente.
constructor(...args) {
super(...args)
this.state = {
render() {
return (
<div>
<p>Estado: {this.state.estado}</p>
<p>Propiedad: {this.props.propiedad}</p>
</div>
CicloVida.defaultProps = {
Como estarás observando, la inicialización de propiedades se hace una vez definida la clase,
mediante una propiedad que usamos dentro de la propia clase. Al no estar en el código de la
http://desarrolloweb.com/manuales/manual-de-react.html Página 45 de 68
Manual de React
Nota: Como hemos señalado en varios momentos del manual de React, el método
createClass no es el recomendado actualmente para la creación de componentes. Por ello
esta parte quizás te la puedes saltar, si es que todos tus componentes están desarrollados
mediante clases ES6, pues será indiferente para ti.
getDefaultProps()
Este método se ejecuta primero y sirve para generar valores por defecto para las propiedades
de un tipo de componente. Con tipo de componente nos referimos a todas las instancias que un
componente puede generar. Por ejemplo, si un componente se usa 5 veces, este método se
ejecutará una única vez, antes de comenzar a instanciar elementos concretos de ese
componente.
Este método debe devolver un objeto, con el conjunto de propiedades cuyos valores
predeterminados se quiera definir.
Si al usar el componente se indican los valores de las propiedades, se toman esos valores
dentro de la instancia del componente. No se indicaron los valores de esas propiedades al usar
el componente, se crearán igualmente esas propiedades, cargando sus valores definidos
mediante getDefaultProps().
Este método solo es posible usarlo cuando estamos trabajando con la variante de creación de
componentes React.createClass().
getInitialState()
Este método se ejecuta después de haberse definido las propiedades por defecto. Sirve para
http://desarrolloweb.com/manuales/manual-de-react.html Página 46 de 68
Manual de React
El objeto que devuelva getInitialState() será lo que se inicialice como estado del componente.
Veremos ahora un ejemplo sobre cómo se podrían realizar estas inicializaciones mediante el
método de creación de componentes de React.createClass().
getDefaultProps: function() {
console.log('Ejecuto getDefaultProps')
return {
},
getInitialState: function() {
console.log('Ejecuto getInitialState');
return {
},
render: function() {
console.log('Ejecuto render')
return (
<div>
<p>Estado: {this.state.estado}</p>
<p>Propiedad: {this.props.propiedad}</p>
</div>
})
Si usas este componente varias veces observarás gracias a los console.log que primero se
inicializan las propiedades por defecto, una sola vez, y luego se inicializa el estado y se
renderiza tantas veces como componentes hayas generado.
ReactDOM.render(
<div>
<ComponenteInicializacion />
<ComponenteInicializacion />
</div>
, anclaje)
Ahora te dejamos un archivo html completo donde podrás ver el componente en su declaración
http://desarrolloweb.com/manuales/manual-de-react.html Página 47 de 68
Manual de React
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="anclaje"></div>
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
<script type="text/babel">
getDefaultProps: function() {
console.log('Ejecuto getDefaultProps')
return {
},
getInitialState: function() {
console.log('Ejecuto getInitialState');
return {
},
render: function() {
console.log('Ejecuto render')
return (
<div>
<p>Estado: {this.state.estado}</p>
<p>Propiedad: {this.props.propiedad}</p>
</div>
})
ReactDOM.render(
<div>
<ComponenteInicializacion />
<ComponenteInicializacion />
</div>
http://desarrolloweb.com/manuales/manual-de-react.html Página 48 de 68
Manual de React
, anclaje)
</script>
</body>
</html>
Sirva entonces el anterior código solo para motivos de pruebas. Se podría ejecutar
perfectamente haciendo doble clic sobre el archivo HTML, sin necesidad de un servidor web.
Ten en cuenta que nuestro método preferido es el siguiente, en el que realizaremos lo mismo
desde un entorno completo con Create React App y clases ES6.
Continuaremos este manual con el ciclo de vida de los componentes, algo cuyas primeras
trazas ya hemos empezado a ilustrar con este artículo.
http://desarrolloweb.com/manuales/manual-de-react.html Página 49 de 68
Manual de React
Para aprender React necesitamos conocer más detalles importantes sobre el desarrollo de
componentes. Así que vamos a dedicarnos a ver detalles adicionales de herramientas que
disponemos en React para definir componentes.
El ciclo de vida no es más que una serie de estados por los cuales pasa todo componente a lo
largo de su existencia. Esos estados tienen correspondencia en diversos métodos, que nosotros
podemos implementar para realizar acciones cuando se van produciendo.
En React es fundamental el ciclo de vida, porque hay determinadas acciones que debemos
necesariamente realizar en el momento correcto de ese ciclo. Ese es el motivo por el que hay
que aprenderse muy bien cuáles son las distintas etapas por las que pasa la ejecución de un
componente React. No es un tema trivial y tiene diversos matices. Veremos una introducción
en este artículo y pondremos ejemplos.
Antes de comenzar cabe decir que esto es algo específico de los componentes con estado, ya
que los componentes sin estado tienen apenas un método que se usará para renderizar el
componente y React no controlará su ciclo de vida a través de los métodos que veremos a
continuación. Montaje, actualización y desmontaje.
Estas son las tres clasificaciones de los estados dentro de un ciclo de vida del componente.
http://desarrolloweb.com/manuales/manual-de-react.html Página 50 de 68
Manual de React
Además, dependiendo del estado actual de un componente y lo que está ocurriendo con él, se
producirán grupos diferentes de etapas del ciclo de vida. En la siguiente imagen puedes ver un
resumen de esta diferenciación. Observarás que en el primer renderizado de un componente se
pasa por etapas del ciclo de vida diferentes de las que se pasa cuando se produce un cambio en
sus propiedades o un cambio en el estado, o su desmontaje.
La secuencia de ejecución de las etapas del ciclo de vida se da de arriba hacia abajo. Los
elementos marcados con un asterisco naranja no son métodos del ciclo de vida propiamente
dicho, pero sí que son etapas de ejecución de componentes y se producen en la secuencia
descrita en la imagen.
Nota: En el Manual de React ya hemos visto todos los métodos marcados con el asterisco,
por lo que deberían sonarte. Si no es así, simplemente revisa los artículos anteriores.
Ahora vamos a describir las distintas etapas del ciclo de vida de los componentes y luego
podremos ver ejemplos.
Nota: Puedes entender todos estos métodos como "hooks", ganchos que nos permiten
ejecutar código en diferentes instantes. También los puedes ver como "manejadores de
eventos", funciones con código a ejecutar cuando se producen diversas situaciones.
componentWillMount()
Este método del ciclo de vida es de tipo montaje. Se ejecuta justo antes del primer renderizado
del componente. Si dentro de este método seteas el estado del componente con setState(), el
primer renderizado mostrará ya el dato actualizado y sólo se renderizará una vez el
componente.
componentDidMount()
http://desarrolloweb.com/manuales/manual-de-react.html Página 51 de 68
Manual de React
Método de montaje, que solo se ejecuta en el lado del cliente. Se produce inmediatamente
después del primer renderizado. Una vez se invoca este método ya están disponibles los
elementos asociados al componente en el DOM. Si el elemento tiene otros componentes hijo,
se tiene certeza que éstos se han inicializado también y han pasado por los correspondientes
componentDidMount. Si se tiene que realizar llamadas Ajax, setIntervals, y cosas similares,
éste es el sitio adecuado.
componentWillReceiveProps(nextProps)
Método de actualización que se invoca cuando las propiedades se van a actualizar, aunque no
en el primer renderizado del componente, así que no se invocará antes de inicializar las
propiedades por primera vez. Tiene como particularidad que recibe el valor futuro del objeto
de propiedades que se va a tener. El valor anterior es el que está todavía en el componente,
pues este método se invocará antes de que esos cambios se hayan producido.
shouldComponentUpdate(nextProps, nextState)
Es un método de actualización y tiene una particularidad especial con respecto a otros métodos
del ciclo de vida, que consiste en que debe devolver un valor boleano. Si devuelve verdadero
quiere decir que el componente se debe renderizar de nuevo y si recibe falso quiere decir que el
componente no se debe de renderizar de nuevo. Se invocará tanto cuando se producen cambios
de propiedades o cambios de estado y es una oportunidad de comprobar si esos cambios
deberían producir una actualización en la vista del componente. Por defecto (si no se definen)
devuelve siempre true, para que los componentes se actualicen ante cualquier cambio de
propiedades o estado. El motivo de su existencia es la optimización, puesto que el proceso de
renderizado tiene un coste y podemos evitarlo si realmente no es necesario de realizar. Este
método recibe dos parámetros con el conjunto de propiedades y estado futuro.
componentWillUpdate(nextProps, nextState)
Este método de actualización se invocará justo antes de que el componente vaya a actualizar su
vista. Es indicado para tareas de preparación de esa inminente renderización causada por una
actualización de propiedades o estado.
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
http://desarrolloweb.com/manuales/manual-de-react.html Página 52 de 68
Manual de React
Vamos a hacer un ejemplo muy básico sobre estos métodos, que simplemente lanza mensajes a
la consola cuando ocurren cosas. El objetivo es que podamos apreciar el orden de ejecución de
todos estos métodos del ciclo de vida.
El código de este componente con los métodos del ciclo de vida implementados lo encuentras a
continuación:
constructor(...args) {
super(...args)
this.state = {
componentWillMount() {
componentDidMount() {
componentWillReceiveProps(nextProps) {
shouldComponentUpdate(nextProps, nextState) {
return true
componentWillUpdate(nextProps, nextState) {
componentDidUpdate(prevProps, prevState) {
componentWillUnmount() {
http://desarrolloweb.com/manuales/manual-de-react.html Página 53 de 68
Manual de React
render() {
return (
<div>
<p>Estado: {this.state.estado}</p>
<p>Propiedad: {this.props.propiedad}</p>
</div>
CicloVida.defaultProps = {
Solo con que uses este componente tal cual podrás ver ya cómo se ejecutan los métodos del
ciclo de vida relacionados con la parte del "primer renderizado" (mira la imagen anterior de
este artículo).
Si quisieras poner en marcha otros métodos del ciclo de vida necesitarías hacer cosas como
cambiar el estado del componente o sus propiedades. Como referencia te dejamos este otro
código, en el que usamos el componente de CicloVida y cambiamos de manera dinámica una
de sus propiedades.
constructor(...args) {
super(...args)
this.state = {
cambiarPropiedad() {
this.setState({
})
render() {
return (
<div>
</div>
http://desarrolloweb.com/manuales/manual-de-react.html Página 54 de 68
Manual de React
Ese código hace uso del componente anterior. Lo podemos analizar parcialmente, puesto que
todavía hay cosas aquí que no hemos llegado a tocar. Pero lo básico en que fijarse es en la
propiedad bindeada. El estado del componente "UsarCicloVida" tiene un dato que se ha
bindeado como valor de la propiedad del componente "CicloVida". Por otra parte tenemos un
botón que cambia el estado, y por consiguiente el cambio de estado se traduce en una
actualización de la propiedad del componente CicloVida, lo que desencadenará en la ejecución
de los métodos del lifecycle relacionados con el cambio del valor de una propiedad.
Seguramente que, si tienes alguna experiencia con el desarrollo de librerías o frameworks que
usen binding, podrás entender el ejemplo. Pero, como decíamos, son cosas que tenemos que
ver con calma en futuros artículos de este manual.
De momento lo dejamos por aquí. Tienes bastante material para experimentar. Haremos otros
ejemplos del ciclo de vida más interesantes en futuros artículos.
Eventos en React
Cómo definir eventos de manera declarativa en React, cómo implementar los
manejadores de eventos como métodos del componente y bindear el contexto.
Con React se construyen interfaces de usuario para la web y por supuesto, una de las partes
fundamentales de éstas es la interacción con el visitante. Para poder responder a acciones
realizadas sobre los componentes por parte de nuestros usuarios usamos los eventos.
http://desarrolloweb.com/manuales/manual-de-react.html Página 55 de 68
Manual de React
Para definirlo tenemos que indicar dos cosas: Primero el tipo de evento que queremos
implementar y luego el método que hará las veces de manejador de evento.
render() {
return (
<p>
</p>
);
Como puedes apreciar en el código anterior, el método render devuelve el tempate, escrito con
el lenguaje con JSX. Dentro del template tenemos un botón, el cuál tiene definido un evento
"click".
Nota: Es importante darse cuenta que el método asignado a onClick no tiene los paréntesis
al final. No estamos queriendo ejecutar una función, sino indicar qué función se debe
asociar como manejador de eventos. Por eso no se le colocan los paréntesis.
Las declaraciones de eventos en React tienen siempre esa forma: el prefijo "on", seguido del
tipo de evento que queremos capturar (onClick, onInput…). Como valor, colocamos una
referencia al método del componente encargado de procesar el evento correspondiente. Por
tanto, al hacer clic sobre el botón, se ejecutará el método toggleSlider().
Luego tendremos que definir el manejador, como cualquier otro método del componente.
toggleSlider() {
http://desarrolloweb.com/manuales/manual-de-react.html Página 56 de 68
Manual de React
Sin embargo aquí nos encontramos con una dificultad que viene del propio lenguaje Javascript
no de React específicamente. En las funciones no es posible acceder a this como referencia al
objeto sobre el que se invoca el método. Es por ello que necesitamos bindear el contexto.
Este sería el código real del método toggleSlider(), que simplemente tiene que negar una
propiedad boleana del estado del componente.
toggleSlider() {
this.setState(prevState => {
});
Como puedes ver, nos basamos en el estado anterior para calcular el nuevo estado. Por todas
partes estamos usando "this" con la intención de acceder al propio componente que ha
recibido el mensaje toggleSlider(). El problema aquí, como decíamos, es que "this" puede no
contener esa referencia.
Nota: puedes ver más sobre el tratamiento del estado y this.setState en el artículo del
estado de componentes en react.
constructor(props) {
super(props);
this.state = {
showSlider: false
this.toggleSlider = this.toggleSlider.bind(this);
En este constructor estamos haciendo diversas tareas, la primera es la inicialización del estado,
pero lo que nos interesa a nosotros es la parte donde se hace this.toggleSlider =
this.toggleSlider.bind(this);
Nota: Gracias a la llamada a .bind(this) sobre una función o método, le estamos indicando
a Javascript qué es lo que queremos que valga "this" dentro del método. Esto es algo que
seguramente, si tienes experiencia en Javascript, ya habrás hecho en muchas otras
ocasiones.
http://desarrolloweb.com/manuales/manual-de-react.html Página 57 de 68
Manual de React
También podemos hacer este bindeo de this (como contexto para en handler) a la hora de
declarar el evento, en el template. El código nos quedaría más o menos así.
También podríamos obtener el mismo resultado usando una arrow function, que es capaz de
mantener el contexto de this, con un código como este:
Aunque estas opciones nos ensucien algo el template, tienen la ventaja de ahorrarnos algo de
ceremonia en el constructor del componente. Sin embargo, en términos de rendimiento
resultan una solución peor. El problema de estas alternativas es que, cada vez que se renderiza
el componente, se le pasa una nueva función como manejador de evento, donde se tiene que
bindear el contexto nuevamente. Incluso, si la función se está pasando hacia componentes
hijos, forzaría un redibujado adicional del componente hijo, lo que posiblemente nos lleve a
una disminución del rendimiento que podrá notarse en aplicaciones grandes.
En los métodos de React asociados como manejadores de eventos podemos pasar parámetros.
Puede ser útil cuando quieres personalizar el comportamiento del manejador, mediante el
paso de datos que tienes desde el template.
Sería algo tan sencillo como bindear los otros datos que deseas enviar al método que hace de
manejador de eventos. De la siguiente manera:
Ahora, dentro de nuestro método showText() podemos recibir el dato de esta forma.
showText(item, e) {
console.log(e, item);
Esto nos mostrará dos datos en la consola, el "item" es aquella variable extra que estamos
pasando al manejador. Por su parte, el parámetro "e" es el objeto evento de Javascript.
Algo también muy típico que querrás realizar en un componente al trabajar con eventos es
prevenir el comportamiento predeterminado. Por ejemplo, ante un clic en un enlace, podemos
http://desarrolloweb.com/manuales/manual-de-react.html Página 58 de 68
Manual de React
Para ello en Javascript nativo tendríamos dos opciones. La primera sería devolver "false"
(return false) en el código del manejador. Esta alternativa no es válida para React. La segunda
opción, que será la que realmente funcione, es invocar al método nativo de Javascript
preventDefault(), que pertenece al objeto evento.
clickRealizado(e) {
e.preventDefault();
console.log('clickEnP')
Hemos conocido lo básico sobre los eventos en React, junto con algunas cosas no tan básicas,
pero de necesario conocimiento para poder trabajar con esta librería.
Como has podido comprobar, trabajar con eventos no es nada complejo, pero requiere saber
las particularidades de la librería React para evitar problemas o situaciones poco deseadas, que
a veces resulta difícil de debuguear.
En este artículo del Manual de React vamos a explicar una de las necesidades habituales a la
hora de escribir los templates de los componentes React, con JSX. Se trata de realizar
expresiones condicionales, con las que podemos conseguir que varíe condicionalmente el
aspecto de un componente, en función de una de sus propiedades o estado.
http://desarrolloweb.com/manuales/manual-de-react.html Página 59 de 68
Manual de React
Para crear un condicional en un template de React podemos usar una expresión con el mismo
código Javascript que usaríamos en la programación tradicional, aplicando el operador
ternario.
Como sabemos ya, las expresiones en JSX se escriben entre llaves. Ahí podemos colocar código
Javascript y aquel valor que resulte de la evaluación de la expresión es lo que aparecerá como
contenido en el template.
Para el procesamiento del condicional se evalúa un atributo del estado "showTitle". En caso
positivo se muestra un heading H1 con un texto. En caso contrario, simplemente mostramos la
cadena vacía, o sea, nada.
En este caso hemos usado poco código JSX para cada parte del condicional, pero podríamos
tener unas cuantas etiquetas o componentes que mostrar para cada caso. No es un problema,
puesto que podemos seguir usando la misma expresión con el operador ternario. Sólo entonces
convendría organizar el código de una manera que resultase fácil para la lectura. Por ejemplo
tal como se puede ver a continuación.
{ this.state.showTitle
? <div>
<h1>Título</h1>
</div>
: <div className="sin-titulo">
<b>Desconocido...</b>
</div>
Obviamente, como en nuestro ejemplo de código anterior estamos usando el estado para crear
la expresión condicional, tendremos que haberlo inicializado, generalmente en el constructor.
constructor(props) {
http://desarrolloweb.com/manuales/manual-de-react.html Página 60 de 68
Manual de React
super(props);
this.state = {
showTitle: true
En este artículo no vamos a agregar mucho más conocimiento adicional sobre React, pero sí
queremos aprovechar la ocasión para practicar un poco. La idea a continuación es realizar un
componente completo que incorpore un condicional.
Vamos a practicar con los componentes funcionales sin estado, que ya vimos por primera vez
en el artículo sobre El estado en React. Nuestro ejemplo en este caso es un sencillo "badge"
(placa, mensaje pequeñito) que nos dice si algo está completado o no.
Para ello recibirá una propiedad boleana, donde indiquemos desde fuera si tiene que
mostrarse como completado o incompleto. Nuestro componente lo podremos usar de dos
maneras:
<CompletedBadge />
import './CompletedBadge.css';
return props.completed
Importar CSS
http://desarrolloweb.com/manuales/manual-de-react.html Página 61 de 68
Manual de React
import './CompletedBadge.css';
.Badge {
border-radius: 8px;
font-size: 11px;
padding: 4px;
.Badge-completed {
color: green;
.Badge-incompleted {
color: red;
Ese ejercicio nos lleva a otra necesidad común, que consiste en bindear un valor boleano a un
elemento.
Para bindear un valor boleano al componente, simplemente tenemos que indicar una
expresión que se evalúe a boleano.
http://desarrolloweb.com/manuales/manual-de-react.html Página 62 de 68
Manual de React
Conclusión
Hemos resuelto una necesidad común en los templates de React, escritos en JSX, que permite
componer ciertas partes de manera condicional, para colocar unos contenidos u otros
dependiendo del valor de properties o estado.
Además hemos aprendido a cómo enviar datos con valores boleanos, desde los hijos a los
padres, para setear propiedades que vamos a usar para las expresiones condicionales.
En este artículo del Manual de React, después de haber abordado las estructuras condicionales
en JSX, nos vamos a dedicar a otro importante tipo de estructura que podemos usar a la hora
de construir templates: la creación de repeticiones. Este es un recurso que usarás cada vez que
tengas que mostrar listados de ítems en una vista, a partir de datos alojados en un array.
La tarea es bastante sencilla y se realiza mayormente usando una herramienta del propio
lenguaje Javascript, el método map() disponible en los Arrays. Este método sirve para
producir un nuevo array a partir de una repetición por cada uno de los elementos del array
inicial.
console.log(transformado);
Este código produce una salida en la consola del array [2, 4, 8, 16].
http://desarrolloweb.com/manuales/manual-de-react.html Página 63 de 68
Manual de React
Supongo que a estas alturas ya estarás familiarizado con las arrow functions, pero por si acaso,
este código sería equivalente (lo remarco porque vamos a usar bastantes arrow functions en
este artículo).
return item * 2;
});
Nota: si tienes dudas con esto, por favor, lee el artículo sobre las arrow functions de ES6.
Sabiendo usar el método map del array tienes bastante hecho por delante para aprender a
producir tus primeras repeticiones en JSX. Sin embargo, hay un detalle que lo complica un
poquito más y nos hará alargarnos algo, que es el uso de llaves. Pero vamos poco a poco
comenzando por una repetición simple.
Comencemos por crear una repetición sencilla, sin preocuparnos todavía de las llaves. Para ello
vamos a necesitar un componente que tenga una propiedad o estado con valor de array. En el
método render() realizaremos la repetición en ese array, creando un elemento de lista para
cada ítem del array.
constructor(props) {
super(props);
this.state = {
render() {
return (
<ul>
</ul>
);
Para entenderlo piensa que el método map está devolviendo un array de "sub-templates". Para
http://desarrolloweb.com/manuales/manual-de-react.html Página 64 de 68
Manual de React
Este sería un código equivalente, sin la arrow function, por si sirve de ayuda.
render() {
return (
<ul>
{this.state.lenguajes.map(function(item) {
return <li>{item}</li>
})}
</ul>
);
Incluso hay personas que prefieren componer unos templates a partir de llamadas a otras
funciones dentro del componente.
languageItems(items) {
return <li>{item}</li>
});
render() {
return (
<ul>
{this.languageItems(this.state.lenguajes)}
</ul>
);
Nota: Como sabes, a la hora de organizar el código, lo ideal es que lo hagas de la manera
que te parezca más claro, para facilitarte el mantenimiento del código más adelante.
Personalmente yo prefiero ver la repetición en el mismo código JSX, antes de generar un
método extra que me obliga a entender el template en varios pasos. Sin embargo, si lo que
vamos a repetir es muy complejo y consta de mucha cantidad de marcado quizás pueda
tener sentido usar un método o función extra. No obstante, en este caso quizás te interesa
"componetizar" y crear un nuevo componente que encapsule y te abstraiga de todo lo
complejo que sea el marcado a repetir. Luego veremos un ejemplo con esto.
http://desarrolloweb.com/manuales/manual-de-react.html Página 65 de 68
Manual de React
Este mensaje te sale porque en React se deben crear una especie de llaves primarias para cada
uno de los ítem de la repetición. Como en el código anterior no los hemos expresado, se nos
advierte desde la consola para corregir el problema. Aunque, en realidad no se trata de un
problema, en principio, porque React genera unas keys predeterminadas, basadas en el
número del índice de cada elemento del array y las usa en caso que no se hayan indicado
manualmente.
Sin embargo, las llaves generadas a partir de los índices no son muy seguras. Para comenzar, si
ordenamos el array dinámicamente de distintos modos los índices cambiarán y el componente
podría comenzar a funcionar de manera errática. Incluso, aún en el caso que no se necesite
ordenar el array dinámicamente, podemos encontrarnos ante varias desventajas, como una
caída del rendimiento.
Puedes encontrar más información sobre cómo afecta el uso de llaves índice a las repeticiones
en la documentación de React: Lists and Keys.
Sea como fuere, lo ideal es siempre indicar nuestros propios índices. Para ello podemos seguir
varias estratégias:
Lo más normal es que los datos a listar te lleguen desde una base de datos. En este caso,
podrías usar las propias claves primarias de los elementos como índices en el listado.
id: 1,
},
id: 2,
},
<div>
{this.state.msgs.map((item) =>
<article key={item.id}>
<h3>{item.title}</h3>
<p>{item.content}</p>
</article>
)}
</div>
http://desarrolloweb.com/manuales/manual-de-react.html Página 66 de 68
Manual de React
Como puedes ver, en el tag ARTICLE estamos especificando la key, asignando el valor de cada
identificador de mensaje. Es tan sencillo como esto.
Si no tienes llaves primarias o identificadores en cada uno de tus ítem, podrías usar el propio
index del array, que también te entregan como parámetro en la función que envías al método
map(). Sería de esta forma.
<article key={index}>
<h3>{item.title}</h3>
<p>{item.content}</p>
</article>
);
Sin embargo, aunque esto te ahorre ver el warning en la consola, estaremos ante el mismo
problema que no poner nada, pues este índice es el que React crea automáticamente para ti,
que tiene los mencionados problemas de rendimiento o hasta funcionamiento.
En el caso de la repetición sobre el array de comentarios, el JSX que se va a usar para cada
comentario es suficientemente complejo como para que creemos un componente "tonto" (sin
estado) que nos aporte una mayor claridad en la repetición.
Este es el código que podríamos usar para crear este componente sin estado:
return (
<article>
<h3>{props.comment.title}</h3>
<p>{props.comment.content}</p>
</article>
);
http://desarrolloweb.com/manuales/manual-de-react.html Página 67 de 68
Manual de React
Nota: en el anterior código estamos usando lo que se conoce como "stateless function
component", que ya explicamos en el artículo sobre el estado de los componentes.
Ahora, para hacer la repetición y mostrar todos los comentarios que tenemos en un array,
usamos este mismo componente, lo que nos simplificará bastante el código del componente
principal.
render() {
return (
<div>
</div>
);
La cosa sería tan simple como lo que acabamos de ver, si no fuera porque en React necesitamos
generar unas llaves únicas para cada elemento de la repetición. Esas llaves las podemos recibir
desde el backend, con lo que usarlas sería algo directo. Sin embargo, si no las tenemos,
podemos usar cualquier otro recurso a nuestro alcance.
Las llaves no tienen por qué ser numéricas, simplemente tienen que ser únicas para que los
mecanismos internos de React funcionen correctamente,
http://desarrolloweb.com/manuales/manual-de-react.html Página 68 de 68