Guía para Iniciar con React en HTML
Traducido por
ScribdTranslationsGuía para Iniciar con React en HTML
Traducido por
ScribdTranslationsREACT
INTRODUCCIÓN
React es una biblioteca de JavaScript que nace para convertirse en la solución para desarrolladores frontend y aplicaciones móviles basadas en
[Link] es una biblioteca declarativa basada en componentes.
Declarado porque React permite desarrollar interfaces de usuario UI fácilmente, haciendo que el código sea más legible y fácil.
debbugar, diseñar interfaces para cada estado de la aplicación de modo que ante cada cambio de estado React
actualizará solamente las partes de la UI que dependen de tales datos.
Icomponent son similares a etiquetas html, pueden ser creados componentes individuales o compuestos con una estructura de árbol,
por UI complejas. Las interacciones y la lógica para los componentes se implementan en JavaScript y esto nos permite
fácilmente de pasar y acceder a estructuras de datos complejas en varios puntos de la aplicación sin tener que guardar
información sobre el DOM.
CÓMO AÑADIR REACT A UN SITIO
Para agregar un componente React a una página HTML existente, no habrá requisitos de instalación.
Paso 1: Agrega un Contenedor DOM al HTML (root)
Primero, se debe añadir, a la página HTML, una etiqueta <div> vacía para indicar el punto en el que visualizar.
algo con React.
<div id="content"></div>
Y se debe asignar a este <div> un atributo id único. Esto permitirá encontrarlo con el código JavaScript y de
visualizar un componente React en su interior.
Puedes colocar un <div> "contenedor" en cualquier lugar dentro de la etiqueta <body> e insertar todos los contenedores DOM.
indipendentdi cui hai bisogno in una pagina
Paso 2: Añade las etiquetas de script
A continuación, se deben agregar tres etiquetas <script> a la página HTML, justo antes de la etiqueta de cierre </body>:
Cargar React.
<scriptsrc="htps://[Link]/react@16/umd/[Link]" crossorigin></script>
<scriptsrc="htps://[Link]/react-dom@16/umd/[Link]" crossorigin></script>
<!-- Carga nuestro componente React. -->
<script src="[Link]"></script>
</cuerpo>
Los dos primeros tags cargan React. El tercero carga el código del componente.
Las versiones anteriores están destinadas solo a entornos de desarrollo y no son adecuadas para entornos de producción.
versiones minificadas y optimizadas de producción de React son:
<script crossorigin src="htps://[Link]/react@16/umd/[Link]"></script>
<script crossorigin src="htps://[Link]/react-dom@16/umd/[Link]"></script>
Verifica que la CDN que estás usando tenga configurado el encabezado HTTP Access-Control-Allow-Origin: *:
Paso 3: Crea un Componente React
Crea un archivo Javascript que defina un componente React y a través del id del div se inserte en el HTML.
CREAR UN NUEVO PROYECTO REACT
Cuando en cambio se debe comenzar un nuevo proyecto React y a medida que la aplicación crece, surge la necesidad de
una herramienta más integrada. Existen diferentes toolchains de JavaScript recomendados para el desarrollo de aplicaciones más
complejas para obtener todos los beneficios de React. Las toolchains en React ayudan a compilar como:
Utilizar bibliotecas de terceros importadas de npm.
Identificar inmediatamente errores comunes.
Visualizar en tiempo real el efecto de los cambios en el código JavaScript y CSS durante el desarrollo.
Optimizar la producción.
Le toolchains no necesitan una configuración para ser utilizadas.
React recomienda estas soluciones:
Si se está imprimiendo React creando una nueva aplicaciónpágina únicautilizarCreate ReactAplicación.
Se está realizando un sitio renderizado del lado del servidor con [Link], [Link].
Se está realizando un sitio orientado al contenido estático, usarGatsby.
Se está realizando una librería de componentes integrando una base de código preexistente,
usaréToolchains Más Flexibles.
Crear ReactApp
Crear aplicación Reactes un ambiente cómodo para aprender React, y es la mejor manera de comenzar a construir una
nueva aplicaciónpágina únicaen React.
Esto configura el entorno de desarrollo para poder utilizar las características más recientes de JavaScript, proporciona
una experiencia de desarrollo y optimiza la aplicación para la producción.
Se solicita la instalación deNode >= 8.10 y npm >= 5.6.
Para crear un proyecto, ejecute:
npx create-react-app mia-app
cdmia-app
npm iniciar
npxè un esecutore di pacchetincluso en npm.
Create React App no gestiona la lógica de backend ni las bases de datos; solo crea una cadena de construcción para el frontend, así que
puede ser utilizado con cualquier backend.
Cuando se debe liberar en producción, ejecuta el comando
npm run build
se creará una build optimizada de la aplicación en la carpeta build.
[Link]
[Link] un marco popular y ligero para aplicaciones estáticas y renderizadas del lado del servidor realizadas con
React. Incluye soluciones para el enrutamiento y la aplicación de estilos requiere el uso [Link] ambiente servidor.
Gatsby
Gatsbyes la mejor manera de crear sitios estáticos con React, permite usar componentes React, pero su salida es
constituido enteramente por código HTML y CSS pre-renderizado, para garantizar tiempos de carga rápidos.
Toolchains Más Flexibles
Las toolchains siguientes ofrecen más opciones y flexibilidad, recomendadas para usuarios más expertos:
Nuevotrinoceronteincluye un preset para losaplicaciones Reacty para loscomponentetReaccionar.
Nxpermite el desarrollo de monorepo full-stack, con soporte integrado para React, [Link],Expresar, y otra cosa.
Paquetees un constructor de aplicaciones rápido y sin configuraciones quefunciona con React.
Razzleframework de renderización del lado del servidor que no necesita configuraciones, ofrece más flexibilidad de
[Link].
ESTRUCTURA DEL ARCHIVO DEL PROYECTO CON CREATE-REACT-APP
Una vez creado el proyecto con create-react-app, se crean archivos y carpetas.
El archivo [Link]
La carpeta del proyecto incluye un conjunto de paquetes ya instalados, que forman parte [Link], contenido dentro de la
directorio nodemódulos.
Una parte de los paquetes son necesarios para la ejecución de la aplicación y para que esta pueda funcionar.
Existen otros paquetes que proporcionan herramientas de soporte para la verificación del código, el inicio de un servidor
Web para la depuración, la ejecución de pruebas automatizadas, el ensamblaje de los archivos y los recursos para el lanzamiento en producción
y algo más. Por lo tanto, no son indispensables en tiempo de ejecución, sino solo en la fase de desarrollo.
El file [Link]: se trata de un archivo presente en las aplicaciones y paquetes escritos para [Link], contiene un
objetoJSONque resume la información destacada del paquete, como el nombre (name) y la versión (version), las
dependencias necesarias para el tiempo de ejecución (dependencies) y las que son solo para el desarrollo (devDependencies), además de una serie de
comandos que pueden ser ejecutados a través de npm, el gestor de paquetes de [Link], definidos en la propiedad scripts.
Yo comando react-scripts
create-react-app incluye el paquete react-scripts que proporciona una serie de scripts ya listos capaces de ejecutar diversas
operaciones desde el Símbolo del sistema.
Aprendo el Prompt y desplazándose a la carpeta del proyecto, es posible lanzar los scripts con
Comando npm.
Los comandos disponibles son:
- npm start continúa la transpilación del código fuente de la aplicación, mostrando posibles errores. Al
al final del proceso, se activa el servidor Web para la depuración y se abre el navegador para visualizar la
página de inicio de la aplicación en la dirección localhost y en el puerto predeterminado (3000). Si el navegador no
muestra el contenido esperado, verifica los posibles errores en la consola.
- npm build: ejecuta la construcción del proyecto creando el directorio homónimo y generando en su interior los archivos
assemblado de la aplicación, optimizado para el lanzamiento en un entorno de producción. Las herramientas de agrupación agrupan
y empaquetan los archivos necesarios para el funcionamiento de la aplicación, y inician el proceso de minimización para
reducir el peso de los archivos que el navegador tendrá que descargar, maximizando el rendimiento.
- npmtest:prepara la suite de pruebas para la ejecución. Generalmente, la herramienta permanece activa y en escucha para
realizar nuevamente las pruebas ante cambios en los orígenes de la aplicación.
- npm eject: comando irreversibile que se ejecuta cuando se quiere renunciar al soporte de create-react-app. El
comando elimina del proyecto la dependencia de la herramienta y extrae los archivos de configuración para Webpack, Babel y
las otras herramientas en las que se apoya, dejando el control total en manos del desarrollador.
Archivo sorgent src
La carpeta del proyecto contiene los archivos fuente que constituyen los 'ladrillos' de la aplicación: ellos
comprenden archivos JavaScript con el código de los componentes, archivosCSScon las hojas de estilo, eventuales “activos” (imágenes,
ícono, fuente, etc.).
En la carpeta encontramos el archivo [Link], que representa el componente principal de la aplicación (DOM raíz) y que
albergará en su interior todos los componentes "hijos" que formarán la interfaz de usuario.
El componente que servirá como contenedor se encontrará en el archivo [Link], en la carpeta pública que funciona como 'punto de entrada'
de la aplicación.
JSX: COMPONENTES Y ELEMENTOS
JSX es una sintaxis que puede parecer HTML, pero es una extensión de la sintaxis de JavaScript que permite crear
elementos que componen los componentes. Los componentes se redirigen en el DOM
de la aplicación. Puedes pensar en los elementos como descripciones de lo que quieres ver en la pantalla. React
ley que este objeto utiliza para construir el DOM y mantenerlo actualizado.
Por lo tanto, toda la aplicación tiene una estructura de árbol DOM, se recomienda crear en archivos .js distintos los individuales.
componente y redirigirlos luego al DOM ([Link]) a través del archivo [Link].
En React, los elementos de un componente deben tener un solo elemento padre, por ejemplo:
<div>
<h1> Hola Mundo</h1>
<div>
<h2> Primer ejemplo<h2>
En este caso, daría un error. Si queremos escribir el código anterior, retornando más elementos,
correctamente y sin insertar el segundo elemento en el elemento padre div, o crear otro div, es posible
avvolgerliin <[Link]>...</[Link]> que permite devolver elementos múltiples como
resultado de un metodorender() sin tener que crear un elemento DOM adicional para contenerlos.
En práctica es posible escribir los elementos de los componentes directamente en Javascript, de hecho, JSX es opcional.
y no es requerido para utilizar React, ya que este luego será convertido en Javascript, pero es mucho más
cómodo, simple y legible. El toolBabel convierte, de hecho, el código JSX en JavaScript, en llamadas a
[Link], por ejemplo:
<h1 className="saluto">¡Hola, mundo!</h1>
viene convertido en:
const element = [Link](
h1
saludo
¡Hola, mundo!
);
Código Javascript en JSX
Dentro de los elementJSX se puede ejecutar código Javascript (expresiones, variables, funciones, etc.) insertándolo
en paréntesis llaves { }, por ejemplo incluimos el resultado de la llamada a una función JavaScript, en un
elemento<h1>.
<h1> Hola, {formatName(user)} </h1>
const user = {
Giuseppe
Verdi
};
function formatName(usuario) {
return [Link] + ' ' + [Link];
}
[Link](elemento, [Link]('root'));
Veamos en este ejemplo que es posible crear elementos y asignarlos a variables;
En el elemento, en las llaves {} se realiza una llamada a una función javascript que toma los datos de un
objeto usuario. Y finalmente el elemento es finalmente redirigido al DOM a través del nombre de la variable.
Es posible utilizar JSX dentro de instrucciones if, ciclos for, asignarlo a variables, utilizarlo como argumento de
una función y devolverlo como resultado de una función.
No añadas las comillas alrededor de las llaves cuando incluyas una expresión JavaScript en un atributo.
Deberías utilizar o las comillas (para las cadenas) o las llaves (para las expresiones), pero nunca ambas en la misma.
mismo atributo.
React DOM utiliza la convencióncamelCaseal asignar el nombre a los atributos, en lugar de ese utilizado
normalmente en HTML, modifica el nombre de algunos atributos, por ejemplo, el atributo class se conviertenombreDeClaseen
JSX etabindexdiventatabIndex.
Los componentes React implementan unmetodorender() que recibe datos de entrada y devuelve lo que debe visualizar.
PRIMA APP REACT: Hola Mundo
Ejemplo de app react que crea un componente HelloMessage mediante una clase
clase HelloMessage extiende [Link] {
renderizar() {
regresa (
<div>
<h1>Hola {[Link]}</h1>
</div>
);
}
}
[Link](<HelloMessage name="Mundo" />, [Link]('root'));
PROYECTO REACT RELOJ
Ejemplo concreto de una aplicación React de un reloj que muestra la hora actual y demuestra la reactividad de React:
La aplicación está compuesta por 4 archivos:
archivo [Link]
<div id="root"></div>
Archivo html que contiene la etiqueta raíz y representa el elemento padre del DOM en c0u65Zzzi se le redirigirá y
visualizada toda la aplicación.
archivo [Link]
Este archivo contiene el componente Reloj
importar React de 'react';
función Orologio() {
const oraMilisegundos = [Link]();
const ora = new Date(oraMilisegundos);
regresar (
<p>{[Link]()}</p>
)
}
exportar por defecto Orologio;
Se importa la librería React, luego se crea el componente Reloj a través de una función. Con
[Link]() obtiene la hora actual en milisegundos, luego se crea un objeto de tipo Date. El componente devuelve un
elemento p en el que recibe el objeto toLocaleTimeString() lo visualiza en formato horas/minutos/segundos. Finalmente se
exportado el componente.
archivo [Link]
importar React de 'react';
importar Orologio desde './Orologio';
función App() {
regresar (
<div className ="App">
<h1>Hora Actual</h1>
<Reloj/>
</div>
)
}
exportar predeterminado App;
es el componente padre de toda la aplicación, importa todos los componentes hijos, en este caso solo el componente
Reloj y regresa la estructura de todos los componentes de la aplicación.
Veamos que importado el componente Reloj, este puede ser insertado en la aplicación a través de un
etiqueta simple <Reloj/>.
Los nombres de los componentes deben comenzar siempre con una letra mayúscula, a diferencia de los tags JSX.
archivo [Link]
importar React de 'react';
importar ReactDOM de 'react-dom';
importar App desde './App';
función horario() {
[Link](<App/>, [Link]('root'));
}
setInterval(orario, 1000)
Esto importa React, ReactDOM, el archivo del componente padre App.
[Link](componente, donde redirigirlo)
redirige el componente <App/> en la raíz del DOM en el HTML. Este componente muestra la hora actual de manera
statco, es necesario actualizar la página para ver las actualizaciones, por eso se inserta la redirección
dentro de una función que se llama cada segundo con setInterval(). En cada llamada de la función,
redirigirá el componente cada segundo y una característica de React es que en cada redireccionamiento, se
confrontado el DOM con el anterior y solo cambiarán los elementos que hayan sufrido modificaciones. En este
Caso, entre todos los elementos, solo cambiará <p></p>, cada segundo, el resto no.
PASAR DE CLASE A FUNCIÓN Y VICEVERSA
Antes de que se introdujeran los hooks para gestionar el estado en React, el código se escribía con clases. Introduciéndolos
hooks se ha pasado de las clases a las funciones y a menudo se encuentra aún código con las clases, pero la diferencia entre
la clase y la función son mínimas y se puede pasar fácilmente de una clase a una función y viceversa.
Dados la funcin:
función App() {
devuelve (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p> Aplicación Prima React </p>
</header>
</div>
);
}
Para convertirla en una clase:
clase App se extiende de Componente {
render() {
volver (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p> Aplicación Prima React </p>
</encabezado>
</div>
);
}
}
ImportarReact, { Componente} desde 'react';
Si usa la palabra clave class, seguida del nombre, y se extiende Component y se inserta todo el bloque de código en el método
render() que se llama y se ejecuta automáticamente por defecto.
COMPONENTES Y PROPIEDADES
Los componentes permiten dividir la interfaz de usuario en partes independientes y reutilizables. Conceptualmente, los componentes
son como funciones de JavaScript: aceptan como entrada datos cuyo nombre es 'props' y retornan elementos que describen
cosa debería aparecer en la pantalla.
Props representa un objeto que contiene las propiedades de un componente.
Tomemos el ejemplo anterior del reloj y además de la hora actual local, añadamos otro componente reloj.
che atraverso la props fusoorario mostra l'ora di 6 ore più avanti.
el archivo [Link] se convierte en:
función App() {
regresar (
<div className ='App'>
<h1>Hora Actual</h1>
0
6
</div>
)
}
Vemos que la propiedad fusoorario se pasa al componente como un atributo deltag.
el archivo [Link] se convierte en:
importar React de 'react';
función Orologio(props) {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilisegundos);
volver (
<p>{[Link]()}</p>
)
}
exportar por defecto Orologio;
la función componente recibe como parámetro props. Al horario actual en milisegundos se le añade la zona horaria
llamado por props y convertido en milisegundos (* 3600 * 1000).
En un componente no etiquetado se pueden indicar tantas props como se desee y luego se llaman en el componente (que recibe
como parámetro siempre solo props) a través de [Link].
El objeto props es de solo lectura, no puede ser modificado.
CLASES Y PROPIEDADES
Para llamar y utilizar en una clase las propiedades props, tomemos el ejemplo del reloj convertido en clase:
archivo [Link]
importar React de 'react';
claseOrologio extiende [Link] {
constructor(props) {
super(props);
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilisegundos);
retornar (
<p> {[Link]()}</p>
)
}
}
exportar por defecto Orologio;
Podemos extender la clase tanto con Component, importándolo en react, como simplemente con
[Link].
Para llamar a las props en la clase: se define el método constructor(), antes del método render(), y en él se
passaprops, que se define luego en el método super().
Para utilizar las props en la clase (en el método render()) se hace referencia a ellas con:
[Link]
LO ESTADO DE LOS COMPONENTES
Finalmente, para actualizar la interfaz de usuario, llamamos a [Link]() para cambiar la salida renderizada.
El estado (o estado) es un objeto donde se archivan los valores que pertenecen al componente, y cada vez que
el estado cambia el componente se vuelve a renderizar (se llama automáticamente a render()).
El estado es similar a las props, pero es privado y completamente controlado por el componente.
Para gestionar los estados, son necesarios componentes de tipo clase, de modo que están encapsulados en el componente.
El estado se define con la palabra clave state y se inicializa en el constructor() de la clase:
constructor() {
super();
{ ... }
}
Retomemos el ejemplo del Reloj, falta un requisito fundamental: que el componente Reloj se ajuste
tmer ed aggiorni la propria UI ogni secondo nel suo interno. E poi avere:
[Link](<Orologio/>, [Link]('root'));
Para implementar esto, necesitamos añadir un “estado” al componente Reloj, que se convierte en:
importar React de 'react';
clase Orologio extiende [Link] {
constructor(props) {
super(props);
[Link] = {
nueva Fecha()
}
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilisegundos);
volver (
<p>{[Link]()}</p>
)
}
}
exportar por defecto Orologio;
El método getTime() es un método del objeto Date, igual a now(), que devuelve la hora actual en milisegundos.
Esta clase se redirige con
[Link](<App/>, [Link]('root'));
así que por ahora regresa la hora de forma estática (no corren los segundos).
CICLO DE VIDA DE LOS COMPONENTES DE UNA CLASE
Cada componente de React está caracterizado por un Ciclo de Vida en el que podemos distinguir tres fases:
Inicialización del componente (Montaje)
Actualización del componente (render) mediante setState() o la recepción de nuevas props (Actualizando)
Eliminación del componente (Desmontaje)
Un componente, en su ciclo de vida, ejecuta en orden algunos métodos. Estos métodos tienen el propósito de gestionar el ciclo.
di vita di un componente React e cominciano con will quando precedono un evento e condid quando seguono un
evento.
Tenemos acceso a estos métodos que podremos usar para ejecutar determinadas acciones cuando un componente es
creado, actualizado o destruido o, incluso, decidir si un componente debe ser modificado como resultado de la
variación de al menos una de las propiedades contenidas en su objeto State o a la recepción de nuevas Props.
Inicialización de un componente (MONTAJE)
El constructor es el primer método que se llama para una correcta inicialización, se asignarán valores de
las props por defecto se definen a través del objeto defaultProps y, por lo tanto, se inicializará el objeto state.
- El segundo método en ser invocado es componentWillMount() que se llama antes de que el componente
venga reindirizzato (metodo render).
React aconseja usar el constructor en lugar de este método para cada inicialización.
- render() es el único método obligatorio cuando se quiere definir un componente. Debe devolver al menos un React
Elemento o null o falso, si no queremos mostrar nada en la pantalla para ese componente. Debe ser una
función pura, no debe modificar directamente las propiedades del objeto.
- ComponentDidMount() es el método que se invoca después de que se ejecuta el render(). Este es el método para usar para
manipular el DOM o recuperar datos de un servidor.
Actualización del componente (ACTUALIZANDO)
Actualización del objeto Estado
Cuando se realiza la actualización del objeto State, se invocan una serie de métodos en secuencia.
El primero es shouldComponentUpdate() que recibe como argumentos los objetos nextProps y nextState que
representan el próximo valor del objetoPropse del objetoState y devuelve un valor booleano. Si es falso, i
los métodos sucesivos no serán invocados, por defecto devuelve true, permitiendo la actualización del componente
a cada modificación de los objetos State y Props. Por esto, se puede utilizar para determinar si el componente debe
estar actualizado con los próximos valores de PropseState. Dentro de este método es posible comparar los valores.
compara el estado actual de los objetos State y Props con los de nextState y nextProps, permitiendo así decidir si realizar
la actualización del componente.
-SeshouldComponentUpdate()resttuiscetrue, verrà invocatocomponentWillUpdate(). In questo metodo, non è
consentir a modificar el objetoState a través de [Link](), se puede utilizar para preparar el componente
antes de que ocurra la actualización del objeto State o del objeto Props.
-Después del metodorender(), se invoca componentDidUpdate() que se puede usar para descargar datos actualizados
da un servidor o para operar en el DOM.
Recepción de nuevas Props
Incluso en el caso de que un componente reciba nuevas Props, se invocarán casi los mismos métodos en caso
del objeto Estado.
En este caso tenemos un método adicional: ComponentWillReceiveProps(), que no se invoca en fase de
inicialización de un componente, pero posteriormente, en el momento en que se pasan nuevas Props a un
componente. Puede ser utilizado para actualizar y modificar el objeto State dentro de un componente si las
las nuevas Props recibidas son diferentes de las propiedades del objeto Props actual.
Distruzione di un componente (SMONTAGGIO)
En la fase de desmontaje de un componente, se invocará como único método componentWillUnmount() que puede
ser usado para operaciones como invalidar eventualidades iniciadas en la función componentDidMount() y otras
operaciones de mantenimiento que prevengan fugas de memoria.
AGREGAR MÉTODOS DE CICLO DE VIDA A UNA CLASE
En nuestro ejemplo, queremosestablecer untmarcada vez que se renderiza el reloj en el DOM por primera vez
(montando). También queremoscancelar eltmarcada vez que el DOM producido por el Reloj es eliminado
(desmontando).
El método componentDidMount() se ejecuta después de que la salida del componente ha sido renderizada en el DOM.
un buen punto en el que establecer un temporizador y implementamos un método llamado actualizarTiempo que será invocado
del componente Orologio cada segundo:
componentDidMount() {
[Link] = setInterval([Link], 1000);
}
El método actualizarTiempo será:
() => {
[Link]({
nueva Fecha()
});
}
Para realizar una actualización del estado se utiliza el método setState() que recibe las propiedades del estado que deben ser
actualizadas. En este caso tenemos la propiedadhorario, pero si hubiera habido otras en el objeto [Link] estas
no serían tomadas en cuenta.
setState() fa confrontare le proprietà dell'oggetto che riceve con quelle di [Link] e se sono state modificate,
le sobrescribe. En nuestro caso, simplemente se redefine la propiedad horaria con un nuevo Date() más reciente,
che setState() confronta con quello in [Link] e lo sovrascrive.
De esta manera, el reloj suena cada segundo.
Recapitulamos lo que sucede y el orden en que se invocan los métodos:
1 Cuando<Orologio/>se pasa a [Link](), React invoca el constructor del componente que
inicializa [Link] con un objeto que incluye la hora actual. Luego se actualiza este estado.
2 React invoca el método render() del componente Reloj y aprende qué debería mostrarse en la pantalla.
pantalla. React se encarga de actualizar el DOM para que coincida con la salida de render.
3 Cuando la salida de la renderización de Orologio se inserta en el DOM, React invoca el método
componentDidMount(). En su interior, se establece un temporizador que invoca actualizaTemp una vez por segundo.
4 Cada segundo, en su interior, el componenteRelojimplementa una actualización de la UI
invocandostate() con un objeto que contiene la nueva hora actual. Con la llamada a setState(), React es
informa del hecho de que el estado ha cambiado y llama de nuevo al metodorender() para saber qué debe ser
mostrado en la pantalla. Esta vez, [Link] en el método render() tendrá un valor diferente y la salida de la
La renderización incluirá el horario actualizado. React actualiza el DOM en consecuencia.
Si el componente Reloj tuviera que ser eliminado del DOM (DESCONECTADO), React invocaría el método
componentWillUnmount()ed es aquí donde debemos cancelar el timer para liberar las operaciones del
componente que ha sido desmontado en el DOM:
componentWillUnmount() {
clearInterval([Link]);
}
USO DE PROPS Y ESTADO
Resumiendo, podemos decir que:
lostate: es un conjunto de datos que modifican para dar lugar a una actualización del componente
mismo.
Los props constituyen valores inmutables para los cuales no se prevé ninguna alteración, útiles para
configurar el componente o para indicar valores predeterminados para el estado.
GESTIÓN DE EVENTOS
Los eventReact se declaran como para el html, con la diferencia de que deben tener una sintaxis:
{[Link]}
Tomemos el ejemplo del Reloj e insertamos un botón que detiene y reinicia el tiempo.
Es necesario gestionar el estado del componente, y en él inicializamos una propiedad start:true:
[Link] = {
nueva Fecha()
start: true
}
Dopodiché inseriamo nel return di render() un tag bottone:
<button>Detener</button>
Para gestionar este botón, es necesario insertar un evento que llame a una función:
<button onClick={[Link]}>Detener</button>
Hasta ahora hemos implementado el reloj de manera que, una vez que el componente está montado en el DOM, parte
el intervalo cada segundo en componentDidMount() y lo desmontamos en componentWillUnmount().
En este caso, se debe gestionar con el evento y la función que se llama si:
- el reloj está parado, hay que hacer que vuelva a funcionar;
- el reloj NO está parado, hay que pararlo desmontándolo.
Creemos un metodostart(), con el setInterval(), y llamemos a [Link]() en componentDidMount().
Creamos un metodostop(), con clearInterval(), y llamamos [Link]() en componentWillUnmount().
Cuando se define un componente de clase, es común usar un método de la clase como gestor de eventos:
gestTime() {
[Link]((estado) => {
[Link] ? [Link]() : [Link]();
![Link] //estado contrario
})
}
setState() recibe una función, que recibe como parámetro el estado previo y retorna el estado contrario. Primero
verifica que si el estado es start llama al método stop() para detener el reloj, de lo contrario llama al método start() para hacerlo
reparar el reloj.
encuadernación
El método anterior, sin embargo, de esta manera da ERROR, ya que no se puede leer setState(). Esto es porque
en JavaScript, los métodos de las clases no sonasociadopor defecto. En el método gestTime el thisapp pertenece al método
mismo, pero no se refiere a la clase, por lo que es necesario hacer el binding, es decir, asociar el método a la clase.
El enlace va a hacer un constructor() con:
[Link] = [Link](this)
en nuestro caso:
[Link] = [Link](this);
Pero si tenemos muchos métodos, hay que escribir esto para cada método en el constructor(). Otra forma equivalente.
está en declarar el método como una función de flecha:
() => {
[Link]((estado) => {
[Link] ? [Link]() : [Link]();
![Link]
})
}
Esto es porque las funciones de flecha no implementan el this, por lo que en este caso el this hará referencia a la clase.
Si queremos un botón dinámico que cambie según el estado:
<button onClick = {[Link]}>{[Link] ? 'STOP' : 'START'}</button>
La clase Reloj al final será:
importar React de 'react';
class Orologio extiende [Link] {
constructor(props) {
super(props);
[Link] = {
nueva Fecha()
start: true
}
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilisegundos);
regresar (
<p>En {[Link]} {[Link]()} </p>
<button onClick = {[Link]}>{[Link] ? 'DETENER' : 'INICIAR'}</button>
</p>
)
}
() => {
[Link]({
nueva Fecha()
});
}
() => {
[Link]((estado) => {
[Link] ? [Link]() : [Link]();
![Link]
})
}
comenzar(){
[Link] = setInterval([Link], 1000);
}
detener(){
clearInterval([Link]);
}
componentDidMount() {
[Link]();
}
componentWillUnmount() {
[Link]();
}
exportar por defecto Orologio;
ARRAY DE ELEMENTOS
Dado el ejemplo de [Link]:
. . .
<Orologio paese = 'Italia' fusoorario = '0'/>
<Orologio paese = 'Usa' fusoorario = '-6'/>
. . .
veamos que contiene solo dos elementos<Orologio>, pero puede pasar que en un componente haya muchos elementos
del mismo tipo y por esto pueden ser gestionados arrays de elementos que pueden ser implementados dinámicamente.
En la clase o fuera de ella declaramos una variable array const y en ella vamos a insertar tantoggetquant
son los elementos, que contendrán las props de los elementos. Para nuestro ejemplo:
const relojes = [
{
Italia
0
},
{
Estados Unidos
-6
}
]
Ora per prendere i dati dall'array e implementare dinamicamente gli elementi<Orologio>, creiamo nel componente
clase un método que lo gestione y retornará tantas elementos<Orologio> como elementos hay.
getRelojes(){
return [Link]((clock) => {
return <Reloj pais = {[Link]} horadezona = {[Link]}/>
})
}
Usamos el metodomap() que ejecuta una función sobre cada elemento que recibe del array que lo llama (clocks).
Finalmente chiamiamo il metodo nel punto in cui devono essere elencati gli elementi, con:
[Link]()
De esta manera, el método getOrologi() devuelve un error, ya que en React, para cada elemento de un array, se espera
un valor único clave. Tipo un ID que react usa para distinguir los elementos, así que podemos agregar un valor id
único o usar un valor del que estemos seguros que sea único para cada elemento. En nuestro ejemplo, podemos usar la
paese
getRelojes(){
return [Link]((clock) => {
devolver <Orologiokey = {[Link]}paese = {[Link]} fusoorario = {[Link]}/>
})
}
El archivo [Link] al final será:
importar React de 'react';
import Orologio from './Orologio';
const relojes = [
{
Italia
0
},
{
[Link].
-6
}
]
clase App extiende [Link] {
getRelojes(){
return [Link]((clock) => {
return <Reloj key = {[Link]} paese = {[Link]} fusoorario = {[Link]}/>
})
}
render() {
regresar (
<div className="App">
<h1>Hora Actual</h1>
{[Link]()}
</div>
)
}
}
exportar defecto App;
REACT ROUTER
ReactRouter es una biblioteca que permite crear aplicaciones React con múltiples páginas en las que la transición entre una
la página y la otra ocurre de manera dinámica a través de Javascript, sin tener que recargar la página cada vez.
En React, el Router no es más que un componente que roteiza otros componentes.
npm install --save react-router-dom
Nelfile [Link] importamos dos componentes: BrowserRouter, que renombramos por simplicidad a Router y Route.
import {BrowserRouter as Router, Route} from 'react-router-dom';
Envuelve todo el componente con el elemento <Router> y una serie de elementos <Route> encerrados en un <div>.
Los elementos <Route> tienen un atributo path que indica para qué URL debe mostrarse un cierto componente.
<Enlazador>
<div>
<Ruta exacta path="/" componente={Inicio} />
<Route strict path="/team/" render={() => <h1>Equipo</h1>} />
</div>
</Enrutador>
En Pratca Route lee la URL y en base a ella redirige el componente.
En el primer elemento <Route> hemos utilizado la propiedad exacta para indicar que se debe mostrar el componente
En casa, solo se el valor del atributo path es igual al valor de la propiedad [Link]. Si no tuviéramos
usatoexactReact Router habría mostrado el componente Home también para la ruta "/team".
En el segundo elemento <Route> hemos utilizado el atributo strict que hará que haya una coincidencia solo si
[Link] es exactamente igual a "/team/" es decir, solo si está presente la barra diagonal final.
<Route> también puede recibir otros atributos: component, render, children. En los tres casos se pasarán al
componente o alle funzioni (render y children) las propiedades history, location y match que son objetos.
La propiedad componentspecifica un componente que queremos que se muestre en caso de que haya una coincidencia
(componente que debe mostrarse para un cierto valor de [Link]).
Podemos en su lugar usar la propiedad si queremos que se invoque una cierta función.
La propchildren también recibe una función que, sin embargo, siempre se ejecutará.
Los componentes <Link> y <NavLink>
Definamos la ruta, con Route, veamos cómo agregar enlaces dentro de la aplicación para pasar de una página
al'altrasenza deber realizar el refresh del navegador, para hacer esto, en lugar de las etiquetas <a href=""> (que realiza llamadas
al servidor, recargando la página), del HTML, usamos dos componentes, Link y NavLink.
El componente Link acepta dos atributos: toche puede ser una cadena o un objeto ereplace. Para entender cómo
Funciona este último, debemos considerar que React Router mantiene en memoria el historial de las páginas.
visualizar. Imaginemos el historial como una pila, cada vez que se visita una página, se añade una nueva
elemento en la pila. Si el atributo reemplazado del componente Link es igual a verdadero, se reemplaza el último elemento de la
pila en lugar de añadir uno nuevo.
importar React, {Componente} de 'react';
import {Link} from 'react-router-dom';
clase Equipo extiende Componente {
renderizar() {
returnar (
<div>
<h1>Equipo</h1>
<Link to="/stagione">Temporada 2017</Link>
</div>
);
}
}
exportar por defecto Equipo;
Dentro del componente Equipo, insertamos un Enlace que llevará a la dirección localhost:3000/temporada y no se mostrará
recargar la página del navegador.
NavLink es una versión particular de Link. Puede recibir propiedades como activeClassName y activeStyle.
actveClassName="nomeClasse" da uno stile quando un link è attivo.
ConactveStyle podemos pasar un objeto a través del cual podemos especificar el estilo que se aplicará
al elemento NavLink cuando la URL actual es igual al valor del atributo 'to', es decir, cuando [Link] es
igual a la ruta especificada en el atributo 'to'.
importar React de 'react';
importar {NavLink} de 'react-router-dom';
const Nav = () => (
<nav>
<NavLink exact activeClassName="current" to="/">Página Inicial</NavLink>
<NavLink activeClassName="current" to="/team/">Equipo</NavLink>
<NavLink activeStyle={{color: 'green'}} to="/stagione/">Temporada</NavLink>
</nav>
);
exportar predeterminado Nav;
REDUX
React es una biblioteca de vista, y no es tarea de React gestionar específicamente el estado.
Redux es "un contenedor de estado predecible para las aplicaciones JavaScript". En práctica es una arquitectura para la
gestión del estado mediante pasos claros y bien definidos. Redux se puede conectar con cualquier biblioteca
JavaScript, y no solo React. Redux permite separar el estado de la aplicación de React
ESTADO DE UNA APLICACIÓN
El estado es el conjunto de las condiciones internas o información en un instante específico que determinan el resultado de la
interacciones con el exterior. La aplicación tiene un estado inicial, y cualquier interacción del usuario desencadena
una acción que actualiza el estado. Cuando el estado se actualiza, se muestra la página.
La memorización de los datos de la aplicación en el estado de un componente está bien cuando se dispone de
una aplicación básica de React con pocos componentes, pero la mayoría de las aplicaciones reales tendrán muchos más
características y componentes. Cuando aumenta el número de niveles en la jerarquía del componente, la gestión de la
el estado se convierte en problemático y es por eso que se usa Redux.
A menudo una aplicación se encuentra en la necesidad de gestionar:
datprovenientdal server e memorizzatin una cache locale;
datgeneratdall’applicazione stessa che devono essere inviatal server;
los datos deben permanecer en local para representar, por ejemplo, la situación actual
de la interfaz de usuario o las preferencias expresadas por el usuario.
La gestión de este dato es compleja por la cantidad y por el hecho de que estos datos pueden variar por causas diversas.
si luego consideramos que estas modificaciones pueden ocurrir de manera asíncrona, se vuelve aún más complejo y es
fácil perder el control sobre la evolución del estado.
FUNCIÓN PURA
Una función pura es una función normal con dos características:
1 Dado un conjunto de entradas, la función siempre debe devolver la misma salida.
2 No produce efectos secundarios.
Por ejemplo, una función es aquella que devuelve la suma de dos números.
Las funciones puras dan una salida estable y son deterministas. Una función se vuelve impura cuando ejecuta
algo diferente de calcular su valor de retorno.
LOS TRES PRINCIPIOS
La complejidad en la gestión del estado de una aplicación radica en su modificabilidad y asincronía. La solución de
Redux busca eliminar estos dos aspectos, basándose en tres principios fundamentales:
1 existe una única fuente de verdad
el estado de toda la aplicación se almacena en un único objeto
2 el estado es de solo lectura
no es posible modificar directamente la información almacenada en el estado de la aplicación; solo
trámite acciones explícitas
3 las modificaciones al estado deben hacerse con funciones puras
el estado actual es reemplazado por un nuevo estado generado exclusivamente por funciones basadas en una
acción y al estado anterior
La aplicación de estos principios define la arquitectura de Redux y los límites que debe respetar una aplicación que
entiende gestionar el estado según este enfoque.
VENTAJAS
Con Redux, las variaciones del estado de una aplicación son analizables y reproducibles, y es más sencillo.
comprender cómo se llegó a una determinada situación
Redux obliga a organizar el código siguiendo un patrón específico, lo que define indirectamente uno
estándar de codificación.
Es posible definir un estado inicial y hacer que la aplicación parta de ese estado, de esta manera para facilitar el
renderizado de aplicaciones JavaScript desde el servidor
Es posible rastrear las transiciones de estado tanto para la depuración como para implementar acciones.
INSTALACIÓN
Si usamos [Link], podemos instalar Redux simplemente con el siguiente comando:
npm instalar --guardar redux
que descarga el paquete npm de Redux lo hace disponible para poder ser importado en la aplicación.
Si no utilizamos un ambiente de desarrollo [Link], siempre podemos descargar la [Link]ón de
distribuzionedel paquete npm e insertando un referente dentro de la página HTML de la aplicación
<script src="[Link]"></script>
En este caso, Redux será accesible como una variable global [Link].
COMPONENTES CONTENEDOR Y COMPONENTES DE PRESENTACIÓN
Es útil dividir la arquitectura de los componentes en dos categorías para las aplicaciones React: componentes contenedores
(inteligente) e componente di presentazione (tonto).
El componente contenedor se ocupa de cómo funcionan las cosas, mientras que los componentes de presentación se ocupan.
di cómo aparecen las cosas.
Icomponent smartgestscono lo stato e poi lo passano ai componentdumb. Si prendono cura di effetuare le
llamadas a la API, recuperar los datos de la fuente de datos, procesar los datos y luego establecer el estado.
Icomponent recibe los props y devuelve la representación de la interfaz de usuario.
Cuando está a punto de escribir un nuevo componente, no siempre está claro dónde colocar el estado. Podría dejar
que el estado sea parte de un contenedor que es un padre inmediato del componente de presentación. Mejor
Además, pueden mover el estado más arriba en la jerarquía para que el estado sea accesible para los componentes.
presentación multpli.
Cuando la aplicación crece, el estado está esparcido por todas partes. Cuando un componente necesita acceder al estado al que
no tiene acceso inmediato, intente elevar el estado hasta el componente ancestro más cercano.
Es una buena idea dejar que un componente en la parte superior gestione el estado a nivel global y luego pase
tuto verso il basso. Tutti gli altri componenti possono sottoscrivere i props di cui hanno bisogno e ignorare il resto.
Potetetrataretuti componentes de React como tontos, así puede concentrarse solo en el lado vista de las cosas.
ARQUITECTURA GENERAL DE REDUX
el esquema arquitectónico propuesto por el modelo Redux
Por lo tanto, el flujo general para modificar el estado actual de una aplicación sigue los siguientes pasos:
1 viene identificada unaActon, eventualmente generada a través de un creador deActon
2 taleActonviene enviada alloStore tramite unDispatch
3 dentro de la tienda, un Reducer sustituye al estado actual el posible nuevo estado identificado
en base al análisis de la Acton
Tienda
El store es un gran objeto JavaScript que representa el estado actual de la aplicación, y cada vez que el estado
se actualiza, la vista se vuelve a visualizar.
El estado entero de la aplicación está dentro del objeto store.
La tienda tiene tres métodos para comunicarse con el resto de la arquitectura. Son:
[Link]() para acceder al árbol del estado actual de la aplicación.
[Link](action) para provocar un cambio en el estado basado en una acción.
[Link](listener) para escuchar cualquier cambio en el estado. Se llamará cada vez que
una acción es enviada.
Crearé una tienda.
Redux tiene un método createStore para crear un nuevo store.
Recibe como parámetros: un reductor y opcionalmente el estado inicial de la tienda.
í[Link]
importar { crearTienda } de "redux";
const estadoInicial = 0 //estadoInicial (opcional).
const tienda = crearTienda(reductor, estadoInicial);
Ahora escucharemos cualquier cambio en la tienda y luego con [Link]() el estado actual de la tienda.
[Link](() => {
[Link]("El estado ha cambiado" + [Link]());
})
Para actualizar la tienda Redux se utilizan las acciones.
Acton/Creadores de Acton
Leactonsono son objetos simples de JavaScript que envían información de la aplicación a la tienda. Si tienes un
Contador simple con un botón de incremento, al presionarlo resultará en una acción que se activa, que se asemeja
a esto:
{
INCREMENT
1
}
El estado de la tienda se modifica solo en respuesta a una acción. Cada acción debe tener una propiedad de tipo (type) que
describe lo que pretende hacer la acción.
Se recomienda mantener la acción pequeña ya que representa la cantidad mínima de información necesaria para
transformar el estado de la aplicación.
En el ejemplo anterior, la propiedad type está establecida en "INCREMENT", y se incluye una propiedad adicional.
payload que podría ser renombrada en algo más significativo.
Para enviar la acción a la tienda se usa [Link](acton):
[Link]({tipo: "INCREMENTAR", carga: 1});
Durante la escritura de código Redux, normalmente no se utilizan las acciones directamente, sino que serán llamadas las
funciones que devuelven las acciones llamadas creadores de acciones.
El creador de la acción del acto anterior de incremento será:
const incrementarContador = (conteo) => {
volver {
INCREMENT
conteo
}
}
Por lo tanto, para actualizar el estado del contador, es necesario enviar la acción incrementCount de esta manera:
[Link](incrementarConteo(1));
Ahora, necesitamos los reductores para convertir la información proporcionada por la acción y transformar el estado de la tienda.
Reductores
El reductor utiliza la información de las acciones para actualizar efectivamente el estado.
Un reductor debería ser una función pura. Dado un conjunto de entradas, siempre debe devolver la misma salida.
Además de eso, no debería hacer nada más.
el reductor para nuestro contador.
const reducer = (estado = estadoInicial, acción) => {
switch ([Link]) {
caso "INCREMENTAR":
devuelve estado + [Link]
predeterminado
devolver estado
}
}
El reductor recibe dos argumentos estado y acción y devuelve un nuevo estado.
(estadoAnterior, acción) => nuevoEstado
El estado acepta un valor predefinido, initialState, que se utilizará solo si el valor del estado es
indefinido. De lo contrario, se retendrá el valor efectivo del estado.
Usamos el switch para seleccionar la acción correcta.
Añadimos un caso para DECREMENTAR:
const reductor = (estado = estadoInicial, acción) => {
switch ([Link]) {
caso "INCREMENTAR":
return state + [Link]
caso "DECREMENTAR":
regresar estado - acció[Link]
predeterminado
devolver estado
}
}
Aquí está el creador de acciones
const reducirContador = (conteo) => {
devolver {
DECREMENT
conteo
}
}
Finalmente, se envía a la tienda.
[Link](incrementarConteo(4)); //4
[Link](decrementarCuenta(2)); //2
REDUX Y REACT
Hemos visto que con Redux enviamos las acciones y recuperamos el nuevo estado utilizando [Link]() y
[Link]().
Ahora aprenderemos a conectar una tienda Redux con React, con la biblioteca react-redux veremos
venir
1 organizar los componentes contenedor y los componentes de presentación
Cómo conectar React y Redux utilizando connect()
¿Cómo enviar las acciones utilizando mapDispatchToProps?
4 cómo recuperar el estado utilizando mapStateToProps
1) Componentes inteligentes y componentes tontos
Un concepto ya discutido antes, de dividir en dos carpetas distintas los componentes, uno
denominatocontainerse l'altrocomponents. La ventaja de este enfoque es que la lógica está separada
desde la vista.
Los componentes inteligentes, manejan la parte lógica, pasan los datos necesarios para realizar el renderizado de
componentes tontos como props.
Como primer paso, en un proyecto, podemos empezar a crear toda la parte gráfica de React, es decir, los
componentes tontos y posteriormente, a partir de estos, crear los componentes inteligentes para gestionar la lógica
2) La librería react-redux
Para conectar React a Redux será necesario instalar una biblioteca adicional llamada react-redux.
npm instalar --guardar react-redux
La librería exporta solo dos API que es necesario recordar, un componente <Provider/> y una función de
orden superiorconnect().
3) El componente Proveedor
La aplicación completa debe poder acceder a la tienda. Redux necesita hacer accesible la tienda de
da datos a todo el árbol del componente react a partir del componente principal. El Provider permite
pasar los datos de arriba hacia abajo añadiendo el estado a todos los componentes.
importar { Proveedor } de 'react-redux'
[Link](
<Proveedor tienda={store}>
<App />
</Proveedor>,
[Link]('root')
)
Envolvemos el proveedor alrededor del componente de la aplicación y así los descendientes del componente tienen acceso.
ai dati.
4) El método connect()
Puesto a disposición la tienda de la aplicación, necesitamos conectar react con la tienda. El único
La forma en que se puede comunicar con la tienda es enviando acciones y recuperando el estado.
connect() permite precisamente conectar React con el almacén, y con la ayuda de dos métodos:
mapDispatchToProps, mapStateToProps, di mappare e passare, solo le dispatch e la parte di store
interesados en el componente dumb de React como props.
const mapStateToProps = estado => { const mapDispatchToProps = dispatch => {
regresar { regresar {
[Link] () => dispatch(actionCreator())
} }
} }
exportar por defecto conectar(
mapStateToProps
mapDispatchToProps
(VolcadoDeComponente)
mapStateToProps y mapDispatchToProps devuelven ambos un objeto y la clave de este objeto
se convierte en una prop del componente conectado.
- MapStateToProps: conecta una parte del estado de Redux a las props de un componente
React. De esta manera, un componente de React conectado tendrá acceso a la parte exacta del almacén.
de lo que necesita.
- mapDispatchToProps hace algo similar, pero para las acciones: conecta las acciones de Redux a las props
React. En este modo, un componente React conectado podrá enviar mensajes al
tienda.
Así que es posible utilizar connect() para:
1 suscribir la tienda y mapear su estado a la propiedad
2 enviar las acciones y mapear los callbacks de dispatch en las props
Una vez conectada la aplicación a Redux, es posible utilizar [Link] para acceder al estado actual.
y también enviar las acciones.
EJEMPLO REACT-REDUX: RUBRICA
Veamos ahora un ejemplo concreto de una aplicación de Agenda telefónica con las siguientes características:
. visualizar todos los contactos
. agregar un nuevo contacto
. eliminar contacto
1) Estructura de directorios
He creado un nuevo proyecto con create react app instalado Redux, Redux no tiene idea de cómo estructurar la
aplicación, por lo tanto el próximo paso es agregar algunos directorios vacíos para organizar Redux:
componentes
contenedores:conterrá y componentes de React que envían acciones a la tienda de Redux. La asociación entre
redux y react se llevará a cabo aquí.
actons: contenerá los creadores de acton.
reducers: cada reducer tiene un solo archivo, este directorio contendrá toda la lógica de los reducers.
store: contendrá la lógica para la inicialización del estado y la configuración de la tienda.
Este modelo de estructura es detoRailse y sería adecuado para aplicaciones pequeñas y medianas. Cuando la aplicación crece, puede
será más cómodo considerar el modeloDominio, donde cada funcionalidad tendrá un directorio por su cuenta, y todo
lo que concierne a tal funcionalidad estará dentro de ella.
2) Crear la parte de la vista con los componentes dump
Podemos comenzar un proyecto creando la parte React de la vista con los componentes. Podemos utilizar
Bootstrap para acelerar el trabajo.
En este proyecto creamos una aplicación con un menú con dos opciones que, con React Router, se visualizará sin
recargar, las páginas de la lista de contactos, aquella con el formulario para agregar un nuevo contacto.
3) Inicialización de la tienda
Es una buena práctica esbozar de inmediato, incluso en papel y lápiz, un esquema del estado, en un solo objeto, con las
propiedad de la que necesita.
Luego, en el directorio Store, creamos el archivo [Link] y inicializamos la tienda:
const initialState = {
contactList: [],
newContact: {
name
email
tel
}
}
exportar por defecto estadoInicial;
El almacén tiene dos propiedades: [Link] es un array de contactos, mentrenewContact es un
objeto que contendrá temporalmente los datos de contacto a añadir del formulario de contacto.
4) Creación de la tienda
Para crear la tienda, en el archivo [Link], importamos createStore de redux:
importar{crearAlmacén} de 'redux'
esto crea la tienda que contendrá el árbol del estado.
Creamos la tienda con:
conststore = crearTienda(rootReducer, initaliState);
Notamos que recibe dos parámetros: el rootReducer y el estado inicial initialState (opcional)
Importamos initialState creado previamente.
Los reductores multiplican combineReducers()
Es importante recordar que las funciones Reducer no modifican el objeto State, reciben como entrada el objeto State.
la corriente y restituye un nuevo objeto Statee que un reductor debe tener siempre un valor predefinido para su
estado, y que siempre debe devolver algo (defecto; devolver estado).
Para ellos siempre se recomienda crear una función Reducer para cada parte del objeto State y luego combinar tales
funciones en un único Reducer, dividirlos, en lugar de uno solo, para mejorar la legibilidad del código.
Redux, por esto, tiene un método denominadocombineReducers()que permite crear múltiples reductores y luego unirlos
en una sola función (rootReducer).
Esso recibe como argumento el objeto que tiene como propiedades los reducers que crearemos:
exportar por defecto combinarReductores(
{
reductor
}
);
Los reductores creados deberán convertirse en las propiedades de combineReducers y por eso deben ser importados.
inseritcon lo stesso nome della proprietà del pezzo di stato che riguardano
5) Creación de rootReducer
Este será el reducer principal que unirá en un único reducer, todos los reducers de la aplicación.
En el directorio reducers, creamos un archivo [Link], con combineReducers vacío que unirá los reducers que
crearemos posteriormente.
importar { combineReducers } de 'redux'
exportar por defecto combinar reductores(
{
}
)
Y una vez creado lo importamos en el archivo [Link] para pasarlo al createStore.
6) Rendre lo store globale con Provider
Crea la tienda, debe estar disponible y accesible desde toda la aplicación, en todos los archivos. Para hacerlo y hacerlo
almacén global
importamos el componente Provider de React Redux y envolvemos el componente App con él pasándole el store
importar { Proveedor } de 'react-redux'
[Link](
<Proveedor tienda={store}>
<App />
</Proveedor>,
[Link]('root')
)
7) Muestre la lógica y el funcionamiento
Llegados a este punto, analicemos la aplicación para gestionar la lógica y el funcionamiento, viendo cuáles
componentdump necesita acceso a la tienda, a través de componentsmart, y creando los oportunos
acciones y reductores.
Visualizar los contactos de la tienda
Para visualizar los contactos en la tienda, creamos un contenedor llamado contactListSmart donde con
mapStateToProps mapeamos la parte del estado contactsList, con el mismo nombre contactsList
const mapStateToProps = (estado) => {
volver
listaDeContactos: [Link]
}
}
dopodiché con
export default connect(mapStateToProps, null)(ListaDeContactos)
pasamos contactsLists como props al componente tonto ContactList (importado).
El contenedor debe ser exportado, porque luego deberá ser importado y utilizado en [Link] en lugar del
componente tonto ContactsList, para ser visualizado.
De esta manera, el componente ContactsList recibirá como props solo la parte del estado que necesita.
Agregar nuevo contacto
crea el componente con el formulario para añadir el nuevo contacto
localStorage y sessionStorage: GUARDAR LOS DATOS EN EL NAVEGADOR
Un elemento que nos permite guardar dentro del navegador información relevante para la navegación del sitio, son
cookies. Pero el mayor problema de las cookies es que, para recordar la información guardada, el navegador debe
intercambiar mensajes de estado con el servidor en cada nueva página que el usuario visita; esta característica, sobre todo
en ningún sitio es posible reservar viajes o viviendas, se traduce en un gran desperdicio de recursos que podían ser
utilizadas para acelerar el tiempo de respuesta de los sitios web.
Gracias a la llegada de HTML5 se han introducido objetos que nos permiten guardar los datos pasados por el usuario.
dentro de sus propios navegadores: sessionStorage y localStorage.
Ambos comparten las mismas propiedades y funciones, las diferencias entre los dos son que: el sessionStorage perderá todos
cuando se cierre la ventana del navegador.
Mientras todo lo que guardamos dentro de un objeto localStorage, se mantendrá dentro del navegador y
resistirá también al apagado del ordenador.
Dentro de este objeto, solo podemos guardar cadenas de texto, al igual que con las cookies, pero yendo a
utilizar localStorage, o sessionStorage satisface las necesidades, no será necesaria ninguna comunicación con el
servidor dado que la página web podrá interrogar directamente el navegador.
Veamos específicamente localStorage, pero será lo mismo para sessionStorage.
Para guardar un dato se utiliza la función setItem("índice", "valor"):
setItem() acepta dos parámetros. El primero será el índice y permitirá recuperar posteriormente el valor que
hemos configurado, el segundo es el valor verdadero que queremos guardar dentro del navegador.
Questdata potranno essere poi visualizzati nell'ispeziona del browser
Salva datos, para recuperarlos usa la función getItem(“índice”):
Para eliminar un dato guardado se usa la función removeItem( índice ).
Otros parámetros útiles para trabajar con este tipo de objetos son:
• length permitirá conocer cuántos elementos son contenidos en su interior, su índice comienza en 0 como
para los array;
• clave(indice) - al insertar el valor numérico del índice, nos devolverá el valor guardado en esta posición;
MIDDLEWARE
Hasta ahora hemos visto que el createStore recibe dos parámetros que son el rootReducer y el estado inicial. Puede
recibir otros parámetros que permiten personalizar o sustituir las acciones de la tienda (despachar, suscribirse,
getEstado).
Para personalizar el comportamiento de un despacho se usa el middleware que es precisamente una función ejecutada entre el
dispatchdi un’azione e la sua elaborazione da parte del reducer. In pratica intercetta le acton e prende delle
decisiones en base a parámetros: puede pasar las acciones al reductor sin modificaciones o hacer a su vez dispatch de acciones.
Vemos que la acción lanzada por [Link]() atraviesa una serie de Middleware. Para asegurarnos de que la Acción
venga enviada al Middleware siguiente, o al Reducer en el caso del último Middleware, hay que invocar la función
next(acton) que viene pasada por Redux a cada Middleware.
En Redux son particularmente importantes porque representan el punto de la aplicación en el que es posible hacer
acciones asíncronas como: llamadas a API, timeout, etc.
Una característica importante, como se ve en la imagen, es que se pueden insertar más middleware en cadena.
y se ejecuta en el orden uno tras otro.
Dada una pila de middleware en cadena, cuando se realiza un despacho, en práctica se llama al primero
middleware. En general, un middleware verificará si la acción es de un tipo específico que le interesa, similar a como
haría un reducer. Si es del tipo correcto, podría ejecutar una lógica personalizada, de lo contrario pasa la acción al
próximo middleware en la pila.
A diferencia de un reducer, un middleware puede tener efectos colaterales en su interior, incluyendo pausas y otras lógicas.
asincrone.
Uso middleware
1) Definir la función middleware
Para usar middleware en Redux, primero se debe definir la función middleware, esta deberá tener una precisa
signatura.
// Middleware definido usando la función de flecha
const mioMiddleware = store => next => action => {
// cuerpo de la función Middleware
}
// o de manera equivalente
function mioMiddleware(store) {
return function (next) {
return function (acción) {
// cuerpo de la función Middleware
};
};
};
Dentro del middleware tenemos acceso a la Action lanzada [Link](action). Podemos usar la función
next(acton) para hacer pasar el Acton a lo largo de la cadena de middleware, invocará el siguiente middleware, si no
cuando se invoca la función, la acción no se pasa al siguiente middleware.
Dentro de cada middleware, también tenemos acceso a los métodos [Link]() para recuperar el objeto State.
corrente y [Link]() que es la función dispatch() original. Utilizando esta función, podremos hacer
recorrer todo el cadena de middleware que ya se ha atravesado antes del middleware actual.
2) Invocar la función applyMiddleware()
Después de definir uno o más middleware, invocamos la función applyMiddleware(...middleware) a la que pasaremos
como argumento los middleware creados.
importar { aplicarMiddleware } de 'redux';
Pasaremos la función applyMiddleware al crear la tienda.
const store = createStore(reducer, initialState, applyMiddleware(...middleware));
Resumiendo, los parametristoreacton representan respectivamente la corriente y la acción de la que estamos
efectuado el despachador. El parámetro siguiente representa el middleware sucesivo en la tubería antes de llegar
alreductor. En práctica, dentro de un middleware podemos aprovechar el estado y la acción actual para efectuar
elaboraciones específicas y luego pasar la bola al eventual middleware siguiente.
Veamos un caso concreto de cómo puede implementarse un middleware para escribir en la consola la acción
intercetata y el nuevo estado de la aplicación:
const logger = tienda => siguiente => accion => {
[Link]('Acción actual: ', action)
let result = next(action)
[Link]('Estado siguiente: ', [Link]())
devuelve el resultado
}
En este caso específico atendemos la ejecución de eventuales middlewares sucesivos antes de escribir en la consola el
nuevo estado. Si no hiciéramos así obtendríamos el estado actual, en lugar del siguiente.
Una vez definido el middleware, lo hacemos disponible para Redux con
importar { crearAlmacén, aplicarMiddleware } de 'redux'
dejar tienda = crearTienda(rootReducer, estadoInicial, aplicarMiddleware(logger));
Esto hará que cada transición de estado se registre en la consola del navegador:
En el caso de que tuviéramos más middleware para ejecutar antes del reducer, podemos pasarlos como parámetros de la
función aplicarMiddleware():
dejar middleware= aplicarMiddleware(middl1, middl2, middl3);
El orden de ejecución del middleware seguirá el orden en que las funciones se pasan como parámetro
adapplyMiddleware().
LLAMADAS ASINCRONAS CON REACT REDUX
Veamos ahora cómo realizar llamadas asincrónicas a un servidor con React Redux.
Podemos simular un servidor local con json-server, descargable desde Npm, con los datos en json para servir. Una vez
instalado, hay que crear el archivo json para servir ([Link]) lanzar el servidor con:
json-server --watch [Link] --port3005--nc
Ahora debemos conectar nuestra aplicación para leer los datos de este servidor.
Por fin, hemos visto acciones sincrónicas donde el objeto payload con los datos, iba a la tienda, pero en este caso los datos
se encontrarán en el servidor y por lo tanto es necesario hacer una llamada asíncrona al servidor para obtener los datos.
Para gestionar las llamadas asincrónicas, React utiliza middleware, para facilitar el trabajo hay varios paquetes entre los que se incluyen
redux-promise-middleware. Esto permite gestionar creadores de acciones asincrónicas, con la diferencia de que, en este
en este caso, el payload recibe una promesa:
const asyncAction = () => ({
PROMESA
nueva Promesa(…)
})
Dada una acción con una carga útil asincrónica, el middleware transforma la acción en una acción pendiente o una acción
cumplido/rechazado, que representa los estados de la acción asincrónica.
Descargado el paquete, en el index hay que importarlo y pasarlo al store:
importar promesa de 'redux-promise-middleware'
const tienda = crearTienda(rootReducer, estadoInicial, aplicarMiddleware(promesa));
Para dialogar con el servidor, usamos el fetch(), o otros paquetes, que permiten una gestión de las llamadas.
asincrona basada en las promesas
GANCHOS DE REACT
Se introdujeron con React 16.8 y en práctica son funciones que permiten insertar un estado en los componentes.
tpo functon, más simples que los de tipo clase.
useState()
Para agregar un estado a un componente de tipo función, se usa useState que primero debe ser importado de
React. useState es una función que se define con:
const[variabile, setVariabile] = useState(valorInicial);
es decir,esto devuelve un par de valores: el valor del estado actual y una función que permite
actualizarlo(despachar).
Es similar a [Link] de una clase.
El único parámetro de useState es su estado inicial.
usoEffect()
Dice a React que el componente debe hacer algo después de la renderización. React recordará la función pasada y la
Llamará más tarde después de haber ejecutado las actualizaciones DOM, con cada modificación.
Realiza las mismas funciones componentDidMount, componentDidUpdate y componentWillUnmount.