Transcripciones
1. Guía completa de React Js: de los fundamentos a las aplicaciones dinámicas: Hola, ahí, futuros desarrolladores
web. Soy hombre y Conny, su amable instructor y guía en este emocionante viaje de
React Gas En este corto y dulce curso, vamos a construir
algo increíble juntos. Pero antes de
sumergirnos en el proyecto, déjame decirte qué hay
en la tienda para ti. Comenzaremos con
los fundamentos, asegurándonos de que tenga una
base sólida como roca y reaccione Gas Entonces saltaremos a la
mano en la codificación donde construirás el proyecto
del mundo real desde cero. Al final de este curso, tendrás las habilidades
y la confianza para crear tus propias
aplicaciones GAS reales e impresionar a
los empleados o clientes potenciales Este es el proyecto que
vamos a construir juntos. Es una aplicación de seguimiento de tareas donde los usuarios pueden crear nuevas
tareas usando este formulario. Cuando creen tareas, la tarea aparecerá
en este contenedor. Entonces déjame mostrarte
cómo podemos hacer eso. Digamos que queremos
crear una tarea. Puedo presionar enter en el teclado o presionar
este botón aquí mismo. Entonces vamos a
aprender a escuchar eventos de teclado y a
escuchar eventos de botones HTML. Ahora voy a presionar enter en mi teclado. Y ahí tienes. La tarea un elemento se renderizó dinámicamente o
apareció en este contenedor. Ahora los usuarios pueden verificar este elemento si
completaron la tarea. Al presionar esta casilla de verificación, se volverá verde, lo que
indica que este elemento de
tarea se ha completado Pueden agregar
múltiples elementos de tarea, como la tarea dos, la tarea tres, Ahora, puedes notar que
tenemos un conteo aquí que cuenta el número de elementos de
tarea en la lista. Cada vez que agregue
un nuevo elemento de tarea, este número aquí mismo
aumentará dinámicamente, mostrando el número de elementos de
tarea en tiempo real. Ahora podemos filtrar entre tarea
completados y
pendientes. Si cambio a completado, solo
veremos las tareas
completadas, que en nuestro caso, solo
la tarea un ítem. Si cambiamos a artículos pendientes, veremos todos los elementos de
tarea pendientes en este contenedor. Puedes eliminar elementos desde aquí, y si cambias a todos, notarás que se eliminó el elemento de la
tarea dos. Así que vamos a
aprender a eliminar elementos y renderizar el resultado
dinámicamente a los usuarios. Puedes verificar varios
artículos si quieres. Ahora, esta aplicación
también tiene dos páginas, la página de inicio y
la página Acerca de. Podemos navegar
entre estas páginas usando los botones de
navegación del encabezado. Si cambio a la página Acerca de, obtendremos esto
simple sobre paté. Notarás que la ruta de
RO ha cambiado para cortar.
Déjame hacer esto otra vez. Como pueden ver, la
UO ha cambiado. Esta página contiene una
pequeña descripción de lo que
trata esta aplicación. Como puedes ver aquí,
esta aplicación es solo una
aplicación de seguimiento simple para ayudarte a
mantenerte organizado y administrar
tu tarea de manera eficiente. Es una app sencilla, pero
contiene muchas características. Por ejemplo, tenemos
aquí un estrangulador de programación. Estamos obteniendo esta broma
de una API externa. Siempre que cambiemos de la
página de inicio a la página anterior, vamos a buscar una nueva broma Aprenderemos a obtener
datos de una API externa y renderizar los datos dinámicamente
dentro de nuestra aplicación Esto sucederá cada vez
que cambies entre páginas o actualices esta página. Si lo refrescas,
obtendrás un nuevo estrangulador. Ahora puedes notar que tenemos un enlace en la parte inferior aquí
diciendo conocer al equipo. Si haces clic en él, aparecerá una lista
de nombres. Estos nombres se refieren a los desarrolladores que trabajaron
en esta aplicación de seguimiento de tareas. Ahora, también se nota que
la ruta de URL ha cambiado, y tenemos aquí el equipo de
barra diagonal hacia adelante al final Déjame hacer esto otra vez y
mantener tu ojo en la URL. Como pueden ver, tenemos un
nuevo estrangulador aquí tráelo, y ahora vamos a hacer clic
en este enlace, y la URL se ha actualizado
a alrededor de cuatro equipos de Slash Esto es lo que llamamos y
reacciona una ruta anidada. Las rutas anidadas le ayudan a crear diseños
anidados sin
actualizar la página web Como puedes ver, esta aplicación
está llena de características, y aquí hay muchas
cosas que aprender. Por lo que contiene todo lo necesario para construir una aplicación
web interactiva. Tenemos formularios, tenemos botones, podemos interactuar
con el teclado. Podemos filtrar elementos de tarea, Sí. Podemos cambiar entre páginas, y los artículos no
desaparecerán del contenedor. Así que vamos a
aprender eso también. Puede tener renderizado dinámico. Esa es también una característica muy
valiosa en una aplicación web moderna. Podemos cambiar entre páginas, obtener algunos datos de
una API externa y tener diseños anidados
y rutas anidadas Entonces, como puedes ver, puede
aparecer como una aplicación sencilla, pero tiene muchas
cosas que ofrecer. En realidad, esto es todo
lo que necesitas para comenzar a crear aplicaciones web
desde cero. Entonces, después de terminar este curso, tu progreso
solo dependerá tu imaginación y
simplemente de tus habilidades CSS. Porque esto, este curso te
hará comprender
qué es reaccionar GS, qué es GSX, cómo reacciona GS
funciona detrás de escena, y también aprenderás a crear estas increíbles características
en una Ahora tal vez se esté preguntando
por qué este curso es tan corto, registrándose en apenas
alrededor de 2 horas. Bueno, esa es una gran pregunta. Verás, este curso está diseñado pensando en tu tiempo
y aprendizaje. Creo en ponerte al día forma
rápida y eficiente. Distorsiono los
conocimientos esenciales que necesitas para
dominar el IS y construir
una aplicación de seguimiento de tareas Sin pelusa, sin relleno,
solo las cosas buenas. Sé que tu tiempo es valioso,
y eso lo respeto. Al mantener el curso consiste, ahorrarás tiempo y aún así
obtendrás las habilidades para crear tus propios proyectos RGS
sin sentirte abrumado Entonces, si estás interesado en construir esta
aplicación conmigo, solo tienes que inscribirte en este curso, y comencemos el viaje.
2. Expectativas y requisitos previos del curso: Hola, sus futuros desarrolladores
reaccionan. Bienvenido a nuestro curso de Guía
Completa de React GAS desde fundamentos
hasta aplicaciones dinámicas En este emocionante viaje, nos
sumergiremos en los conceptos básicos de reaccionar y exploraremos
cómo juega mano con Java Script para crear impresionantes interfaces de
usuario. Así que comencemos.
Lo primero, tercero. Vamos a entender qué es
reaccionar y por qué se ha ganado saxo inmensa popularidad en el mundo de React es una poderosa
biblioteca de scripts Dava que nos permite construir
interfaces de usuario cautivadoras Pero aquí está el pateador. React no funciona de forma aislada. Está estrechamente integrado
con el guión Dava. React aprovecha la
magia de JavaScript bajo el capó para dar vida a nuestras interfaces de
usuario Esto significa que tener una comprensión sólida de los conceptos de
JavaScript
va a ser increíblemente útil a medida que avanzamos
por este curso. Ahora, antes de entrar en
la emocionante palabra de acción, cubramos rápidamente
algunos requisitos previos y herramientas que necesitará para aprovechar
al máximo las herramientas Si ya estás
familiarizado con HTML, CSS y JavaScript, has
tenido un gran comienzo. Estos
lenguajes fundamentales serán
útiles a medida que exploramos las capacidades de
Act En cuanto a las herramientas, usaremos código de
Visual Studio para nuestras aventuras de codificación y no
DS para ejecutar nuestras aplicaciones. No necesitas tener
ninguna experiencia con NGS. Lo único que
se requiere es poner los NOG de
su sitio oficial Ahora, no te preocupes si eres
nuevo en estas herramientas, te
guiarán en cada
paso del camino. Ahora, estoy seguro de que tienes
curiosidad por saber por qué act se usa tan extensamente
en el mundo real. Permíteme compartir
un ejemplo rápido para alimentar tu motivación. Imagina que estás navegando por un sitio web dinámico
con una plétora de elementos interactivos,
botones, foros, animaciones Estos elementos necesitan responder rápida y sin problemas
a sus acciones. Aquí es donde reaccionan las campanas. Es un proceso de renderizado eficiente y un uso inteligente
del dom virtual, garantizan experiencias de
usuario de prueba relámpago, lo que hace que React sea una
opción ideal para crear, atraer y responder a
tiplicaciones Entonces ahí lo tienes, un vistazo tienda
Watson para ti
en este ex viaje Prepárate para desentrañar
los misterios del acto, sumergirte en la palabra
de JavaScript y construir impresionantes interfaces de
usuario que dejen impactos duraderos Estoy encantada de guiarte a
través de cada paso del camino.
3. Crea tu primera APP de ReactJs paso a paso: Comienza creando una carpeta
y ábrela en VSCO. Puedes nombrar la carpeta como
quieras. Nombré Mine Task
Tracker desde entonces, eso es lo que
vamos a construir Lo primero que tenemos que
hacer es abrir la terminal. Para ello, puede hacer
clic en el icono de la terminal aquí. O navegue hasta el menú
y seleccione terminal. Después haga clic en nueva terminal. Una vez que la
ventana del terminal esté abierta, asegúrese de que
no tiene ninguna instalación GS. Puedes hacerlo ejecutando el siguiente comando
para verificar su versión. Si se muestra la versión, significa que
no tiene GS instalado. De lo contrario, deberá
desestatarlo desde el sitio web
oficial A continuación, vamos
a ejecutar un comando para crear nuestra primera app react GS. Esto se puede hacer usando
PM, PMPM o Yn. En este caso, usaremos el
comando Create React app, que es una herramienta que configura un nuevo proyecto react GS con una estructura
y dependencias preconfiguradas Si no tienes
Yarn instalado, necesitas usar APX create React app y agregar
un nombre de aplicación personalizado Alternativamente, puedes
usar un punto para indicar que quieres
crear la app react en la carpeta Coan Voy a usar Yarn
ya que es más estable que PMPM o MPM Pulsa enter y deja que suceda
la magia. El comando ha creado
con éxito una aplicación de cuatro GS lista para que podamos trabajar
con ella. Bastante genial, ¿verdad? Aquí está la estructura del proyecto. La carpeta SRC contiene el código fuente de la
aplicación. La carpeta pública contiene activos
estáticos y el archivo HTML de punto índice es
el punto de entrada para tu app. Aunque AGS utiliza
solo un archivo HTML, no
significa que estemos
limitados a una página. Podemos crear múltiples páginas
o rutas usando JavaScript. Cada ruta utilizará
JavaScript para renderizar código HTML
específico
basado en la ruta URL. Cada pieza de
código AML que escribamos se
renderizará dentro del
elemento TF con la raíz ID Ahora dentro de la carpeta SRC, encontramos varios archivos
siendo el más crucial el índice DGS Este archivo es
importante porque emplea Dava Script
para renderizar todo
nuestro código de proyecto en el
elemento DV con la raíz ID Para decirlo simple, reaccionar es como tu plano para una casa Mientras reacciona Dom sirve
como el equipo de construcción que transforma ese plano
en el edificio real Es la herramienta que toma sus componentes de reacción y
los muestra en la web, haciendo que su sitio web
cobre vida El archivo Index D GS, podemos eliminar esta
línea aquí mismo. El informe web
vitals es una herramienta reacción utilizada para medir y
reportar el rendimiento del sitio web No obstante, no
lo necesitamos en este momento. Siéntase libre de eliminarlo junto
con su declaración de importación. También eliminemos
este archivo dentro la carpeta SRC ya que
no necesitamos ejecutar ninguna prueba Nuestro enfoque está en la propia Reac TS. Pasando al archivo Abdo GS, encontramos una función que
devuelve sintaxis GSX En react, no lo llamamos sintaxis
HTML se
conoce como GSX, que significa Javascript XML. GSX combina HTML
y JavaScript, lo que le permite
escribir código de interfaz de usuario que es fácil de leer y
alimentado por JavaScript. La función Abdo GS es un componente. Ahora en react, un
componente es una función que actúa como un bloque de construcción
para su interfaz de usuario. Piénsalo como
armar un set de lego. Cada lego brack es
análogo a un componente. Estos componentes son bloques de construcción
reutilizables que encapsulan I
y funcionalidad, haciendo que su código sea modular
y mantenible Ahora, después de esta
breve introducción a los archivos y estructuras GS de reac, ejecutemos la aplicación y veamos cómo se
ve en el navegador En la terminal, ejecute
el comando PM start. Esto ejecuta el script
definido en su paquete do archivo
JSON y/o la
sección de script con la clave start Este script generalmente
usa herramientas como paquete web o por paquete de pernos y
transpire su código Entonces este comando inicia
un servidor de desarrollo y cargar
automáticamente la aplicación
cada vez que realizas cambios Si el
archivo Package D JM es nuevo para usted, piense en ello como un centro de control para las dependencias de sus proyectos Enumera las herramientas externas
y bibliotecas que tu app necesita. Estas dependencias se
gestionan mediante APM, que es como un
almacén digital para código Al examinar el archivo Package DSO, los pers pueden comprender configuración de
su aplicación y
garantizar la consistencia Una vez que hayas ejecutado
el comando, se abrirá
una pestaña del navegador con
la URL Local host 3,000. Un servidor local accesible
solo para su máquina. Verás el logo de GS girando con algunos
textos y estilos. Ahora volvamos
aquí y eliminemos la declaración de importación
para el logotipo de Rags Elimina todo el código GSX dentro de la función del
componente app, dejando solo la sentencia
return Además, elimine
el archivo SVG del logotipo de la carpeta SRC ya
que ya no es necesario Dentro del archivo Apo GS, tenga en cuenta que el
componente app es una función. Cada función componente
en AGS debe comenzar con una letra mayúscula para distinguirlos de otras funciones de
JavaScript. Ahora, cada
componente react
siempre debe devolver algún código GSX Puede
devolver directamente GSX como un elemento Dev o
encerrarlo Ahora bien, si estás
familiarizado con HTML y tienes algún conocimiento
de las funciones del grupo Javas, el resto de ACTGS
será sencillo Ahora dentro de este Dv, agreguemos un texto diciendo
hola VGS. Guarde el archivo. Se volverá a renderizar
automáticamente ya que el comando de
inicio de MPM todavía se está ejecutando
y monitoreando los cambios Cuando guardes tus cambios
pulsando el control S, verás las
actualizaciones en el paté Todos los elementos HTML han
sido reemplazados por este tiff.
4. Añade estilos a tu proyecto de React: Hemos cubierto cómo
renderizar código SSML usando la sintaxis GSX dentro del Pero ¿qué pasa con los estilos? En el archivo Abdo gS, notarás que
estamos importando un archivo CSS llamado Abdo CSS
ubicado en la carpeta SRC Este archivo contiene código CSS
regular. Si bien no estamos importando
explícitamente el código CSS en
el archivo apto GS, le
estamos dejando
saber a ReAGs que cuando renderiza el componente ABDogs
en el signo del cliente, también debe buscar el archivo CSS y usarlo como hoja de estilo
para Sin embargo, para los
fines de este curso, no
usaremos el código CSS
específico. Siéntase libre de eliminarlo por completo. Pasando al archivo Index DGS, también
estamos importando otro archivo
CSS llamado index CSS Al crear un
componente en IGS, es una buena práctica nombrar el archivo CSS correspondiente con el mismo nombre que
el nombre del archivo de
componentes Dentro del archivo DSS Index, encontrarás estilos para el cuerpo y otros elementos
similares a los anteriores Tampoco vamos a necesitar este código. Adelante y despeja este expediente. Ahora, volviendo al archivo Abdo GS, vamos a introducir
algunos elementos GSX aquí, pero no profundizaremos en los detalles de
CSS Después de todo, este es un curso AGS, no un curso CSS. Para agilizar este proceso, he preparado un archivo CSS
Abdo y
un archivo CSS de punto índice para
que los descargues y uses Puedes ubicarlos en la sección
de recursos de esta videoconferencia. Una vez que hayas descargado
los nuevos archivos CSS, copia el código del archivo
CSS de secuestro y pegarlo aquí El código incluye clases como contenedor de rastreador de
tareas y otras, junto con
consultas de medios para garantizar la respuesta de
nuestras aplicaciones
en varias pantallas Repita lo mismo para
el índice al archivo CSS. Pega también el código que proporcioné
en este archivo. He aplicado estilo al
cuerpo y al elemento raíz, que existe dentro del archivo HTML de punto
índice. Recuerda, aquí es donde se renderizará todo
nuestro código. He configurado el
elemento raíz para que se muestre como una cuadrícula con 12
columnas y 12 filas. Hacia abajo,
hacia abajo, encontrarás tiempos para la barra de desplazamiento de
nuestra aplicación web
5. Comprende el alcance de CSS en ReactJs: Antes de avanzar en la
construcción de este proyecto, tenemos que hablar del concepto muy importante en react GS. GSS scoping, que está dando a cada componente su propio patio de juegos de estilo
privado. Es un mecanismo que asegura que
los estilos que definas para un componente quieren y afectan
intencionalmente a
otro componente. Cuando escribe CSS para
un componente específico, esas teselas tienen el alcance de los límites de
esos componentes Esto significa que las teselas
que aplique a una clase dentro del archivo CSS
del componente solo se aplicarán a los elementos dentro de esa salida de
componentes renderizados. Actuamos para lograr este alcance
mediante el uso de una técnica llamada módulos
CSS o CSS
en bibliotecas GS En nuestro caso, estamos
trabajando con módulos CSS. Todos estos archivos CSS
se denominan módulos CSS. Cuando importas el
archivo CSS a un componente, los nombres de clase
dentro de ese archivo
CSS se transforman de una manera que se
vuelven únicos
para ese componente. Esto evita
clases de nombre de clase y garantiza que su estilo no se declarará en otras partes de
su aplicación Imagínalo como
tener habitaciones separadas para diferentes actividades
en tu casa. Cada habitación tiene su propio conjunto de
muebles y decoraciones. Del mismo modo, su
componente react tiene su propio conjunto de estilos que no interfieren con los estilos de
otros componentes. Este enfoque hace que su base de
código sea más modular, mantenible y propensa
a conflictos de estilo Podemos diseñar tus componentes
sabiendo que sus estilos están aislados y no impactarán accidentalmente en
otras partes de tu app. Ahora, a medida que
reúne componentes usando índice a archivo DS, react mantiene la magia del
estilo en marcha. Incluso si tienes una regla de
estilo general en Index to TSS y una
regla de estilo específica en el CSS de rapto React sabe cómo manejarlos. El estilo más específico
suele tomar la delantera. Piensa en ello como tener un plan
maestro para tu casa. Los detalles en cada habitación no chocan con
el diseño general. Entonces mientras te sumerges en reaccionar, recuerda que cada componente es un bloque de construcción con personalidad
propia. Viene con su
propio archivo JavaScript y su propio archivo CSS. Y adivina qué, reacciona, asegúrate de que tus estilos se comporten muy bien dentro de
su componente, creando una app web armoniosa
y organizada.
6. Comprender las reglas de la CSS en conflicto en ReactJs: Oye,
profundicemos en reaccionar, y es magia de estilo. Mago estás decorando una habitación. Empiezas con un estilo base. Pero luego le agregas algunos toques
personales. React funciona de
manera similar con su CSS. Digamos que tienes una
regla en el índice dos SS que establece el margen
corporal en cero. Pero espera. También hay una regla en abdosi SS que establece el margen
corporal Ahora, ¿quién gana? Es como una competencia amistosa
entre los dos. En este show down, react sigue algunas reglas. Si dos reglas tienen
el mismo poder, lo
llamamos especificidad. La regla que viene después gana. Es como decidir quién recibe
la última porción de pizza. Si índice punto CSS
grita, margen cero, y Abdo CSS dice tranquilamente,
margen tres, el último
recibe el foco React se asegura de que los detalles en su CSS componente tengan
prioridad sobre los estilos globales. Ten en cuenta a medida que
creas tu app react, su componente trae sus
propias reglas de estilo y react mantiene la pieza al decidir
qué reglas deben brillar
en caso de conflicto. Pero para una experiencia de
desarrollo fluida, hay
que evitar agregar
estilos a los elementos HTML directamente usando un
selector de elementos, en su lugar usar clases.
7. Escribe código JSX para la aplicación de seguimiento y aplica clases de CSS: Archivo Abdu TS, reemplacemos
este div por otro. Además, muévase a la mitad
del nuevo div y luego
devuelva una nueva línea. Este nuevo div servirá como contenedor
principal
para nuestra app de trazador Necesitamos aplicarle una clase
CSS específica desde el archivo CSS de Abdo llamado Contenedor de trazador de
tareas Copia el nombre de la clase y
dentro de la etiqueta
de apertura del div dentro del componente
Abdo gs, aplica la clase CSS usando
el atributo class name En HTML regular, este
atributo se acaba de nombrar class. Pero en Rañas, es el nombre de la clase, y recuerda usar el caso Camel Después del signo igual, dentro de los códigos dobles más allá la clase de
contenedor de seguimiento de tareas. Es similar a
escribir HTML normal, pero presta atención al nombre del
atributo y siempre usa Camel case para
atributos como nombre de clase. Si guarda esto,
asegúrese de iniciar la aplicación ejecutando
NPM start en la terminal Luego abre el navegador
y verás un agradable contenedor azul
en medio de la página. Este contenedor contendrá la aplicación de seguimiento junto con
sus principales funcionalidades, y también notarás la barra de desplazamiento de
estilo a la derecha. Tenga en cuenta que
aumenté ligeramente el tamaño
del elemento contenedor en la pantalla usando la herramienta de zoom
cromada. Ahora, volviendo al código, insertamos un elemento de tarea
dentro de este contenedor. Agrega el siguiente
código GSS dentro de este div. El primer div es un contenedor de elementos de
seguimiento de tareas, y el div interno es el elemento
real del rastreador de tareas. Esto renderizará la tarea uno
dentro del contenedor azul. A medida que avanzamos con el proyecto, tendrás una lista de elementos de tarea como la tarea uno
seguida de la tarea dos. Sin embargo, queremos
escribir manualmente cada elemento. De lo contrario, usaremos tender
A steml Javascript y CSS. En su lugar, usaremos react para renderizar
dinámicamente
la lista por nosotros. Cubriremos cómo hacerlo
en las próximas lecciones. Ahora centrémonos en dar forma la estructura principal de
nuestro rastreador de tareas a.
solo un resto rápido,
cada vez que guardemos el archivo de la aplicación, punto
índice S se ejecutará nuevamente, haciendo que el
componente de la aplicación se renderice. La salida final
se mostrará dentro
del elemento raíz en el archivo HTML de punto
índice. Este archivo será servido
al cliente cuando
acceda a nuestro servidor web, que en nuestro caso es host
local 3,000.
8. Domina la estructura y los comentarios JSX para componentes claros y organizados: La aplicación de seguimiento de tareas ahora requiere
un formulario con un campo de entrada. Este formulario
nos permitirá agregar dinámicamente elementos de
tarea a la
lista de tareas usando react. Permanecer dentro del
componente de la aplicación incorporará la entrada desde el interior del contenedor del rastreador de
tareas. Para lograrlo, agregue
un nuevo DF y establezca su nombre de clase en
un contenedor de tareas. Dentro del DF coloca
el campo de entrada en un botón para agregar nuevos
elementos a la lista. Sin embargo, prefiero separar
el formulario de entrada real del contenedor
del rastreador de tareas y mantener el contenedor dedicado
únicamente a la lista de elementos. Para lograrlo, tomaré esta inmersión y la colocaré
encima del contenedor así. Ahora, cuando surge un problema
en un componente de reacción, es esencial asegurarse de que todos los elementos GSX estén encerrados dentro de un
solo elemento contenedor Esta práctica ayuda a reaccionar a mantener una estructura organizada. Piense en ello como
empacar para un viaje. No querrás llevar
numerosos artículos sueltos. Lo colocarías todo en una bolsa o maleta para
mantenerlos juntos. De igual manera, en el
ámbito de reaccionar, aplicamos un concepto similar. Puedes encerrar
tu código GSS dentro de un elemento HTML
como un div o una sección O incluso una
etiqueta vacía como esta. Este elemento envoltorio
no necesita hacer mucho. Su propósito es satisfacer los requisitos de
reacción. Por ejemplo, si su componente incluye varios
elementos como encabezados, párrafos y botones,
y encerrarlos todos dentro de un solo elemento t
o sección Esto se adhiere a la guía de un elemento
envoltorio, lo que permite reaccionar para comprender la estructura de
sus componentes de manera efectiva Considérelo como ofrecer reaccionar un contenedor para alojar
sus elementos GSX, lo que le permite comprender Ahora supongamos que deseamos insertar comentarios para aclarar el
propósito de su desarrollo. Al tratar con GSX, notarás una técnica
interesante La barra regular doble
hacia adelante para los comunes de
una sola línea o los comunes de varias
líneas no funcionará En cambio, empleamos
un método de palanca, que es Encierra
tu comentario dentro dos llaves y empleamos la sintaxis de comentario
multilínea Notablemente, estas llaves también
pueden contener código JavaScript, etiquetando la adición de contenido
dinámico a su aplicación Por contenido dinámico, quiero decir, alterar el código GSX en función condiciones
específicas
sin recargar la aplicación Profundizaremos en cómo aceive esto en las Dentro de esta sección, lección ser un comentario para pasar que la
inmersión a continuación es una tarea para. Copia este comentario y
pégalo encima del contenedor de tareas, Modifique el nombre a contenedor de
tareas. Y por último, agregue otro comentario al contenedor del elemento de tarea,
asígnele el nombre Elemento Tareas. esta manera, de todos modos,
revisar nuestro código
comprenderá la estructura
y los objetivos de la aplicación. Siéntase libre de seguir
estos ajustes para mejorar la claridad de
su estructura de código. Si tiene alguna duda, todos necesitan más asistencia, no duden en preguntar.
9. Elementos de interfaz de usuario que componen: Sigamos desarrollando
nuestra forma de tarea. Para comenzar agregue un elemento de entrada
con una etiqueta de cierre automático. Establezca el atributo type en texto, proporcione un marcador de posición que diga una tarea y asigne el atributo de nombre de
clase Asegúrese de no usar tases
en los nombres de atributos ya que los atributos de
reac gs no
incluyen impuestos ni puntuaciones inferiores El nombre de clase para el
elemento de entrada será una entrada de tarea. Debajo del campo de entrada, agregaremos un anuncio
etiquetado de Patton con el nombre de clase una tarea
Bt N. Short for button Después de guardar esto
y asegurarte de que tu app se esté ejecutando,
abre el navegador. Verás la forma, aunque
sin ningún estilo. Pero no te preocupes,
abordaremos esto enseguida. Me gustaría pasar un punto
importante. En palabra de reaccionar,
la organización es clave. Piense en ello como construir
un rompecabezas complejo. Es pieza necesita su lugar diseñado para crear la imagen completa. Del mismo modo, en react,
desglosamos nuestro código en
unidades más pequeñas llamadas componentes. Estos componentes son como
distintas secciones de tu app, como un encabezado, una
barra lateral o un pie de página. Al organizar nuestro código de esta manera, establecemos una estructura
que es fácil de comprender, mantener e incluso usar en
diferentes partes de nuestra Así que recuerda, en react, divide tu código en componentes y observa cómo tu app se
une maravillosamente. Dentro del código coreano, podemos segregar el formulario de
tarea del resto y transformarlo en un componente de reacción
independiente Comience por crear una
nueva puerta plegable dentro del directorio SRC,
nombrándola componentes. La convención es usar los componentes del nombre
como descriptivo, pero siéntase libre de elegir un nombre
diferente si lo prefiere. Dentro de los componentes, puerta
plegable, crear una
tarea de nombre de archivo formado a GSX Tenga en cuenta que puede usar
las extensiones GSX o GS. Pero estoy usando GSX
aquí para
denotar claramente los usos de la sintaxis GSX Al crear un componente react, es esencial importar la biblioteca react al
principio del archivo del componente. Incluso si no
usa directamente reaccionar cada componente, es
necesario ya que
GSX se transpiled al código scrat Java con Ahora, a continuación, declare el componente de
función tarea f. Es la mejor
práctica comenzar los nombres de los
componentes con
una letra apocaso Esta práctica distingue los componentes
personalizados de la
construcción de elementos HTML y
mejora la legibilidad del código Defina la función
usando sintaxis de flecha. Esto representa un componente
funcional, una forma más accesible de
crear componentes en comparación con el enfoque basado en
clases más antiguas Ahora, exporte el
componente funcional para que sea accesible para su uso en otros
componentes y archivos. Este componente devolverá el código GSX para el formulario de
tarea que originalmente escribimos dentro
del componente Abdo GS.
Y eso es todo. Ahora guarde todo y use
el componente de formulario de tarea en el componente de la aplicación primero importado de la carpeta de
componentes. Seleccionar el archivo del formulario de tarea. Luego incorpora
el componente en el código GSX al igual que cualquier otro elemento con
la etiqueta de cierre automático Al guardar el archivo Abdo GS, notarás que nada
cambia en el navegador Esto indica que hemos encapsulado
con éxito el código GSX del formulario de tarea en
un componente independiente Ahora, vamos a aplicar siling al componente
de formulario de tarea. Crea un archivo CSS llamado
task form dot CSS, que puedes encontrar en la sección de recursos de
video. Descárgalo e incluye el código
CSS de ese archivo aquí. Dentro del formulario de tarea CSS, definimos un
contenedor de tareas con el color de fondo azul y media queries para la capacidad de
respuesta Para garantizar que estas teselas afecten al código GSS dentro del componente de formulario de
tarea Tenemos que portar el archivo
CSS en él. Ahora bien, es una buena práctica hacer de
este puerto
lo primero del expediente. Ya que nombramos
el archivo CSS igual que componente de formulario de tarea, no
olvides incluir
la extensión CSS de punto, por lo que AGS sabe qué
archivo desportar Al guardar esto, el formulario de tarea aparecerá maravillosamente
en el navegador. Ahora procedamos a crear el elemento de tarea como
su propio componente. Crear un nuevo archivo llamado
task item dot CSX. Como siempre comienzan con una
letra pocase para el nombre fi. Dentro de este archivo,
comience importando el paquete react desde react, y luego declare un elemento de tarea de nombre de
función usando la sintaxis de flecha. Recuerde exportar la función en la parte inferior de la página, ya sea como exportación predeterminada usando la palabra clave predeterminada o como un objeto que contenga el componente de elemento de tarea
como propiedad. En este caso, cuando importamos un componente que fue
exportado como un objeto, tenemos que usar la sintaxis de
desestructuración de objetos A continuación, copie el código GSX
del elemento de tarea
del componente Abdo GS
y devuélvalo como el código GSX para el componente de elemento de
tarea Dado que cada componente debe
tener su propio módulo CSS, cree un nuevo archivo llamado
task item dot CSS. Dentro del archivo CSS, pega el código de la sección de
recursos de este video. Luego, coloca el archivo
CSS del punto del elemento de tarea en el componente. En la parte superior del archivo ABDogs, reemplace el código GSX existente con el componente de elemento de tarea Puede usar códigos VS asistencia para importarlo o agregar
el puerto manully Ahora, finalmente, haz de este un componente de
cierre automático y
guarda el archivo ABDogs En el navegador,
verás el elemento de tarea con un fondo blanco
y un efecto de hover que convierte el
color de fondo en gris claro Al utilizar el
concepto de componentes en IGS, mejorarás el proceso de
desarrollo y crearás un proyecto más organizado
y poderoso Por ejemplo, aquí
requerimos un botón de borrar, agregar un elemento de botón con el
texto del short para eliminar, y un nombre de clase de
Task Tracker item Del. Después de guardar esto,
aparecerá el fondo con un fondo. Cuando subas el componente de
elemento de tarea, se volverá a renderizar, que hará que el componente también se vuelva
a renderizar. La salida final
se mostrará dentro
del elemento raíz en el archivo HTML de punto índice
dentro de la carpeta pública.
10. Primeros pasos con la gestión del estado: explora el gancho de useState en React: Antes de continuar con
la creación de la
funcionalidad de eliminación de elementos de tarea, necesitamos manejar
la creación de elementos de tarea usando el formulario de tarea. Esto implica pasar
el contenido
de la tarea desde el campo de entrada y agregarlo al elemento a la lista de tareas al
presionar el botón agregar, haciendo que
aparezca dinámicamente en la lista. Para implementar esta funcionalidad, desarrollaremos una función dentro
del componente de formulario de tarea. Recuerde que en react GS, un componente es esencialmente
una función donde podemos incrustar la lógica de la aplicación
antes de la sentencia return. Esta lógica podría
implicar recuperar datos
de una API o realizar
ciertas tareas, después de lo cual
devolvemos el código GSX Nombremos a la función un elemento de tarea y usemos la sintaxis de la función de
flecha. Dentro de la función, necesitamos
extraer el valor de entrada, representando el
contenido de la tarea y almacenarlo en una variable que se pueda compartir en
toda la aplicación. En reaccionar para rastrear y decir el último estado
del campo de entrada, utilizamos un gancho de reacción. Los ganchos son funciones proporcionadas
por react que le permiten
interactuar con diversos aspectos del estado de los componentes y el ciclo de vida. Piense en ellos como una
forma de decir reaccionar, quiero hacer algo específico cuando esta parte de mi
componente cambie. Por ejemplo, si desea realizar
un seguimiento de los datos de entrada que
pueden cambiar con el tiempo, usaría el gancho de estado U. Es como colocar un marcador en
una pieza de rompecabezas que se mueve. Siempre que esa pieza cambie, react te avisa
para actualizar la vista Importa el gancho
de estado de uso del paquete react, y ahora este gancho devuelve
una matriz con dos elementos. El primer ítem representa el estado más reciente de
los datos rastreados. En nuestro caso, el valor de entrada. El segundo ítem es una función utilizada para actualizar
el estado de los datos. Le nombramos set input value, y siempre debe
comenzar con set. Por ejemplo, si estás
rastreando una variable de nombre de usuario, nombrarías este nombre de usuario de conjunto de
funciones. Para actualizar el valor de entrada siempre que cambie el valor del
campo de entrada, utilice el atributo change. Colóquelo igual a un extremo
abierto que cierra c brass para escribir código gescpt dentro del
código GSS Esta función toma
un argumento de evento, que usamos para
actualizar el estado del valor de entrada usando la función set
input value. Cambie el nombre del argumento
a evento para mayor claridad. Desde el evento, acceda a la propiedad target que
contiene el valor de entrada. El atributo change actualizará valor de
entrada cada vez se agregue
un carácter
al campo de entrada. Cuando se llama al valor de entrada establecido, el componente del formulario de tarea
se volverá a renderizar. Esto ilustra por qué el gancho del estado
U es valioso. Activa el
renderizado de componentes cada vez que cambia
el estado. A continuación, ejecutaremos la función
at task item para guardar el valor de entrada y
agregarlo a la lista de elementos. Por ahora, la consola
registrará el valor de entrada. Esta función se ejecutará
al hacer clic en el botón de anuncio. Necesitamos escuchar el evento click usando
el atributo on click. Coloca el nombre de la función
dentro de las llaves, y no lo llames aquí En su lugar, proporcione una referencia
al nombre de la función. Cuando se hace clic en la parte inferior, se llamará a la función Puede usar la
referencia directa o definir una función de flecha para llamar
a la función de elemento de tarea y al lado. Independientemente del enfoque, el concepto sigue siendo el mismo. Para un código más limpio, usa la referencia
directa, así. Después de guardar los cambios,
abre el navegador, lancha la ventana del inspector y de la pestaña de ir a
la consola Arreglemos la
pestaña de la consola para una mejor visibilidad, y ahora dentro de la aplicación, formemos la tarea de entrada uno y hagamos clic en el patrón at. Si bien no pasa nada
en la lista de ítems, veremos el valor de entrada
impreso en la consola. Esto ocurre porque
un elemento de tarea se ejecuta cada vez que se hace clic en el
apuem
11. Comprende la comunicación de componentes: domina el uso de accesorios en React: Ahora tenemos que guardar cada nuevo elemento de tarea en una matriz
dentro de otro estado de uso. Vamos a definir ese estado de uso dentro del componente app
porque necesitamos usar la matriz de elementos para renderizar
dinámicamente la lista
de elementos en el navegador. Lo primero es lo primero. Agreguemos el estado de
uso aquí y lo llamemos. También tenemos que importar
el paquete react y usar sintaxis de destrucción de
objetos para importar el
gancho de estado Ue desde react Este estado estadounidense
devolverá una matriz. El primer elemento de esta matriz representa la matriz de elementos. Podemos nombrarle elementos de tarea. El segundo es
la función set. Se encargará de
actualizar el conjunto de artículos. Ahora, la parte complicada es
que tenemos que llamar a los elementos de tarea establecidos dentro
del formulario de tarea cada vez que se ejecuta
la
función de elemento de tarea at y guardar el elemento de tarea recién
creado dentro de la matriz items. Pero, ¿cómo vamos a obtener
acceso a la
función set task items cuando ya la
definimos dentro
del componente app? Nuevamente, react viene con
una solución alucinante. Podemos usar algo
en react llamado props, que es simplemente un argumento de
función Así es como una función
normalmente puede obtener acceso a otra función o variable pasándola como argumento. Los argumentos de función no son algo nuevo para nosotros a menos que
no conozcas el script Java. Lo nuevo para nosotros es la forma en react pasa los apoyos a
la función componente Si desea pasar
los elementos de tarea establecidos al componente de formulario de tarea, tenemos que agregar un atributo
y nombrarlo set task items y establecerlo igual a la función
set task items real. De esta manera, tendremos
acceso a él dentro del componente task form a través del argumento props
object Tenga en cuenta que su propiedad dentro del objeto prop se llama prop y es solo una referencia
a su definición real. Cuando llamamos a la función set
task items, en realidad
estamos llamando a
los elementos set task desde dentro del componente app. Esto no tiene nada
que ver con reaccionar. Así es como funciona Javascript. No vamos a
guardar el valor de entrada, que es un texto simple
para los elementos de la tarea, estado porque queremos que los elementos de la
tarea sean una matriz. Lo haremos empujando este valor de entrada como un nuevo
elemento a la matriz de elementos de tarea. Pero primero, necesitamos tener
acceso a la matriz de elementos de tarea. Vamos a
pasarlo como utilería. Agregar nuevos elementos de tarea de
nombre de atributo. Por cierto, puedes nombrar
el prop como quieras, pero asegúrate de
nombrarlo de una manera que
tenga sentido y establecerlo igual a la
variable o función correcta. Ahora dentro del componente de
formulario de tarea, usaremos el objeto prop para obtener acceso a la matriz de elementos de
tarea. Entonces podemos usar el
método JavaScript llamado push para agregar el
elemento recién creado a la matriz. Prefiero usar otro enfoque, que es pasar una matriz, luego agregar tres puntos sin espacios seguidos de la prop de matriz de elementos de
tarea. Esto se llama el operador
spread, que extiende todos los
elementos de la matriz dentro de la nueva matriz. Entonces podemos agregar un
nuevo ítem agregando un coma y pasando el estado del valor
de entrada. Al hacer clic en este botón, se ejecutará
esta función, lo que dará como resultado
la actualización de los elementos de la tarea establecida con una nueva matriz que contiene todos los elementos de la tarea junto
con la recién creada. Cuando la aplicación se inicia
por primera vez, la
matriz de elementos de tarea será nula. En Javascript, no podemos
propagar ni realizar ninguna operación de matriz
en un valor nulo. Podemos evitar este
escenario estableciendo el valor inicial del
estado en una matriz vacía. El componente p volverá a
renderizar cada vez al estado de elementos de tarea establecidos se llame
al estado de elementos de tarea establecidos desde el componente de formulario de
tarea. Puede observar que
al registrar
la consola la matriz de elementos de tarea
dentro del componente de la aplicación, luego guarde y abra el navegador. Permítanme despejar la consola y en el formulario de tareas en la tarea uno
y darle al fondo. Verá que
la matriz de elementos de tarea está impresa en la consola. Cuando la consola registra un
estado en un componente de reacción, puede activarse dos veces
seguidas cuando el estado cambia al mecanismo de
parches reacciona Puede agrupar múltiples actualizaciones de
estado, haciendo que el registro se
dispare para sus rutas. Este es un comportamiento normal para
optimizar el renderizado y las actualizaciones. Es importante tener en cuenta que el número exacto de registros no está garantizado y puede variar en
función de los procesos
internos de reacciona.
12. Renderización dinámica: crea interfaces receptivas en React: Al derecho. No solo imprima la
matriz de elementos de tarea en la consola. En su lugar, queremos tomar
cada elemento de la matriz, mostrarlo en la
pista de tareas o contenedor, y actualizar simultáneamente
la lista de elementos de navegadores para que coincida con el estado de
la matriz de elementos de tarea. Siempre que cambie el estado, la lista y el código GSS también
deben actualizarse en consecuencia Para que esto suceda, envolvemos el componente del elemento de tarea
en llaves dobles Haciendo esto porque
vamos a usar código de script
Dava
dentro de esas llaves Estaremos usando el método map, una función hand Gray
en JavaScript. Con map, podemos mirar a través la matriz de elementos de tarea e interactuar con cada
elemento individualmente. Dentro de la función de
devolución de llamada de mapas, obtenemos acceso a cada elemento de tarea Esto nos permite crear una
instancia de componente de elemento de tarea con datos específicos. Esta estrategia de renderizado dinámico nos
da un montón de componentes. Representa una
tarea única de la matriz. Lo que produce la
función matemática es una matriz de g Sx elementos, cada uno correspondiente a un elemento
en la matriz de datos original. Si guardamos esto y tomamos
un picoteo en el navegador, veremos que se
han renderizado dos elementos de tarea en la lista Eso es porque bueno, nuestra
matriz solo tiene dos artículos. Ahora, si agregamos otro elemento
a través del formulario de tareas, un nuevo elemento
aparecerá dinámicamente al
final de la lista. Sin embargo, el contenido de estos
ítems aún no es dinámico. Para hacerlos dinámicos, vamos a usar props y pasar el elemento de tarea
al componente de tarea Cambiaremos esto
con el prop de tarea. Si lo escribo así
, aparecerá como texto plano. Pero si lo envuelvo en
un latón de doble relación, se tratará como
una variable javascript y se reemplazará con
su valor real Cada vez que se crea un nuevo
elemento, se unirá a la lista
con su valor distinto. Todo gracias a la función map, que genera una matriz de elementos componentes de elementos de tarea. Siempre que la matriz de
elementos de tarea cambia, el componente obtiene una nueva ejecución. Activación de la función map para
volver a ejecutar y generar
la matriz de elementos Cada elemento de la lista
se llama child. Ahora, si borramos
la lista de tareas
recargando la página e
intentamos agregar un elemento fresht, puede notar que un o
en la consola le dice que cada analista hijo
necesita un accesorio clave único Aquí te explicamos cómo podemos arreglarlo. Podemos agregar el prop clave al componente
de elemento de tarea
como un atributo. Debe ser una clave única, ya sea un número o una cadena. Puede usar el parámetro index
de la función map, que le dará a cada elemento una clave diferente a los demás. En react, cuando renderizas
dinámicamente una lista de componentes usando la
función map o cualquier otro método, cada componente necesita
un tifier único Ahí es donde entra el accesorio
clave. El prop clave es un
atributo especial que se adjunta a cada componente
renderizado dinámico. Es un trabajo ayudar a
reaccionar a distinguir cada componente de manera única
y eficiente. Esto es especialmente útil cuando ocurren cambios en la lista, como agregar, eliminar
o reorganizar elementos Cuando realiza cambios
en la lista de elementos, react se basa en el accesorio clave para averiguar qué
componentes han cambiado, deben agregarse o
deben eliminarse. Este enfoque inteligente reduce las actualizaciones
innecesarias y hace que todo
el proceso sea
más suave y rápido.
13. Administración de tareas y la interacción dinámica en React Web App: Después de renderizar los elementos dentro la lista de contenedores del rastreador de tareas, es hora de trabajar en el componente de
elemento de tarea y hacer
posible eliminar un elemento de la lista usando este botón. Ahora, este botón eliminará un elemento de la matriz de elementos de
tarea, ya que estamos usando
esa matriz para renderizar los nidos de elementos de tarea
en el componente de la aplicación Necesitamos definir la
función que
manejará la eliminación del
elemento dentro del componente app. Dentro de aquí nombra la función, elimina elemento por ID. Utilice un fuera de función, que tomará un argumento ID. En su interior, actualizaremos
la matriz de elementos de tarea, estado usando el método set
task items. Primero, preparemos la
nueva versión de la matriz. Vamos a declarar una constante
un nombre nuevos elementos de tarea, y establecerlo igual a
la matriz de elementos de tarea. Usaremos el método filter para iterar a través de los elementos de la
matriz y solo devolveremos elementos con
un ID que no sea igual al ID del
elemento que queremos eliminar La función filter devolverá una nueva matriz que no
contiene el elemento delete. Pasaremos la nueva
matriz de elementos de tarea como el nuevo estado
de la matriz de elementos de tarea. Ahora tenemos que ejecutar la función
delete cuando hacemos clic en este botón de borrar dentro del componente task item. Pasaremos la función delete item
by D como prop. Luego dentro de aquí,
escucharemos el evento click en este botón y ejecutaremos el
elemento delete mediante una función D. Ahora en vez de
cada vez que queremos acceder
a un prop específico, tenemos que escribir
props dot algo Prefiero usar la destrucción de
objetos para extraer los accesorios
del objeto prop Al hacerlo, queda claro qué
aceptará este componente como utilería, y está más
organizado de esta manera Ahora bien, si guardamos esto e
intentamos eliminar un elemento, no pasará nada
porque no pasamos el ID del elemento a la función delete
item by ID. Como saben, no podemos llamar a la función directamente
así porque tenemos que pasar una referencia a la función
sin conizarla De lo contrario, se llamará cada vez que el
componente se renderice. Hay dos formas de
pasar la identificación. En primer lugar, podemos utilizar
la función band, que acepta este contexto. Ahora que esta palabra clave en
Java script se refiere
al objeto al que pertenece la función
o método
corrient pertenece la función
o método Representa el contexto en el
que se llama a la función y le ayuda a acceder a las propiedades y métodos
de ese objeto. El segundo argumento van a ser los argumentos de
función reales, que en nuestro caso es
solo el elemento de tarea. Esta es una
forma muy complicada de hacer algo sencillo. Prefiero agregar una función RO como esta y tal
como lo hicimos antes, y llamar a la función delete item by ID y pasar
el ID de tarea. Por ahora, en realidad no
tenemos un ID dentro del accesorio de tarea porque estamos guardando su elemento de tarea
como un texto sin formato. Tenemos que actualizar esto antes continuar reemplazándolo con un objeto que contenga
una propiedad ID establecida en un valor dinámico. Este valor dinámico
será una operación simple, que es la longitud de la
matriz de elementos de tarea más uno. Entonces podemos nombrar el texto de la
segunda propiedad y establecer su valor
en el valor de entrada. De esta manera, podemos eliminar elementos de
tarea de la
matriz usando sus ID. Ahora el contenido
del elemento de tarea está dentro de
la propiedad text. Asegúrate de actualizar
eso. Ahora, vamos a guardar esto y
dentro del navegador. Tenemos que recargar
porque hemos actualizado la forma
de los elementos de la tarea Ahora agreguemos la tarea
uno, luego la tarea dos. Antes de eliminar los elementos, volvamos al código dentro componente de
la aplicación
y la consola registremos
el ID del elemento solo para tener
un registro el ID del elemento solo para tener más cercano a lo que
sucede detrás de escena. Eliminemos la tarea número uno. Notarás que el número uno
fue impreso en la consola. Si eliminamos la tarea número dos, el número dos se
imprimirá en la consola. Ahora, esto te muestra cómo Ya
puede ser flexible y dinámico, lo que abre la puerta
para que los desarrolladores creen aplicaciones web emocionantes e
interactivas. Ahora dentro del formulario de tarea, extrayamos los props del argumento props usando
la destrucción de
objetos y
actualicemos Ahora, quiero destacar
algo importante aquí. Si tratamos de agregar un
ítem a la tarea, funcionará bien. Pero si dejamos el anuncio de descanso vacío del
campo, el artículo se agregará
a la lista de artículos. Tenemos que evitar
que eso suceda. Y eso es agregando un bloque de
verificación dentro la función de elemento de tarea de anuncio antes de actualizar el estado de la encuesta de elementos de
tarea. Si el valor de entrada es
igual a una cadena vacía, simplemente conectará
la ejecución
del código usando la
sentencia return así. Ahora va a funcionar bien cuando
pasemos una cadena vacía. Pero cuando agregamos el espacio como valor y presionamos el al putton, se creará
el ítem Simplemente podemos evitarlo
también usando la función trim, que elimina cualquier
espacio de una cadena. Si el valor de entrada solo
tiene un espacio dentro, el valor de recorte
devolverá una cadena vacía. Eso cumplirá con esta condición de sentencia
if, lo que dará como resultado
el bloqueo de la ejecución del código y la
prevención de la creación
de elementos de tarea vacíos. Ahora, en la mayoría de las aplicaciones
web modernas como Google, por ejemplo,
no necesitamos hacer clic en el botón Buscar
para ejecutar la búsqueda. Sólo podemos presionar Enter, y va a hacer el mismo trabajo. En nuestra aplicación, podemos hacer lo mismo escuchando el evento
de palabras clave. Cuando se presiona la tecla enter, ejecutamos la función de elemento de
tarea A. Podemos escuchar ese evento en el elemento contenedor usando
en el atributo key down. Puedes escuchar el
evento en cualquier elemento GSX, pero siempre es mejor
ponerlo en el elemento padre Este atributo
requiere una devolución que aceptará un evento Podemos usar ese
evento para verificar el nombre de la clave que
presionó el usuario. Si es igual a ingresar diez usando el operador
final Javascypogical, podemos ejecutar Ahora, digamos esto y
pruébalo en el navegador. En la tarea número tres, y presiona Enter en tu
teclado. Ahí vas. De esta manera es mucho más fácil. Ahora queremos agregar
una mejora más a nuestro componente de formulario de tareas. Quiero borrar el campo de entrada cada vez que agreguemos un nuevo elemento
presionando el botón at o presionando el
botón enter en el teclado. Este también es súper fácil. Solo tenemos que venir aquí después actualizar la
matriz de elementos de tarea y luego actualizar el valor de entrada usando la función set input value y configurarlo en una cadena vacía. Si probamos esto en el
navegador, no funcionará. Pero si nosotros contras registramos el estado put value aquí
y en el navegador, comenzamos a escribir,
verás el estado
del valor put cambiando cada
vez que tecleemos algo. Presta atención cuando
golpee el erkey, veremos que el último estado del valor de entrada está vacío En realidad está funcionando, pero no tiene ningún efecto en
el campo de entrada porque no
conectamos el estado del valor de
entrada al valor real
de la entrada. Para ello, tenemos que establecer
el valor de atributo
del elemento input para que sea igual
al estado del valor de entrada. Ahora bien, si tratamos de crear una nueva tarea y luego pulsamos
enter o el abuton, se borrará
el campo de entrada
14. Crea una casilla de verificación dinámica con indicaciones visuales en React: Parte superior de la eliminación de elementos de tarea. Necesitamos crear un
botón que funcione como una casilla de verificación para marcar un elemento de
tarea específico como completado. Para ello, agregaremos un elemento span para que
sirva como botón. Sí, podemos lograr
esto porque en react y Java
script en general, podemos escuchar el evento
click de cualquier elemento para que
podamos convertir ese
elemento en un botón funcional. Ahora, vamos a incluir
la palabra terminar. Para el nombre de la clase, use la clase de marca de verificación. Al hacer clic en
este elemento span
, establecerá el estado de este elemento de
tarea como verificado. Hacemos esto usando el gancho estatal. Asegúrese de portarlo en
la parte superior de este archivo. Entonces vamos a nombrar este
estado se comprueba, y el segundo argumento se
llamará Sets checked function. Escucharemos el
evento click en el elemento span y ejecutaremos una función llamada
handle check box change. Esta función aún no existe, por lo que necesitamos definirla. Lado aquí, podemos
actualizar el
estado de uso comprobado para que sea verdadero y establecer
el estado inicial para forzar. En este caso, el usuario puede marcar el elemento de tarea como completado. No obstante, si
cambian de opinión, no
pueden actualizar el estado de
facilidad comprobada. Como cada vez
que se ejecuta esta
función, establecerá el estado de
comprobación de facilidad en true. No queremos que eso suceda. Entonces queremos que nuestro botón terminado
funcione como un switcher, como una
casilla de verificación normal donde puedes
marcarlo o y verificarlo
presionando el mismo botón Para lograrlo, podemos actualizar
el valor del estado agregando un signo de exclamación y pasando la constante de facilidad
comprobada Esta
operación lasica siempre devolverá el valor opuesto
del estado coreano Si es cierto, se convertirá en falso para que si se marca, quedará desmarcado Si intentamos probar el potente
terminado ahora, funcionará, pero no
notaremos nada visualmente. Reemplacemos el acabado
con k primero y
lo frotemos dentro de un lapso con
el nombre de la clase icon. Ahora, el nombre de la clase icon
no tendrá efecto por ahora, pero eso está bien porque lo
reemplazaremos con un ícono real en las
próximas lecciones. Ahora bien, ¿cómo agregamos
algunas señales visuales para representar el estado
del elemento checkbox Bueno, con RACGas,
podemos lograr swing
dinámico usando
el atributo style Este atributo se utiliza
para agregar picadura en línea. ¿Colocar dos llaves
y proporcionar un objeto? Este objeto puede contener
cualquier propiedad CSS. Normalmente en HTML, establecemos
este atributo en una cadena. No obstante, en reagas,
debería ser un objeto donde su propiedad CSS sea
una propiedad del objeto En nuestro caso, usaremos la
propiedad de color de fondo y haremos que su valor sea dinámico utilizando el estado variable de verificación de facilidad dentro de un operador ternario t Cuando sea cierto, estableceremos el color de fondo en
el siguiente código de color, y si es falso, lo
pondremos en blanco. Guarde esto y en el navegador, haga clic en el botón k. Notarás que
cambiará su
color de fondo a verde. Al hacer clic de nuevo, lo
devolveremos a blanco. Notarás una transición
suave entre los dos colores debido a la propiedad de transición dentro de
la marca de verificación clase CSS. Esta propiedad tardará 0.3 segundos en hacer la transición entre los dos colores de
fondo.
15. Mejora la realización de tareas y la gestión del estado en tu aplicación React: Dentro del componente de elemento de tarea, hemos creado el estado de
verificación de facilidad y
solo lo estamos usando para actualizar el color de fondo
del elemento de casilla de verificación. Sin embargo, aún no hemos desarrollado
la funcionalidad principal, que es marcar el elemento de tarea como completado y actualizar
el estado del elemento de tarea. Para lograr esta funcionalidad, necesitamos definir una función de
finalización de tarea en el componente. Esta función
tomará dos argumentos, ID de
tarea, y es completa,
un argumento de intimidación. Pasaremos esta función como un prop al componente de
elemento de tarea. Dentro de la función de cambio
de casilla de verificación de identificador, ejecutaremos esta función de
finalización de tarea, pasando el ID de tarea Para el argumento is complete, usaremos el
estado comprobado ese y agregaremos un signo de
exclamación. Ahora, volviendo aquí, cuando necesitamos actualizar
el elemento de tarea específico, tenemos que actualizar toda
la matriz. En lugar de actualizar la matriz fuera de la función set task
items, como se muestra aquí, podemos
hacerlo de manera diferente. Podemos pasar en un coback proporcionado por la matriz de elementos de
tarea anterior Esta devolución de llamada debería
devolver el nuevo estado, que en nuestro caso es una matriz A continuación, iteraremos a través de la matriz de elementos de tarea
anterior
usando la función map Para cada elemento de tarea, verificamos si su ID coincide con
el argumento ID de tarea. Si lo hace,
devolveremos un objeto y
extenderemos las propiedades de la tarea antigua
usando el operador spread, que también funciona para los objetos. Pero solo asegúrate de esparcir objetos en objetos
y matrices en matrices. Luego agregaremos una
nueva propiedad llamada completed y la estableceremos en true. Al crear el elemento de
tarea inicialmente, debemos establecer la
propiedad completada para forzar, asegurando que todos los elementos de la tarea
comiencen por tarea y completados Ahora,
regresemos aquí y agreguemos el prop de finalización de tarea
al componente de elemento de tarea. En resumen, cuando hacemos clic en
el elemento checkbox, activamos la función handle
checkbox change,
actualizando el estado de facilidad comprobada
y cambiando el color de fondo de la casilla Posteriormente, se
llama a la función de
finalización de la tarea con el ID de tarea y
se completa los argumentos. Esta función ejecuta la función
set task items. Actualizando el estado de los elementos de tarea y marcando el
elemento de destino como completado. Por cierto, si el
ID de elementos de tarea no coincide con el ID de elementos de
destino, se devuelve a la matriz
sin modificación. En cuanto a la propiedad
terminada, en lugar de
establecerla
en true así, debe establecerse al valor del argumento is complete. De esta manera, podemos cambiar entre estados
comprobados y no comprobados con solo presionar un botón Registremos la
matriz de elementos de tarea para comprender mejor
lo que está sucediendo. Ahora abra el navegador, asegúrese de que el servidor
esté en ejecución primero, luego agregue una tarea de elemento uno. En la consola,
verá la matriz de elementos de tarea que contiene el elemento task one con la
propiedad completed establecida en falls. Al hacer clic en el botón k establece la
propiedad terminada en true. La presencia de
dos matrices impresas aquí se debe a la
naturaleza de reacciona, que a veces se vuelve a renderiza varias veces
dependiendo del estado del componente. Si renderiza dos
veces es normal, pero más de dos o tres
veces podrían indicar un problema. Ahora, me gustaría
abordar un problema en la aplicación que puede ser un comienzo. Al agregar algunos elementos, luego eliminar y
verificar un elemento, agregar otro elemento sin tareas, luego verificar ese elemento
y luego verificarlo, y luego intentar
eliminar la tarea número dos, ambas tareas se eliminan. Este comportamiento extraño surge
porque no debemos pasar el prop array items
del componente task form y
usarlo dentro de la función set task
item state. Esta manipulación del estado conduce a
consecuencias no deseadas, incluyendo la
eliminación simultánea de múltiples tareas Ahora, para abordar esto, necesitamos un enfoque más controlado de
la gestión estatal. Podemos cortar este código y agregar un coback a la función
set state, utilizando el argumento prev que contiene los
últimos datos de estado Luego regresaremos y
pegaremos la matriz ahí. En lugar de usar el prop de elementos de
tarea, usaremos el argumento Prev. Esto asegura que siempre estamos
trabajando con el último estado. Ahora,
pruébalo esto en el navegador. Borre la consola en la
tarea uno, una tarea dos, luego verifique o verifique elementos, y al eliminar
un elemento específico, solo ese elemento se eliminará.
16. Hazte práctico con el gancho useEffect: agrega filtros y estilo dinámico: Nuestra aplicación React está
tomando su forma final. Podemos crear nuevos artículos, podemos marcarlos como
completados y eliminarlos. Ahora quiero agregar
un elemento dentro del contenedor de la app striker y hacer que las tareas coreanas
cuenten para el usuario. Esto mejorará
la experiencia del usuario. Dentro del componente app y dentro del contenedor de task
tracker div, agregaremos un elemento de barra de información. Primero, agrega un di y establece el nombre de la clase en la barra de información del
rastreador de tareas. Dentro de este dif, agregará el elemento span y renderizará
la longitud de los elementos de la tarea. Ahora en el navegador, si
tenemos una forma vacía, obtendremos cero elementos. Siempre que agreguemos otro ítem, el número
aumentará y nos
mostrará cuántos artículos
tenemos en la lista. Ahora dentro de la barra de información, quiero tener algunos botones para filtrar los elementos de la tarea
por su estado, así podemos filtrar las tareas completadas y
renderizarlas solas en la lista o filtrar las tareas pendientes y también
renderizarlas solas en la lista. Dentro de aquí, primero agreguemos el elemento span y
agreguemos el texto todo. Esto se utilizará para eliminar el filtro y renderizar todos
los elementos dentro de la lista. El segundo
elemento clicable se
encargará de mostrar
solo las tareas completadas, y el último es
para las tareas pendientes,
las tareas que no están
marcadas como completadas Ahora vamos a manejar cada tipo de filtro
usando un estado Ue. Tendremos un estado de tipo de filtro y la función
set correspondiente. Dentro de la propia
función de estado U, estableceremos el valor inicial del tipo de
filtro a all. Si no hay ningún filtro aplicado, renderizaremos todos los elementos
de la tarea. Cuando filtramos los elementos de la
tarea, debemos guardar el
resultado filtrado en otro estado de uso. De lo contrario, si modificamos el estado del elemento de
tarea en su lugar, se perderán los datos originales. Nombra a este nuevo estado las tareas
filtradas. Comencemos manejando
el estado del tipo de filtro. Añadiremos un oyente de
eventos onclick al elemento all y ejecutaremos
la función set filter type, y estableceremos el estado en A continuación, copie esto y
pegarlo en el botón completado, y cambie el
estado para completar. Haz lo mismo aquí y cambia el
estado del tipo de filtro a pendiente. Cuando actualicemos el tipo de
filtro haciendo clic en uno
de estos botones, filtraremos la matriz de elementos de
tarea y guardaremos la salida en la matriz de tareas
filtradas. Entonces, en lugar de renderizar
la manera de los elementos de tarea, tenemos que renderizar la matriz de tareas
filtradas. Y cuando hacemos clic
en el botón O, actualizaremos la matriz de
tareas de filtro con la matriz de elementos de
tarea, que contiene todos
los elementos creados. El estado de los elementos de la tarea
va a funcionar como un almacenamiento. Ahora bien, ¿cómo vamos a actualizar la matriz de tareas filtradas cuando cambie
el tipo de filtro? Bueno, en react, podemos usar
otro ho llamado use effect, que es una poderosa herramienta
en reacciona para manejar tareas
extra que tienen que suceder cuando algo
cambia en tu app? Tenemos una lista de
tareas que
queremos filtrar en función de
diferentes criterios. Cuando usa use effect, puede actualizar automáticamente esa lista cada vez que cambie
el filtro. Es como tender
a reaccionar para vigilar ciertos cambios y luego tomar
acciones específicas en respuesta En nuestro caso, utilizamos el efecto de uso
para vigilar los cambios en el tipo de filtro y actualizar la
encuesta de tareas de filtro en consecuencia. Esto mantiene su aplicación receptiva y sincronizada con las opciones de los usuarios. Ahora, el gancho de efecto de usuario
acepta dos argumentos. El primero es un coback que
contendrá todo el
código que queramos ejecutar El segundo es el
array de dependencias, que es como una
lista de vigilancia para los cambios Pones ahí dentro las variables que quieres reaccionar
para estar atentos. Cuando alguna de esas
variables cambia, el código dentro del
efecto de uso se ejecuta de nuevo, o en otras palabras, se
ejecutará
el efecto de usuario coback Es una manera de decir, oye, reacciona, si estas cosas
cambian, haz estas cosas. Si deja la matriz vacía, el efecto se ejecuta una vez cuando se inicia
el componente. Si elimina la
matriz por completo, el efecto se ejecuta cada vez
que el componente se actualiza. En nuestro caso,
queremos vigilar el estado del tipo de filtro y
la matriz de elementos de tarea, modo que cada vez que tengamos
un nuevo elemento en la matriz, volvamos a ejecutar la
funcionalidad de filtro. Ahora dentro de esta devolución de llamada, comprobaremos si el
tipo de filtro es igual a completado Después actualizaremos
la matriz de tareas de filtro usando el argumento anterior
y el método de filtro. Después devuelva solo los artículos con la propiedad terminada
igual a true. De lo contrario, restableceremos la matriz de
tareas de filtro a la matriz
original. Esto se debe establecer tareas de filtro y pasar en la matriz de elementos de
tarea, que contiene todos los elementos de
la tarea. Ahora vamos a guardar esto y
probarlo desde el navegador. Ops tenemos un orden, y eso es porque configuré el estado inicial de la matriz de tareas de
filtro en una cadena, pero debería ser una matriz vacía. Lo copié de esta línea
y no lo actualicé. Ahora vamos a guardar e
ir al navegador. El pedido ha desaparecido, y ahora agreguemos
un nuevo elemento de tarea. A continuación, agregue la tarea dos. Marquemos la tarea
uno como completada, y cuando hagamos clic en
el patrón completado, verá que la
lista se filtra, y solo mantendrá
las tareas completadas. Si haces clic en el O Paton, éste renderizará todos los artículos Bueno, haría lo
mismo cuando haces clic en el filtro dependiendo porque todavía no lo
codificamos. Agreguemos el código para
filtrar tareas dependientes. Aquí, agregue una declaración LF. Tenemos que verificar si el
tipo de filtro es igual a pendiente. Si es así actualizaremos el estado de la matriz de tareas de filtro y haremos lo mismo
que hicimos aquí. Copie este código y
pegarlo y solo devuelva los elementos con
propiedades completadas establecidas en false. Pero ahora mediante el uso de la matriz de tareas de filtro
anterior, vamos a filtrar una matriz
que ya estaba filtrada. Esto dará como resultado
un comportamiento extraño y el
filtro pendiente no funcionará. Encima de eso, las cosas
comenzarán a romperse. Lo que tenemos que hacer aquí es filtrar la matriz de
elementos de tarea en sí, porque como dije muchas veces, este estado de matriz siempre
contendrá todos los elementos de la tarea. Copiemos la
devolución de llamada de filtro desde aquí y actualicemos la matriz de tareas de filtro con
la nueva matriz de elementos de tarea Copia todo este código, y hagamos lo mismo
dentro de esta declaración if dos y simplemente cambiemos la propiedad
completada a false. Ahora dentro del navegador, asegúrate de volver a cargar la
pasta para restablecerlo todo A continuación, agregue la tarea uno, tarea dos y la tarea tres. Comprobemos la tarea uno. Si filtramos las tareas
completadas, solo
obtendremos la
tarea número uno, lo
que significa que funciona. Si hacemos clic en pendientes, obtendremos tareas dependientes. Pero ahora
se comprueba la tarea número dos. Pero cuando eliminemos el
filtro haciendo clic en, la marca de verificación desaparecerá. Esto es solo un problema de renderizado, lo que significa que cuando
jugamos con los filtros, el componente de elemento de tarea
no se renderiza correctamente. Podemos arreglarlo yendo al componente de elemento
de tarea
y agregar un gancho de efecto de uso. Asegúrate de
importarlo desde el paquete I. Este
gancho de efecto de uso vigilará para que el punto de la tarea esté completo
y se verifique las variables. Y cuando una de ellas cambie, actualizaremos el estado de
uso comprobado. Guarda todo y
vuelve al navegador. Ahora, si cambia entre filtros
completados y pendientes, notará que los componentes del elemento de
tarea se renderizan correctamente. Para evitar tales errores
en el futuro, solo asegúrate de usar el gancho de efecto de
uso si tienes algún elemento GSX que se renderiza en
función de una condición Ahora, antes de terminar este video, quiero agregar algo. Actualmente, cuando
cambiamos entre filtros, no
podemos saber el tipo
de filtro
actual solo mirar a la interfaz de usuario. Lo que quiero hacer aquí es
resaltar el tipo de filtro
activo. Podemos hacer eso dentro de
aquí autorizando el atributo style para
agregar un estilo dinámico Actualizaremos el color de
fondo en
función del tipo de filtro. Si es igual a completado, usaremos el operador final y devolveremos este fondo gris. Este real debe ser
todo no completado. Copia este atributo de estilo y colócalo dentro del
siguiente elemento pan, que representa el filtro
completado y cambia todo aquí
con completado. Agrega otro signo igual aquí para que sea una operación
lógica. Por último, hagamos lo mismo
con el patrón de filtro de flexión. Si el tipo de filtro
es igual a doblar, bien cambia el
color de fondo al color gris. Si guarda esto y echa
un vistazo al navegador, podemos ver qué
tipo de filtro está activado.
17. Primeros pasos con los iconos de React: mejora tu interfaz de usuario: El componente de elemento de tarea. Quiero reemplazar el contenido del elemento checkbox y el botón de borrar con
algunos iconos hermosos En react GS, podemos parar y utilizar un paquete
llamado react icons. En lugar de crear estos iconos desde cero y
buscar imágenes. El
paquete de iconos de reacción te ofrece una amplia gama de iconos
al alcance de tu mano. Puede usar PM install o Yarn ad para parar el paquete
react icons, luego diríjase a enter y
espere a que se complete la instalación. Puedes navegar al sitio oficial de
los iconos de reacción usando el C RL. Allí encontrará
instrucciones sobre cómo instalar el paquete
y utilizarlo. En el lado izquierdo de esta página, verás una lista de
diferentes bibliotecas de iconos como Font Awesome material
design y más, todo dentro de un solo paquete. Dentro de esta barra de búsqueda, puedes buscar un ícono específico. En nuestro caso,
queremos un icono de eliminar. Voy a escribir borrar. Esto me dará una lista de iconos de
eliminación para elegir. Puedes elegir a quien te guste. Para mí, voy a elegir éste. Al hacer clic en él, el nombre del icono
se copiará para usted. Ahora puedes volver
al proyecto
encima del componente del
elemento de tarea, derecha y tablero, y
abrir dos llaves, luego pegar el nombre
del icono allí Importaremos este icono desde el paquete a icons y
desde la carpeta AI. Puedes ver que aquí tenemos
muchas carpetas, pero puedes saber
en
cuál se encuentra tu ícono por las dos primeras
letras del nombre de los íconos. A continuación, necesitamos otro icono
para el botón de verificación. Buscaré cheque, y escogeré estos dos iconos. En el proyecto,
voy a cambiar entre ellos según el estado comprobado
Oriente. Si se marca el elemento de tarea, renderizaré el icono lleno, y si se desmarca, renderizaré el elemento de casilla de verificación
vacío Volvamos al proyecto
y dentro del componente de
elemento de tarea y pot ambos íconos en un puerto por separado
declaraciones como esta. Ahora comencemos con
el botón de borrar. Elimine este texto y agregue el icono de eliminación de contorno de IA
como un componente de reacción. Ahora bien, si guardamos esto y
registramos en el navegador, veremos que ahí
se renderizó el icono. Pero necesita un poco de aguijón
para hacerlo más grande. Vuelve aquí y agrega
un nombre de clase, icono, que puedes encontrar en el archivo CSS del elemento de tarea si
quieres echarle un vistazo. Ahora esta clase hará que el icono de
eliminar aparezca más grande. Volvamos al botón
de verificación y eliminemos este elemento pan. En su lugar, renderizaremos
el ícono del cuadrado de verificación BS. También necesita tener
el icono de nombre
de clase para que sea
más grande así. Ahora, si hago clic, verás que el
color de fondo cambia a verde, pero en realidad es el fondo
del contenedor de iconos, no el icono en sí. Quiero cambiar entre este
icono y el lleno. Entonces en el proyecto,
quiero cambiar entre este icono
y el lleno. Vamos a agregarlo aquí,
luego agarramos ambos
dentro de dos llaves porque necesitamos agregar un código de script
Java Vamos a comprobar si se comprueba
el estado
de la variable , no es cierto. Lo que significa que el artículo no
está verificado. Después vamos a renderizar este icono. De lo contrario,
renderizaremos el icono lleno. Ahora en el navegador, si hago
clic en el icono de casilla de verificación, se reemplazará por
el icono de casilla de verificación rellenada, pero no queremos que se
llene con el color negro Podemos cambiar el color de
relleno usando el atributo fill y
establecerlo igual a este código de color, que es un color verde claro. Pero ahora en el navegador, parece que desapareció. Pero no es porque
el fondo del elemento sea verde también. De esa manera lo podemos ver. Para solucionarlo, eliminemos
este atributo de estilo de aquí y esta vez puedes
ver la casilla de verificación de relleno ahí, y funciona como magia Ahora, también quiero cambiar el icono de borrar con
el lleno. Busquemos el borrado
y escojamos éste. Debido a que comienza
con las letras AI, podemos importarlo
de aquí también. Después desplácese hacia abajo y vamos reemplazarlo con
este icono aquí y establecer el atributo fill el color rojo porque
es un botón de borrar. Por último,
eliminemos el ícono antiguo de aquí y revisemos el
navegador. Todo bien. No podemos ver nada
porque de nuevo, el color de fondo también es rojo. Tenemos que cambiar eso
desde dentro de esta clase. Abra el elemento de tarea en el archivo CSS. Y quitar la propiedad de
color de fondo. Ahora podemos ver el icono de eliminar. Como puedes ver, el uso de iconos hizo nuestra aplicación fuera más hermosa
y divertida de usar.
18. Añade navegación por múltiples páginas: implementa DOM de React Router: Se ha completado la funcionalidad
del rastreador de tareas. Ahora nos centraremos en
agregar varias páginas, o en otras palabras,
múltiples rutas. Para ello, primero
agregaremos un encabezado en la parte superior de esta página y luego agregaremos algunos enlaces de
navegación a la misma. En la carpeta de componentes, agregaremos un nuevo componente
y lo nombraremos encabezado g SX. Primero, port react from react, luego definimos la función del
componente header y la exportamos en la parte inferior, dentro de este componente,
devolveremos un elemento header y
le daremos un nombre de clase de header. En el interior, tendremos
dos enlaces de navegación, uno para el hogar y el
otro para una página sobre. Estos dos elementos tendrán
el elemento de encabezado de nombre de clase. Todavía no tenemos
estas clases. Crearemos un nuevo archivo CSS
para el componente header. Encontrarás este archivo en la sección
de recursos de este video. Solo agrégalo a tu proyecto. Tiene algunos estilos para el elemento header y
para los items header. Ahora, el componente de encabezado
se va a agregar dentro del archivo CS de índice porque
queremos que el encabezado esté
presente en todas las páginas. Dentro de aquí, agrega encabezado y
asegúrate de importarlo desde
la carpeta de componentes. Si probamos esto en el navegador, podemos ver que el Hader está ahí en la parte superior de la página, pero sin ningún estilo Eso es porque me olvidé de desarmar el archivo hydro Dot ***
dentro del componente header Ahora, si revisamos de nuevo, veremos el encabezado con home y sobre los botones de
navegación, e igual efecto ho. Ahora, la página de inicio en nuestro
caso es el componente ab DGS. Lo que nos falta
aquí es el at page. Vamos a construir
un componente para ello
y nombrarlo sobre DGS X. Nuevamente, port react from react, luego definir la
función del componente y nombrarlo sobre page y
exportarlo en la parte inferior Por ahora, solo volvamos un
dip con texto diciendo sobre. Ahora dentro del archivo Index DoZis, continúe y use el componente a
page así En el navegador,
verá que allí se renderizó
un texto a, proveniente del componente about
page. No queremos que la página
acerca de se renderize con la página principal
al mismo tiempo. Queremos que cada página se
renderize en una ruta separada. Por ejemplo, si navegamos
a Local house 3,000 slash a, deberíamos obtener solo
la página acerca Ahora, cuando se trata de construir aplicaciones
web con react, posible que haya notado
que por defecto, react admite un enfoque de aplicación de una sola
página o en términos cortos SPA. En los SPAs, todo se
carga inicialmente en una sola página HTML. A medida que los usuarios interactúan con la aplicación, react actualiza parte de
esa página dinámicamente, dando la ilusión
de navegar por diferentes páginas sin realmente refrescar toda la página. Sin embargo, hay
escenarios en los que desea páginas
distintas con URL
separadas, como la página anterior Aquí es donde entra en juego la magia del paquete
React Router Doom Ahora, este paquete le
ayuda a simular comportamiento de
varias páginas en
una sola aplicación de página. Con el paquete react router doom, puede definir rutas para diferentes páginas dentro de
su aplicación Se trata de enrutar componentes
a una URL específica. Por ejemplo, puedes
configurar una ruta para la página acerca de la misma manera que lo
harías para la página de inicio. Una vez que comiences a reaccionar router Dom, vamos a importar un
par de cosas para ello. Primero, el enrutador del navegador, que es una parte vital
del
paquete de volcado del enrutador react y react. Ayuda a su aplicación a administrar
diferentes QRL y muestra los componentes correctos en
función de esas Piense en ello como el
navegador que asegura cuando los usuarios van
a una URL específica, el contenido correcto
aparece en esta pantalla. Ahora usemos el S QR para
cambiar su nombre a solo router. Utilizaremos este componente para envolver todos los componentes de nuestra aplicación. A continuación, importaremos el
componente de rutas y el componente de
ruta. El componente de rutas
contendrá todas nuestras páginas, y para cambiar entre
páginas usando una U, utilizaremos el componente de
ruta. Ahora este componente puede
aceptar un atributo path. Para la página de inicio, agregaremos una diagonal hacia adelante que representa
la ruta raíz Luego para renderizar el componente
app, utilizaremos el atributo
component y pasaremos el nombre
del componente. Haremos lo mismo
para la página acerca de. Pero esta vez, queremos que el
camino sea recortado. Puedes quitar la
baraja si quieres. Ahora, el componente
que se renderizará en esta ruta es el componente
about page. El encabezado no está incluido
dentro del componente de rutas porque queremos
renderizarlo en cada ruta. Ahora dentro del navegador, navegue hasta la manguera URO Local 3,000 aproximadamente, y ahí va. El componente Acerca de la página es el único
que se renderizó. Ahora agreguemos un poco de estilo
a la página acerca de. Crea un
archivo CSS sobre punto, y dentro de él, crearás una clase
contenedora y agregarás estas propiedades a la misma. Esto solo hará que el
texto sobre salte al
centro de la página. Si navegamos de regreso
a la ruta raíz, volveremos a subir el rastreador.
19. Mejora de la navegación: domina el componente de NavLink en ReactJS: Queremos navegar entre páginas usando los botones de
navegación del encabezado. Sin embargo, actualmente, estos
son solo elementos de pan. Necesitamos cambiarlos
a elementos de hipervínculo. Estableceremos el atributo H
ref para la página de inicio en la ruta
raíz de esta manera. Del mismo modo, haremos
lo mismo para el enlace about y
estableceremos la referencia H en a. con estos cambios,
podemos navegar entre las páginas de inicio a diez
usando estos botones. Ahora, centrémonos en resaltar el enlace de navegación activo con un color y estilo diferentes. Cuando estamos en la página at, se
debe resaltar el enlace de navegación a. Pero el reto
aquí es que
no queremos que la página se vuelva a cargar Cada vez que la página se recarga, nuestra aplicación
perderá su estado, y todos los datos
serían eliminados Para evitar que esto suceda, el paquete reacro dom proporciona un
componente útil llamado Navnk El componente novedoso
del router React Dom es como un
enlace de navegación mejorado para las aplicaciones de reacción Es similar a la etiqueta ACML A, pero en lugar de usar
el atributo H t, usamos otra llamada dos El componente novelin
aplica
automáticamente el estilo
para los enlaces activos Cuando los usuarios hacen clic en la novela, resalta visualmente
la página coreana, creando una experiencia de navegación más fluida
e intuitiva. Ahora para lograr esto, vamos a
crear una nueva clase en el archivo CSS de punto de encabezado para
el estado activo de encabezados. Mi encontrar esta clase ya
definida en el archivo. Si no
lo encuentras, así que sigue. Dentro de esta clase,
ajustaremos el color
usando este código, representando un color azul. Hagámoslo un poco más oscuro. Ahora regresa al archivo HoDogs x y dentro del primer enlace
nav dentro del atributo de nombre de clase, enciérrelo con base rizada Pasar en función que acepta un objeto
que contiene dos propiedades, está activo y está pendiente. La propiedad activa es se
establecerá en true si la ruta URL en el
navegador coincide con la ruta URL dentro de
los dos atributos. La propiedad es pendiente otro lado se
utiliza para administrar la navegación a la espera de
datos u operaciones ACN Ahora dentro de esta devolución de llamada, necesitamos devolver un nombre de clase Devolveremos condicionalmente la clase
de artículo de encabezado. Junto con la clase activa
del elemento de encabezado, si la
propiedad activa e es verdadera. Siéntase libre de agregar
más de una clase si es necesario. Si no está activo, revisemos la propiedad
pendiente de Es. Si es true, devuelva la clase de elemento
hidro junto con la clase pendiente de
elemento hidro. Ahora definamos el ítem hidroeléctrico pendiente de clase en
el expediente hidrod SS Bueno, vamos a probar el
color al azul claro. Vuelva al
comoponente hidro aquí, cuando la
propiedad e pendiente también sea falsa, aplique la clase de ítem hidro Ahora vamos a copiar todo
esto pegado dentro del segundo componente
N link Al probar esto
en el navegador, los cambios pueden no ser evidentes de
inmediato. Sin embargo, si acercamos el zoom, notaremos el color azul
oscuro. Vamos a hacerlo más
distinto cambiando el color a verde y aumentando
el peso de la fuente a 800. Intentemos agregar un
conjunto de propiedades de decoración de texto para subrayar Ahora bien, si probamos estos
cambios en el navegador, ahora
queda más claro
qué guardado está activo y en qué página
nos encontramos actualmente.
20. Domina el componente de enlace y crea una página 404 personalizada: Reaplicación con
múltiples rutas, tenemos que manejar el
escenario donde el usuario solicita una ruta que no
existe en nuestra lista de rutas Esto significa que tenemos que manejar
el error de la página no encontrada. Podemos hacerlo fácilmente dentro
del archivo DGS de índice
agregando un nuevo componente de ruta al final de la lista de rutas Esta vez, usaremos
el atributo element, que puede contener cualquier código GSX, incluso un componente como este Sin embargo,
solo renderizaremos un div con un mensaje que diga nodo de
página encontrado, y agregaremos un enlace para navegar de
regreso a la página principal. No queremos volver a cargar la página cuando hacemos
clic en este enlace Queremos que nuestra aplicación funcione como
una aplicación móvil y sea rápida. En una aplicación móvil, cuando cambias entre secciones o páginas, la aplicación móvil no se actualiza. En react, podemos usar
el componente de barra NAV, igual que hicimos en el encabezado. Pero recuerde, la barra NAV solo
debe usarse
para los enlaces de navegación. Es por eso que el paquete dom del
router react proporciona otro componente
para los enlaces normales. Este componente se denomina Enlace. Asegúrate de
importarlo en la parte superior. Ahora puedes usar el componente
link al
igual que usas un elemento de
hiperenlace normal Usa etiquetas de apertura y cierre, y entre ellas, puedes
agregar texto como volver a casa. Para el enlace en absoluto, use los dos atributos así. Ahora, la parte más importante aquí es el camino de esta ruta. Se debe establecer en
un símbolo de estrella. De esta manera, cuando cambie la ruta
URL, react router dom
verificará la lista de
rutas disponibles y el
orden en que se definieron. Empezaré a comparar
la primera ruta, que es la ruta raíz. Si los caminos no coinciden, se moverá al
siguiente en orden. Si llega a una ruta
con una ruta con símbolo de estrella, se detendrá y
seleccionará esa ruta. Es por ello
que mencioné que es necesario colocar la ruta al
final de la lista de rutas. De lo contrario, nunca se
alcanzará ninguna
ruta que pongas por debajo de
esta ruta general. Todo bien. Vamos a
revisar el navegador. Como puede ver, si la
ruta de ruta no existe, renderizaremos este mensaje. Cuando hagamos clic en este enlace, volveremos a la página de
inicio sin recargarla.
21. Gestión del estado persistente en React: mantiene los datos en todas las rutas: Agregando rutas a
nuestra aplicación, nos enfrentamos a otro reto. Cuando agregamos un elemento a la
lista y luego navegamos a la página acerca de y
regresamos a casa, ese artículo no estará ahí. Esto se debe simplemente a que
el componente de la aplicación vuelve a renderizar cada
vez que cambia la ruta, y cuando eso sucede, todos estos estados volverán
a sus valores iniciales. Aquí la matriz de tareas filtradas volverá a una matriz vacía, y todos nuestros
datos se perderán. Podemos solucionarlo eliminando la ruta de inicio de la lista de
rutas y renderizando el componente de la aplicación
directamente fuera del componente de rutas y
dentro del componente de enrutador. Esto se debe a que dentro del componente de la
aplicación definirá una ruta de inicio envolviendo todo el código GSX dentro
del componente de rutas El componente de ruta no se puede usar fuera del componente de
enrutador. Es por eso que agregamos el componente de
aplicación dentro del componente de enrutador en
el índice al archivo GS. Tomaré todo este
código y crearé una ruta usando el componente de ruta que
se refiere a la ruta de ruta. Después dentro del atributo
element, agrega una etiqueta de apertura y
cierre así, y pega el código
que cortamos antes. Si probamos esto en el navegador, notará que
la
página de la nota encontrada se renderizó
junto a la página de inicio. Lo arreglaremos
en un momento. Pero ahora al menos cuando agreguemos un ítem a la lista y
cambiemos entre rutas, el ítem estará ahí. Esto significa que el componente de la aplicación
no se volvió a renderizar. Ahora eso es simplemente porque el componente de
ruta siempre volverá a renderizar el componente
cada vez que cambie la ruta. Lo que hicimos aquí es que
hicimos solo el código GSX, la parte que se vuelve a
renderizar para que no
se toquen todos los estados Ahora bien, la razón por la que la página no
encontrada se renderizó en la página principal es
porque tenemos que
poner todas nuestras
rutas en un solo lugar. Lo primero que
voy a hacer es
tomar todo el código GSX de la página
principal Cortarlo, y luego dentro de
la carpeta de componentes. Crearé un nuevo
componente de página y lo nombraré home. Apoyemos reaccionar de reaccionar. Defina el componente
de función home. Y devolver todo el código GSX que tomamos
del componente app, y no olvides exportar el componente home
en la parte inferior Ahora tenemos que pasar todos estos estados y variables
del componente app al componente
home como props Aquí, abre un objeto y copia todas estas
propiedades en tu código. También asegúrese de importar cualquier otro componente que
se haya utilizado en este archivo. Ahora dentro del componente de la aplicación, usaremos el
componente home aquí. Y asegúrate de
portarlo en la parte superior. Quitemos puertos que
ya no necesitamos. Ahora por fin, tenemos que pasar
en todos los apoyos requeridos. Puede copiar y pegar
la lista de props aquí y establecer cada prop en
su variable correspondiente Después de hacer eso, tenemos que
eliminar todas las rutas
del archivo DGS de índice y colocarlas dentro
del componente app Recuerde, estamos haciendo todo esto e para asegurarnos
de que el componente
de rutas no vuelva renderizar todo el componente de la aplicación, lo
que provocaría que pierda el estado de la aplicación. Ahora aquí, en realidad podemos quitar el slash trasero y simplemente
dejarlo así Si queremos establecer
una ruta específica como el índice de nuestra app, como el home aquí, podemos agregar el índice de atributos sin establecerlo en ningún valor, por defecto,
se establecerá en true. Dentro del archivo index to GS, tenemos que eliminar
el componente routes porque en
toda la aplicación, deberíamos tener solo
un componente routes. También eliminemos
cualquier puerto usado. Derecha. Ahora dentro del navegador, agreguemos un elemento de tarea. Cuando cambiamos entre rutas, el elemento de tarea
no se eliminará.
22. Domina la obtención de datos en React: crea una página principal con integración de API: Ahora vamos a crear una
mejor página acerca de. Eliminemos esto y agreguemos un elemento de profundidad con el nombre de
clase un contenedor. Encontrará el archivo CSS
en la sección de recursos. Ahora dentro de aquí, tendremos un elemento de herramienta H que
dice sobre nuestros servicios. Detrás de él un
elemento de párrafo donde podemos describir de qué se
trata nuestra app. Podemos escribir. Estamos aquí para brindarle una
aplicación simple de seguimiento de tareas para ayudarlo a mantenerse organizado y administrar
sus tareas de manera eficiente. Guarda esto y en el navegador, verás los cambios
en la página anterior. A continuación de este párrafo, tendremos otra di
sección donde obtendremos algunos
chistes de programación de una API Dale a este dif la sección de broma de
nombre de clase. En su interior, tendremos un texto H de tres anchos que
dice broma de programación. Y debajo de él, un elemento span donde renderizaremos el contenido
del chiste. Básicamente, vamos a buscar una
broma en cada renderizado de página. Vamos a agregar un estado U, y nombrarlo broma para
guardar el chiste y establecer su valor inicial
a un objeto con una propiedad de contenido establecida en null. Ahora en gas reac para obtener
datos de un IBI externo, tenemos que usar el gancho gordo del
usuario Al usarlo, podemos esperar a que finalice
la operación Cuando termine, volveremos a
renderizar la página con
los datos obtenidos Mantengamos las dependencias
vacías por ahora. Después dentro del
efecto de uso callback, definiremos una función
y la nombraremos fetch chistes Esta función
será asíncrona porque queremos esperar la operación de búsqueda Dentro de él, usaremos un bloque
tri catch para cualquier error potencial
e imprimirlos la consola usando el método de error de punto de
consola. Dentro del tri blog, declaramos una respuesta con
nombre constante y usa la
palabra clave de espera para detener la ejecución del
código hasta que terminemos recuperar el chiste usando
la función fetch Esta función aceptará el AP IURL como
primer argumento Adelante y copia
la URL también. Esta es una API gratuita que devuelve una broma sobre la programación
en cada solicitud. A continuación, declare una
constante de datos y, nuevamente, use la palabra clave de espera y llame al método JSM
en la respuesta Ahora bien, este método
pasa específicamente al cuerpo de respuesta como JSM JCN es solo notación de
objeto JavaScript, convirtiéndola en un objeto
Javascript. Cuando tenemos los datos
como un objeto Javascript, podemos establecer el estado de broma y actualizar la propiedad content
con data dot joke. Ahora, solo necesitamos llamar a función de chistes recuperados
en
la parte inferior de la devolución de llamada del efecto de
uso Al mantener la matriz
de dependencias vacía, el gancho de efecto de uso se ejecutará solo una vez después de que se monte el
componente. Y por mount, quiero decir cuando el componente primero
se renderiza en el navegador. Si guardamos esto y lo
probamos en el navegador, cuando cambiemos de ruta, se
activará
el efecto de uso, y ahí veremos el chiste. Pero hay algo
que tenemos que arreglar. Actualmente, si notas, el chiste a veces puede
ser indefinido. Entonces si agregamos un
registro de consola aquí y volvemos al navegador y
cambiamos entre rutas para ejecutar la
operación de búsqueda, y la consola,
notaremos que a veces la broma es indefinida, Para solucionar esto, podemos usar una declaración if aquí y verificar
si la broma es indefinida Si es así, volveremos a ejecutar la función de broma de
Ft. Sí, podemos hacer eso
porque en JavaScript, llamar a una función dentro de
sí misma se conoce como recursión Es una técnica para
resolver problemas
dividiéndolos en instancias
más pequeñas usando la misma función. Agrega una declaración S para manejar el caso donde
tenemos una broma. En este caso, podemos
actualizar el contenido del chiste. Ahora bien, si probamos esto
desde el navegador, asegúrate de borrar la consola. Después ve a casa y
vuelve a la página acerca de. Notarás que
nos dieron el chiste. Pero en la consola, podemos ver que lo traemos dos chistes, lo que significa que el efecto de uso se
ha disparado dos veces, y eso es te
al estado interno del componente about page Arreglemos esto paso a paso. Primero, agreguemos un nuevo estado
y nombre que está buscando. Este estado se
utilizará para dejar
claro en el navegador que
estamos recuperando datos Establezca su valor inicial en
true porque vamos a buscar los datos directamente
cuando se monte el componente. A continuación, vengamos aquí cuando los datos
de extracción se hayan detenido, y antes de guardar los datos, establecemos el estado de
recuperación de is en false y hagamos lo mismo cuando
obtengamos un dentro del bloque catch Ahora, en el código GSX, queremos informar al usuario
que estamos recuperando, no piensen que nuestra
app está rota o algo
así Así que pon este elemento span
dentro de un par de llaves y comprueba
si es que la recuperación es verdadera Después devolvemos un texto que dice
ir a buscar con tres puntos. Podemos probar esto en el navegador. Como pueden ver, el mensaje de
búsqueda está ahí, pero desaparece muy rápido Podemos ralentizarlo abriendo la
ventana Dev tools e yendo a la pestaña de red, lado aquí, busca este
menú y cambiarlo de no tropezar
a ralentizar tres G. Esto emulará la
experiencia de navegar por
Internet usando
una conexión de Internet usando red móvil lenta y limitada, lo que ralentizará
la obtención del estrangulador desde
el Joke Esto nos ayudará a ver los mensajes de
búsqueda
en el navegador Al hacer esto, podemos descubrir un nuevo problema en la funcionalidad de nuestras
aplicaciones. En la consola,
puedes notar que el gancho de efecto de uso se
activa muchas veces. En cada vez que los
datos son indefinidos, y finalmente, obtenemos
los datos de la API. Pero incluso entonces el efecto de uso se activa una vez más, lo que resulta en obtener
dos chistes de la API Los usuarios no podrán notar esto. Nuestro trabajo como desarrolladores, es descubrir estos pequeños
errores y corregirlos. Primero, agregaremos una propiedad
recuperada al estado
del objeto broma y estableceremos
su valor inicial en true Entonces vendremos aquí antes de
la función fetch joke y verificaremos si joke dot fetch
está configurado en true o Si no lo es, entonces
detendremos la ejecución
del código con una sentencia return y no recuperaremos los datos Pero si es cierto, entonces vamos a buscar los datos Y cuando terminemos, estableceremos la propiedad
buscada para
forzar para que no volvamos a
recuperar los datos Esta vez, dado que el efecto use depende del valor de
la propiedad recuperada, debe agregarse dentro de
la matriz de dependencias. Todo bien. Ahora en el navegador, si volvemos a probar la página acerca de, notaremos que el
problema está empeorando. Ahora estamos recuperando
los datos muchas veces. Incluso cuando tenemos datos de broma. Pero no te preocupes, este
problema se puede solucionar usando una función de efecto de uso llamada
limpieza después de los efectos. Esto se hace devolviendo una función de devolución de llamada al
final del gancho de efecto de uso, donde podemos
limpiar algunas variables En nuestro caso, queremos establecer el efecto broma
propiedad a la fuerza. Ahora tenemos que agregar el
objeto broma a las dependencias
alejadas así Score back se ejecuta cuando
el componente está desmontado, o cuando las dependencias y
la dependencia y cambian Se usa comúnmente para tareas como asesoramiento,
suscripciones, eliminación de oyentes de eventos
o, en nuestro caso, restablecer estados a
sus valores iniciales cuando el efecto ya
no es necesario Esto evita fugas de memoria
o comportamientos inesperados. Ahora bien, si probamos esto
en el navegador, todo funcionará
normalmente sin ningún problema. Ahora, tenemos que manejar
una cosa más. Imagínese si la API de broma está abajo, lo que significa que no se resolverá. Por lo que los datos
siempre estarán indefinidos. En ese caso, esta afirmación siempre
será veraz, y terminaremos ejecutando la función fetch joke Para evitar que eso suceda, podemos declarar una
variable let fuera la función fetch joke
y nombrarla Fetch count Establezca su valor inicial en cero. Luego dentro del tri
block al final, aumentaremos el conteo de fetch usando el operador plus plus Este javascript se llama operador
de incremento de post. Se utiliza para incrementar el valor de una variable numérica en uno Dentro de esta declaración,
requeriremos que el recuento de fetch
sea menor o igual a dos De lo contrario, no volveremos
a ejecutar la función fetch joke Todo bien. Ahora quiero mejorar un poco el código
aquí. Siempre es una buena
práctica reducir el número de
funciones de estado de uso en tu código. Para el estado de facilidad de búsqueda, podemos retirarlo de
este componente y reemplazarlo dentro del estado de
broma como propiedad Ahora podemos actualizar todo
en una función de estado. lado del bloque catch, si encontramos algún error, podemos establecer el
contenido de broma a ninguna broma, y luego les diremos reload para que
puedan recuperar los datos
nuevamente y establecer fetch property para
forzar y hacer lo mismo
para la facilidad Aquí abajo, no olvides
actualizar el código y usar el objeto broma para
acceder al estado de búsqueda de facilidad Nada cambiará
en el navegador, pero mantendrá
las cosas en orden, y podemos evitar
cualquier comportamiento extraño. No olvides restablecer la red throlling
a no throlling Continuemos con
la siguiente lección.
23. Domina las rutas anidadas en React.js: navega por estructuras complejas de aplicaciones: A veces es posible que queramos
agregar rutas anidadas
a nuestra aplicación Por rutas anidadas,
me refiero a mostrar una página específica dentro de
otra basada en la ruta uro Consideremos agregar
una ruta instantánea dentro de la página acerca de. En este caso, necesitamos
agregar una etiqueta de cierre, y luego agregar otro
componente de ruta dentro de ella. Por cierto, prefiero usar la etiqueta de elemento en lugar
de la etiqueta de componente, pero siéntete libre de conservarla tal cual. Ahora, este componente de ruta
será de cierre automático y establecemos el
atributo path a los desarrolladores. Esencialmente, estamos agregando
una página que mostrará una lista de desarrolladores que contribuyeron a construir
esta aplicación. Ahora vamos a establecer el
atributo element a un ti con el texto dvted by
o ¿sabes qué? Podemos cambiar el nombre de la
base anidada a equipo en su lugar. Dentro del atributo element, renderizamos un componente
llamado team. Ahora, vaya a la carpeta de
componentes, cree un nuevo archivo
llamado team TSX Primero, y port
react from react, luego define la
función. Después exportado. Dentro de este componente,
devolveremos una lista de desarrolladores. Antes de eso, copie
la siguiente matriz que contenga algunos nombres falsos. Usaremos esta matriz para renderizar
la lista de desarrolladores. Ahora, devuelve un di y agrega
un elemento H two dentro de él con los desarrolladores de texto que trabajaron en la aplicación de seguimiento de
tareas. Debajo de esto, agrega un elemento de lista
ordenada. Dentro de él, usaremos
la función map para
iterar a través de su
nombre e índice Retornaremos un elemento
list name, estableciendo el valor key
al argumento index y colocando el argumento name
dentro de llaves Ahora, guarda todo y
dentro del componente ap, reemplaza este d con
el componente de equipo. Ahora, si guardamos y navegamos a la ruta URO sobre el
equipo de slash en el navegador, la lista de desarrolladores debería
aparecer en la parte inferior Sin embargo, eso no sucede. La razón es que
necesitamos ir al componente at page dentro del dev en
el componente de salida, que se puede importar desde
el paquete dom del router react. Al hacer esto, nos aseguramos de que el componente del equipo
se renderice cuando la ruta del enrutador es igual
a about slash team Ahora el componente outlet
actúa como marcador de posición, mostrando contenido
basado en la ruta coreana Es como una ranura donde se inserta el contenido de la
ruta. Esto es especialmente
útil para crear diseños
anidados o alterar diferentes partes del
ritmo en función de la ruta Mantiene su código
organizado y
facilita el cambio entre diferentes secciones
de su aplicación. Todo ahora mismo, ponga en
su mente que podemos agregar aún más
rutas anidadas si así lo desea Por ejemplo, agreguemos una ruta que haga referencia
a la ruta índice, que se renderizará cuando la ruta del enrutador sea igual a a. estamos en el lado del enrutador, lo que significa que la ruta de índice
se refiere a la ruta about Esta ruta renderizará un componente de enlace
diciendo conocer al equipo, refiriéndose a la ruta del equipo
anterior. Estoy agregando este enlace
como una ruta anidada porque quiero que aparezca en
base al camino ural Es la
forma más sencilla de lograrlo. Ahora, en el navegador, si
navegamos desde casa
hasta la página anterior,
anotamos el enlace de conocer al
equipo en la parte inferior. Al hacer clic en él, se cambia la ruta URL haciendo que el enlace desaparezca y se renderice el componente
del equipo. Observará que al
cambiar entre rutas
anidadas se activa
el componente padre, que es la página at que se va a volver
a renderizar
24. Ponte manos a la obra con useRef: mejora tu proyecto de React: Ciertas aplicaciones web modernas. Cuando el cliente
obtiene la página,
el campo de entrada automáticamente
será Fox para que en nuestro caso, usuario pueda comenzar a agregar elementos de
tarea de inmediato. Podemos lograr esto
muy fácilmente dentro del
componente de formulario de tarea con el uso de un nuevo gancho de reacción
llamado use RAF, que es como una etiqueta de nombre
para los elementos de su código. Te ayuda a referirte a un elemento
específico en el domo, para que puedas interactuar con
él usando JavaScript. No solo para entradas de formularios. Puedes usarlo para cualquier elemento
que quieras hacer un seguimiento. Es como poner
una nota adhesiva en algo para que puedas
encontrarlo fácilmente después. Cuando llamas al use raf hook, obtendrás un objeto llamado F. Podemos nombrarlo input ref. RF es como un
contenedor que contiene una referencia a un
elemento dom o un valor. Después dentro del elemento input, agregaremos un
atributo RF y
lo pondremos igual a la entrada
F. De esta manera, podremos acceder al elemento input. Piense en ello como un selector de elementos de
script Java. Hay una condición
para usar esta ra. Solo se debe acceder cuando el elemento de entrada se
renderiza en el navegador. Tenemos que usarlo dentro un gancho de efecto de uso y agregar las dependencias
y mantenerlo vacío,
por lo que solo se ejecutará una vez
cuando el componente se monta Dentro de este uso de gancho de hechos, podemos usar la ref de
entrada para acceder
al valor koan del ref
de la propiedad coreana Esta propiedad coreana se
refiere al elemento input. Para enfocar
dentro del campo de entrada, lo que significa agregar la barra de
texto dentro de él, podemos llamar así al
método de enfoque. Normalmente establecemos el
valor inicial de la ref a null, lo que evita asumir
un estado inicial y evita efectos no deseados Ahora, asegúrate de
guardar todos los cambios. Después actualiza la
página web en tu navegador. Al hacerlo,
observará que el campo de entrada gana
enfoque automáticamente. Como resultado, los usuarios pueden comenzar
rápidamente a interactuar con la aplicación
ingresando contenido sin necesidad de ninguna acción
adicional Si quieres echar un
vistazo a la ref de entrada, puedes
registrarla en consola y obtendrás el elemento de entrada HTML
en la consola. Ahora bien, si solo
consolamos el rap de entrada, entonces dentro de la herramienta deep, obtendrás un objeto con
una propiedad llamada Coan Por cierto, tenemos
una r aquí diciendo que un componente está cambiando una entrada incontrolada
para ser controlada Está hablando de
un valor de componente que va de indefinido a definido. Esto es hablar del elemento de entrada dentro
del componente de formulario de tarea. Donde establecemos su valor
al estado de entrada. El problema aquí es que el valor inicial del estado no
debe ser indefinido. Podemos cambiar eso
fácilmente agregando una cadena vacía
al use state hook
como valor inicial. Ahora si actualizamos la pasta, la url no
se volverá a imprimir.
Aymen El Kani, software engineer
