0% encontró este documento útil (0 votos)
40 vistas14 páginasReact
Cargado por
Alejandra SaucedaDerechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
40 vistas14 páginasReact
Cargado por
Alejandra SaucedaDerechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF o lee en línea desde Scribd
/ 14
atta) ) Neat
t= Tte ltt
Autor: Miguel A. Gomez
https://softwarecrafters. io/react/tutorial-react-js-introduccion Hoy me toca escribir sobre otra de las tecnologias que uso en varios de los
proyectos en los que trabajo, ReactJS. Se que existe muchisima informacién en
la red sobre esta libreria, aunque en muchos casos inconexa.
EI objetivo de este articulo es tratar de organizar y condensar los conceptos
fundamentales para comenzar a utilizar esta tecnologia desarrollando un ejemplo
prictico
{Qué es React.js?
Como muchos ya sabréis, ReaetJS es una libreria Javascript desarrollada
por Facebook y ‘disefiada para ayudamos a crear SPA's (Single Page
Application), su objetivo concretamente es tratarde facilitar la _tarea
de desarrollar interfaces de usuario. Podriamos decir que React es la Ven un
contexto en el que se use el patron MVC 0 MVVM.
Hace uso del paradigma denominado programacién orientada a_componentes.
Dichos componentes se representan como clases que heredande la
clase component enyo tinico requerimiento especial es especificar el método
render que define cual serd el contenido del mismo:
La definicién de dichos componentes se realiza usando una sintaxis especial
llamada JSXque permite escribir etiquetas HTML dentro de JavaScript para
mejorar la expresividad del cédigo. Usar ISX no es obligatorio, pero si es muy
recomendable. Para. mas_—informacién sobre. «= «JSX_—_puedes.
consultar la documentacién oficial. Configuracién del entorno mediante "Create React App"
Normalmente cuando vamos a construir una aplicacién Web con Javascript
tendremos que lidiar con una cantidad de ingente de herramientas como gestores
de paquetes, transpiladores, linkers, builders, etc. El equipo de desarrollo
de Facebook ha sabido ver esta problemitica y se ha sacado de la manga el
proyecto Create React App, el cual realizar por nosotros toda la configuracién
inicial necesaria para poder empezar a desarrollar con React.
Create React App se puede utilizar con el nuevo gestor de dependencias
creado también por la gente de Facebook, o con el clisico NPM. En el
articulo haré uso de NPM, aunque te aconsejo que le des una oportunidad a Yarn,
tiene muy buena pinta.
El tnico requisito imprescindible para poder hacer uso de Create React App con
NPM es tener instalado en el sistema una versién de Nodels >= 4, Si ya dispones
de npm puedes instalar create react app como cualquier otro paquete:
Con este simple gesto tendras configurado JavaScript
ES6 con React, Webpack, Babel y Eslint, nada de instalar dependencias, ni de
crear tareas, Esta todo listo para ejecutar el servidor de desarrollo, y probar la
aplicacién:
Con el servidor corriendo, dirigete a la url 127.0.0.1:3000 para ver la aplicacién
en funcionamiento: orc
€ > SO Olocathost:s
Welcome to React
El proyecto generado tendra una estructura tal que asi:
Pep
coe
come
+ node_modules: contiene las dependencias npm del proyecto
+ public: esta es la raiz de nuestro servidor donde se podra encontrar el
index.html, el archivo principal y el favicon.
: es el directorio principal donde vamos a colocar los archivos de
nuestros componentes ‘Ademis encontraris varios archivos sueltos, un readme, el gitignore
el package,json, este ‘timo contiene las dependencias de npm ademas de la
informacién del proyecto.
Es importante tener en cuenta que para que Create React App funcione
correctamente tenemos que tener obligatoriamente el fichero principal de html en
"public/index.html" y punto de entrada de javascript en "scr/index.js".
La app de ejemplo
La app que se va a desarrollar constari de un formulario en el que el usuario
podra introducir un nombre y un email, y estos se afiadirn a un listado (demo),
La web app estar formada por tres componentes que iremos construyendo a lo
largo del articulo, user, User erForm ; ademas del componente principal
(ap) y el punto de entrada (index.3s. Puedes descargar el ejemplo completo
desde mi cuenta de Github.
El componente principal y el punto de entrada javascript
Como he comentado el punto de entrada a la aplicacién es el fichero ser/index.js,
en este se inicializa el componente principal App.js, a través del
método & Dicho método recibe como primer parimetro el
componen mnderizar y como segundo el elemento del DOM donde el
componente va ser renderizado:
te a
continuacién vemos el cédigo auto-generado que corresponde al
componente principal: ea
CeCe
import *
cease re CL ernst cay
eee Cero
rrr
eee car
Antes de continuar desarrollando el ejemplo voy eliminar unas cuantas lineas de
este componente para dejarlo, por ahora, lo mas simple posible:
ee Ta
pees
Of
TG
Ever ste ares C eases once
En la primera linea ime se esta importando la libreria React y la clase
Component de la cual van a heredar todos los componentes que se creen
mediante clases. Estas requieren del método zendox() para poder funcionar.
En la version previa de Javascript se utilizaba la funcién react. createclass para
inicializar componentes, gracias a ES6 y a su aziicar sintictico, esto se ha
simplificado.
Propiedades (props) de react
Las propiedades de un componente (props) pueden definirse como los atributos
de configuracién para dicho componente. Estas son recibidas desde un nivel
superior, normalmente al realizar la instanciacién del componente y por
definicién son inmutables.
Siguiendo con el ejemplo, voy a implementar el componente user, el cual
contiene dos props name Y user, las cuales redenrizard en un elemento de lista
{ Component } #1
Re os
crs
Las props, basicamente, son el me
inismo principal de React para pasar datos de
un componente padre a un componente hijo, Anidacion de componentes
Una vez. creado el componente User, definiremos el componente useriist, cuyo
objetivo sera renderizar una lista de componentes
EERSTE TTT
On
En el cédigo del componente anterior renderizaré una lista de usuarios, para ello
hace uso del método mar, con el cual itera sobre cada uno de los elementos del
y de usuarios que contiene la propiedad tnis.p
bbida desde el componente
ar
s.users, esta prop sera
re
Map devuelve por cada elemento un componente vsor, el cual recibe via props el
nombre, el email y una key. La propiedad key es un identificador que usa React
en las listas, para renderizar los componentes de forma mis eficiente.
Estado en los componentes
Podria definirse el estado de un componente como una representacién del
mismo en un momento concreto, algo asi como una instantinea del componente.
Dicho estado se iniciara con un valor por defecto. Existen dos tipos de componentes con y sin estado, también denominados
stateful y stateless, respectivamente.
Componentes stateless
Todos los componentes implementados hasta el momento han sido stateless, sin
estado. Este tipo de componentes podrian representarse como una funcién pura:
Las funciones puras por definicién no tienen efectos colaterales, con lo cual este
tipo de componentes no admite ciclos de vida. Para no complicar las cosas,
continuaremos creando nuestros componentes como clases.
Componentes statefull
Los componentes con estado permiten mantener datos propios a lo largo del
tiempo e implementar comportamientos en sus diferentes métodos del ciclo de
vida.
EI ciclo de vida de un componente en React
El ciclo de vida no es mas que una serie de estados por los cuales pasa todo
componente a lo largo de su existencia, bésicamente se pueden clasificar en tres
etapas de montaje o inicializacién, actualizacién y destruccién. Dichas etapas
tienen correspondencia en diversos métodos, que nosotros podemos implementar
para realizar acciones concretas cuando estos van sucediendo. Aunque en el
ejemplo que estamos desarrollando no voy a hacer uso del ciclo de vida, haré un
pequeiio inciso para describir sus métodos sin profundizar excesivamente ‘Métodos de inicializacion:
+ componentwi1iNount (): Se ejecuta antes de que se renderice el componente
por primera vez, es muy util para manejar ciertos datos necesarios para la
representacién del componente o declarar ciertos eventos. Las referencias
a los elementos del componente aun no estin disponibles.
+ componentpiamount (): se dispara justo después del primer renderizado, es
decir el DOM ya esta disponible. Este es el sitio adecuado para realizar
peticiones AJAX, setIntervals o integrar librerias de terceros.
‘Métodos de actualizacion:
© componentWillReceiveProps(nextProps): eS ejecutado cuando las
propiedades se van a actualizar, recibe el préximo valor que va a tener el
objeto de propiedades. sik se lanza antes del render
y decide si nuestro componente se re-renderiza o no. Recibe dos
parametros, las nuevas propiedades y el nuevo estado.
+ componentwillupdate(nextProps, nextstate): se ejecutard justo después
de que shouldComponentUpdate devuelva true, esta pensado para preparar
al componente para su actualizacién por lo que se debe evitar modificar
estados en este punto.
. dComponentUpdate
verops, prevstate): se invoca justo después de
haberse producido la actualizacién del componente, los cambios ya estan
trasladados al DOM.
Métodos de desmontaje:
+ componentwilltamount (Q: es el tnico método que interviene en el
desmontaje de un componente, es invocado justo antes de que el
componente | para realizar operaciones de limpieza
como listeners de eventos o temporizadores.
Continuando con el ejemplo, voy a modificar el componente App para asignarle
un estado inicial que almacene un array con varios objetos "user". Para ello
sobreescribiremos el método constructor del componente asignando al estado
inicial (chi ¢) el array de usuarios
Finalmente, en el método render renderizaré un componente del tipo vsextist, al
cual se le pasa el estado a través de la prop users. Quedando el componente tal
que asi eee ten
Gracias al estado se pueden afiadir nuevos usuarios al array los cuales se
renderizaran automaticamente. Esto es posible ya que, como hemos visto en los
ciclos de vida, el estado tiene la particularidad de que cuando cambia el método
render vuelve a ejecutarse.
Propagacién de eventos
Los eventos, al contrario que las propiedades, se propagan de hijos a padres. Es
decir, son lanzados por los componentes hijos y el padre es el encargado de
gestionarlos.
Veamos esto en nuestro ejemplo, para ello vamos afiadir al componente
UserForm un formulario con dos campos, uno para el email y otro para el
nombre.
ete cee eer ess
soar
soar Pere
soar ert
co vez que se pulse el botén guardar el formulario dispararé el
omit), el cual Hama a una funcién que recibir’ del componente
padre a través de la propiedad props.onaacvser(a esto se le conoce
como Callback).
La funcién callback se define en el componente App.
era la encargado de manejar el evento.
Pcarey
Of
ETOH
Sree
Perea
{id: 1, name
rec eer
emo
Prd 05
Sera ea
es
ee ey
eee (rp)
Of
rr
cee Serta (crear eS wrt s My
ieee eee Cree nee ees El método hanaieonaaau:
recibe como parémetro un objecto event, el cual
contiene toda la informacién del evento, tanto su comportamiento como los
valores de los inputs del formulario. Para evitar que el evento dispare su
comportamiento por defecto (en este caso recargar la pagina), ejecutaremos el
método proventDefauit() antes de capturar los valores de los campos "name" y
"user".
Por ailtimo, actualizaremos el array, para ello en lugar de modificarlo afiadiendo
el nuevo elemento con el método push, usamos el método concat. De esta manera
se creara un nuevo array en lugar de modificar el existente, manteniendo asi
cierta inmutabilidad en el estado del componente
Puedes descargar el ejemplo completo desde aqui.
Resumen
En este tutorial he tratado de mostrar el funcionamiento basico de ReactIS
mientras he ido exponiendo los elementos fundamentales. Aunque he condensado
bastante informacién en este articulo, me he dejado muchisimos elementos en el
tintero. La idea es que esta entrada sirva como base a futuras publicaciones
relacionadas con esta magnifica libreria
Espero haber facilitado tu transicién a ReactJS, si ya lo conocias espero que el
articulo te sirva como referencia,
