Transcripciones
1. Introduccion: ¿Sabes cuál es la pregunta de
entrevista front-end más popular? Eso, ¿se puede construir un mostrador? ¿Hoy? Vamos a
recorrer todo lo que necesitas saber para construir tu
propio proyecto usando React, incluyendo cómo
construir este contador para que puedas aprovechar tu
próxima entrevista de trabajo. Hola, mi nombre es Zoe. Soy ingeniero de software
y ex profesor que le encanta educar a otros
sobre cómo aprender a codificar He creado toneladas de sitios web
y aplicaciones web usando React, CSS, HTML y otras tecnologías. Al final de este curso, podrás hacerlo por ti mismo. Empecemos.
2. Proyecto del curso: Proyecto de clase. El proyecto para esta
clase es construir un contador que
funcione completamente usando react para esto. Necesitarás acceso
a una computadora y un editor de código como el código de
Visual Studio. También deberías tener
algo de comprensión del script
Java así
como HTML y CSS. Dejaré enlaces
a cualquier activo y recurso que necesite en la pestaña de proyectos y
recursos a continuación.
3. ¿Por qué reaccionar?: ¿Por qué React? React
fue desarrollado en Facebook y lanzado
al público en 2013. Se creó
inicialmente con el fin de manejar recargas
y actualizaciones
ineficientes de página que en momento requerían que todo
el modelo de objetos Dom o documento se
repintara Con cada actualización,
React, solucione este problema creando lo que
llamaron el Do virtual, una representación del Dom en
la memoria Esto permitió a React
actualizar únicamente aquellos aspectos o componentes del Dom que cambiaron en lugar de toda
la página, resultando en un mejor rendimiento. React ha sido un cambio de juego en el espacio de desarrollo web y
sigue siendo una de las bibliotecas más
populares que existen Debido a su uso de componentes, los desarrolladores ahora son capaces de escribir código
modular con mucha más facilidad, lo que les permite desarrollarse mucho más eficiente
y efectiva. Otros frameworks populares que a menudo
se comparan para reaccionar, incluyen View y Angular.
4. Componentes: Componentes. Los componentes son piezas de
código
reutilizables que reaccionan, apalancamientos para
mantener su modularidad Piense en ellos como
los bloques de construcción que los desarrolladores utilizan
para crear aplicaciones. Un componente es un código
autónomo, reutilizable que encapsula su propia funcionalidad,
estado y estructura Estos componentes se pueden
considerar como una combinación de HTML y Javascript o JS, que se utiliza en react. Cada componente puede
tener su propio estado, que representa datos que
pueden cambiar con el tiempo, y un conjunto de propiedades
o props que permiten a los componentes principales transmitir datos a
sus hijos Al igual que HTML tiene elementos
dentro de otros elementos, React tiene componentes
dentro de otros componentes. Estos componentes internos se consideran los hijos
de los componentes externos.
5. Accesorios y estado: Apuntalamientos y estado. Para entender y usar realmente
reaccionar al máximo, necesitamos hablar de
estado y propiedades O como se les llama utilería. Veamos un componente básico. Estos componentes están realmente en su base, solo funciones. Pueden tomar argumentos, pueden modificar variables, y pueden devolver un valor. Simplemente hablando, podemos pensar props como los argumentos
que se pasan a nuestra función cuando
se llama state como las variables locales que solo existen dentro de
nuestro componente dado Vamos a ampliar esta
definición más adelante, pero es importante
entender primero cómo funciona.
6. Crea una aplicación de React: Crear app react. Hay varias formas de
configurar una aplicación de reacción. En este curso,
repasaremos los más populares. La forma original de
configurar una aplicación de reacción era mediante el uso de create
react app, o CRA. Dado que React es una biblioteca y no un marco completamente
funcional, para que funcione completamente, necesita varias otras
piezas como herramientas de construcción. La aplicación Create React también fue desarrollada por Facebook
con el fin de eliminar gran parte de esta
complejidad y
convertirla en un comando simple pero
poderoso. Al usar create react app, te ahorrarás
horas de dolor de cabeza cuando intentes poner en marcha un nuevo proyecto de React
por primera vez. Para ejecutar create react
app, simplemente ingresa px, create react app,
seguido del nombre de tu app en
la terminal y pulsa enter. Después de unos minutos,
estarás todo listo para ir. Puedes ejecutar el comando por
ti mismo en tu terminal si quieres ver cómo se ve
create react app. Lo estaremos usando
en nuestro proyecto. Usar la aplicación create react está bien para un proyecto pequeño
como este contador. Sin embargo, te
advertiría que no lo uses para construir algo más grande ya que
ya no se mantiene.
7. Bootstrap: Bootstrap. Bootstrap es uno de los frameworks CSS más populares para desarrollar sitios web
receptivos. Es de uso gratuito de
código abierto y es especialmente bueno en la construcción de
primeras páginas web móviles reaccionan. Bootstrap se basa en
HTML, CSS y Javascript. Y en realidad proporciona un conjunto de componentes,
plantillas
y estilos de
pre diseño que permiten a
los desarrolladores construir
e iterar rápidamente También está diseñado para
funcionar en todos los navegadores, lo cual es ideal para
garantizar que tu aplicación muestre correctamente
para todas las audiencias. usaremos
React Bootstrap para Hoy usaremos
React Bootstrap para
acelerar nuestro
proceso de desarrollo.
8. Configuración de React: Bien, entonces ahora que
entendemos un
poco más sobre reaccionar,
sigamos adelante y
construyamos nuestro propio contador. Como mencioné, esto es
algo muy importante para entender cómo construir, ya que es una de esas cosas
que te van a preguntar en algunas entrevistas de trabajo
y si decides
ir a seguir la carrera
de desarrollador front-end. Así que vamos a saltar a ella.
Entonces aquí mismo puedes ver cómo podría verse el
mostrador terminado. No hay
muchos estilos y diseños, pero es bastante simple. Pero en términos de la
lógica, es funcional. Lo que ellos estarían buscando que hagas es crear
algo que muestre un número y luego te
permita agregarlo. Entonces puedes sumar uno o
podrías restarle uno de él. Bastante simple, pero vamos a entrar en cómo podemos construir esto
en realidad. Si saltamos al código de
Visual Studio, lo primero que
vamos a querer hacer es crear una app de reacción. Como mencioné antes,
podemos usar create react app para este proyecto
ya que es tan pequeño. Pero en el futuro
hablaremos sobre uso de soluciones como. A continuación, vamos a seguir
adelante e iniciar nuestra aplicación Create React, PX
createapp Y entonces vamos
a llamarlo Contador. Eso va a tomar un par
de minutos para empezar. Volvamos a meternos en él una vez
que haya terminado de construir. Ahora que nuestra app create react finalmente
ha construido la carpeta,
sigamos adelante y
comencemos a trabajar con ella. Voy a cambiar directorio
a la carpeta. Y ahí vamos, lo
tenemos abierto. Bien, así que sigamos
adelante y
abramos esto y veamos con qué tipo de archivos y carpetas
estamos trabajando. Entonces, en el lado izquierdo aquí, verás que
tenemos un montón de carpetas
diferentes que básicamente se
han creado para nosotros como resultado del
uso de la aplicación Create React. Como mencioné antes, React es una biblioteca y
no un framework. Por lo que sí requiere que varias
otras herramientas de construcción se instalen con él
para que funcione correctamente. Entonces, si echamos un
vistazo a la Read me, esto nos dirá un poco más sobre cómo
trabajar con create, react app, qué
cosas podemos hacer, qué comandos podemos ejecutar. Si alguna vez has trabajado con
NPM o notas en el pasado, deberías estar familiarizado con
algunos de estos comandos Si no es así, brevemente
deberías estar familiarizado con si alguna vez has trabajado con Node o
NPM en el pasado, deberías estar familiarizado con
algunos de estos comandos Vamos a recorrer
los que crean ofertas de aplicaciones de
reacción para nosotros. Entonces tenemos NPM Start que ejecutará la aplicación
en modo de desarrollo en host
local 3,000 Host local 3,000 es la ubicación de
elección para ejecutar la aplicación Esto solo se
basa en una configuración que fue establecida por el equipo
create react. Entonces tienes otro
comando llamado prueba NPM. Esto te permite
realizar pruebas en tu app de reacción, y echaremos un vistazo a
esas pruebas en un segundo. También tenemos una factura de producción que creará una construcción optimizada para
la producción. Tenemos eyect, que
personalmente no he usado demasiado, y luego solo tenemos un poco más
sobre qué es reaccionar, cómo se construyó,
cómo usarlo correctamente,
cosas así Por lo que les animo a
leer a través de esto. Léeme si no lo has
leído antes que tenga un poco de información ahí
que podría ser útil. Sin embargo, como mencioné, create react app actualmente no
se mantiene
en el futuro. Por lo que puede o no ser información
actualizada para el
momento en que veas este video. Bien, así que ahora echemos
un vistazo al paquete Json. Así que de nuevo, si has trabajado
con NPM antes o Jason, podrías estar familiarizado, al menos, con el formato y
entender que este es especie de uno de esos archivos
necesarios cuando estás construyendo
un proyecto Así que el archivo package dot Json contiene varios elementos
diferentes que nos ayudarán a identificar nuestro proyecto y entender con
qué versiones estamos trabajando de las diferentes dependencias que
hemos instalado Entonces en la parte superior tenemos el
nombre de nuestro mostrador de paquetes. Siempre podemos cambiar
esto, si no nos gusta, tenemos
nuestra propia versión, así que solo nuestra primera versión
sea o no privada. Y luego
las dependencias que
tenemos que ya están instaladas Entonces tenemos la biblioteca de pruebas, tenemos reaccionar, reaccionar, etcétera Ahora tenemos nuestros guiones.
Los guiones que acabábamos de repasar
en el archivo léeme. Um, así que básicamente lo
que han hecho aquí es crear un guión
que es NPM start. Pero lo que NPM start realmente
ejecuta es reaccionar scripts start. Entonces es un poco acortamiento de
un comando más largo solo para nuestra
comodidad como desarrolladores Entonces tenemos algunas configuraciones de
enlace ES. Es link viene preinstalado
con la app create react. Tenemos una lista de los navegadores con los que queremos trabajar en producción y también en desarrollo. Eso es
más o menos. El paquete Jason no es muy elaborado en
create react app. Hay algunas cosas clave con las
que tenemos que trabajar. Pero crecerá dependiendo del tamaño de tu proyecto en el que
estés trabajando. Y a medida que instalamos cosas nuevas. Hablando de instalar
cosas nuevas mientras estamos aquí, sigamos adelante e
instalemos, reaccionemos, Bootstrap, y veamos
cómo actualiza nuestros paquetes. Volviendo a
la terminal aquí, vamos a escribir en NPM install. Y vamos a
instalar dos paquetes. Uno es react bootstrap, y el otro es
solo bootstrap en sí. Estos dos paquetes juntos nos
permitirán trabajar con la funcionalidad completa de Bootstrap que está disponible
para nosotros en react. Simplemente nos sentaremos aquí y
esperaremos a que se instale eso. Creo que hay una
línea más de código que necesitamos, Así que déjame seguir adelante y agarrar eso de Bootstraps
Documentation. Si vamos a Bootstrap React
y hacemos clic en Getting Started, también
queremos importar, sí, mira aquí abajo donde
dice hojas de estilo y CSS. Queremos importar esto
en uno de nuestros archivos. A medida que bajemos,
voy a copiar esto. Y luego cuando lleguemos a ese archivo me
aseguraré de importarlo. Bien, volviendo
a nuestro paquete A Jason. Verás aquí que dos
cosas han cambiado. Así que hemos instalado en
nuestro bajo dependencias, tenemos bootstrap, que
ha sido instalado Y reaccionar bootstrap. Entonces esos son los dos que
acabamos de pedir que se instalen. Nosotros acabamos de, ya sabes, hacer
la solicitud en NPM y nos
han instalado
para ello correctamente Como puedes ver en
la parte inferior aquí, también
hay varias
vulnerabilidades. Esto se debe a que, nuevamente, el proyecto no
se mantiene. Pero como mencioné, es una de las formas más fáciles si solo estás tratando de empezar a
reaccionar y aprender a usarlo. La aplicación Create React es
realmente una especie de forma
sencilla de
aprender a usar react. Hay una muy, yo
diría que hay una
curva de aprendizaje más baja a algunas de las otras opciones que actualmente
están disponibles. Bien, así que sigamos adelante y echaremos un vistazo a
los otros archivos aquí. Entonces tenemos un Git ignore. Entonces, si antes trabajaste
con Git, sabrás que Git es
un sistema de control de versiones que te permite guardar
tus archivos y guardar diferentes versiones de tus
archivos en caso de que alguna vez necesites revertir o volver a una versión anterior de un
archivo con el que estás trabajando Pero en nuestro Git ignore, veremos todos los
archivos en las carpetas que básicamente
tenemos predefinidos para no comprometernos cuando estamos empujando nuestro código
potencialmente Github, así que nuestra carpeta de módulos de nodo aquí. Y eso es porque los módulos de nodo es una carpeta muy grande que incluye una gran cantidad de datos de varias dependencias
que si fuéramos a empujar, si fuéramos a agregar a nuestro Github algo así como
masificarlo y hincharlo Así que en realidad no
queremos empujar eso. Eso es algo que se
puede instalar en
base al paquete
en las versiones de Jason cada vez que volvemos a
clonar nuestro archivo o
alguien más clona nuestro trabajo. También tenemos algunas
otras piezas incluyendo la cobertura en las carpetas de
compilación y algunos
archivos misceláneos también. Bien, vamos a
meternos en las cosas buenas. Entonces tenemos dos carpetas aquí, tenemos público y
tenemos fuente. Entonces público es donde todo
nuestro tipo de imágenes similares y cosas que actualmente
se muestran en nuestra aplicación, nuestra vida en este momento. Así como nuestro archivo HTML de
punto índice. Y luego tenemos nuestra fuente, esa que también contiene un montón de otros archivos. Entonces, vamos a sumergirnos en estos dos. Y lo que podemos hacer para
realmente tener una buena idea de cómo
funcionan estos dos es iniciando nuestra aplicación. Así que recuerda que mencioné en
el paquete dotson foul, había un guión
llamado NPM Start. Sigamos adelante y ejecutemos eso en la terminal y veamos
qué trae a colación. Entonces escribiremos NPM Start. Le pegaremos a Enter y nos
daremos un segundo. Inicie el servidor de desarrollo. Y bien, bien,
estamos bien para irnos. Tenemos este ícono de reacción
giratorio. Y luego dice Edit Source
Apps y seguro de cargar. Y luego aprende React que
enlaza con la documentación de S. Impresionante. Entonces al menos sabemos
que nuestra app está funcionando. Así que volvamos a nuestros archivos y ahora veamos dónde están viviendo todas
estas cosas. Y lo que vamos
a hacer, vamos a dejar
abierta esta ventana de terminal solo para que nuestra app siga funcionando en segundo plano. Entonces, si vamos a nuestra carpeta
pública, normalmente en HTML, toda nuestra información se
almacena en el archivo HTML. Entonces, cuando abrimos esto, este
era un proyecto HTML normal, esperaríamos encontrar
toda esa información, todas esas cosas que acabamos de
ver ahí en este archivo. Sin embargo, cuando miramos
aquí, no está ahí. Tenemos nuestro
elemento cabeza aquí y muchos meta datos aquí. Cosas
que podemos cambiar. Podemos cambiar el nombre
y el contenido aquí. Sin embargo, si nos desplazamos hacia
abajo hasta el cuerpo, notarás que toda esa información que
acabamos
de tener en nuestro
navegador no está disponible. Verás que en el cuerpo solo
hay dos elementos. El no script, que
le dice a las personas que no tienen Java Script habilitado que lo necesitan
para ejecutar esto. Y luego hay un
div singular que está vacío, lo cual es realmente interesante. ¿De dónde viene
realmente nuestro proyecto? Entonces si tenemos un div
que está completamente vacío, realmente no tiene sentido porque si
volvemos a la página, vemos que tenemos toda
esta información. Quiero decir que tenemos texto y tenemos un icono giratorio y
tenemos un enlace. Obviamente, esto tiene que
ser vivir en alguna parte. Bien, bueno, si
volvemos a nuestro div, vamos a echarle un vistazo de cerca. Vemos que tiene
el ID de root. Entonces eso significa que tal vez
en algún lugar del camino que esté apuntado y esa
raíz signifique algo, ¿verdad? Entonces, si viste
el video anterior que tengo sobre el script Java, lo
entenderás. Probablemente lo
recordarás. Probablemente recordarás que hay un método
llamado get element by ID. Así que saltemos a nuestro archivo JS de punto índice a la izquierda aquí.
Y échale un vistazo a eso. Entonces, al buscar en nuestro archivo JS de punto
índice, tenemos un
montón de importaciones. Entonces ahora estamos en el mundo
Javascript, ¿verdad? Hemos hecho una especie de transición de
HTML a completamente Javascript. Y cuando vemos, pero no es del todo Javascript ya
que estamos como acostumbrados a ello, quiero decir, ya ves
que tenemos este tipo de elementos
como div
como estructuras. Así que vamos bajemos línea por línea y veamos
qué es todo. Así que hemos importado
react de React. Nuevamente, trabajando con NPM. Instalamos ese
paquete llamado React, esa biblioteca llamada React, y ahora hemos importado la
instancia de react de él. Tenemos import react, import index CSS, que
es solo el archivo CSS. Import app, que es
otro archivo aquí abajo. Y luego importar
reportar web vitals. Donde
realmente quiero empezar a prestar atención es en la línea
siete aquí donde dice raíz constante es igual a
reaccionar dom punto crear ruta. Entonces dentro de esta ruta de creación, dice documento punto get
elemento por ruta ID. Obviamente, algo está pasando aquí donde estamos obteniendo
ese elemento raíz, estamos obteniendo ese
div y ahora estamos creando algún tipo de ruta
basada en ese elemento. Así que hemos hecho esto aquí, hemos creado una
ruta en la reacción, y hemos creado esta ruta
variable, ¿verdad? Entonces decimos render root. Y dentro de eso ahora estamos
renderizando reaccionamos en modo estricto. Y luego dentro de eso estamos
renderizando esta aplicación,
esta cosa de la aplicación. Ahora, en base a lo que
leímos antes, la aplicación era solo un archivo Javascript. Pero ambos están en estas raras estructuras
tipo elemento, ¿verdad? Entonces eso es lo de JSX de lo
que estábamos hablando. Este Javascript tipo de
puré con HTML, lo que nos permite escribir
HTML dentro de Javascript. Así que sigamos adelante
y nos sumergimos en las aplicaciones. Las aplicaciones parecen un archivo Javascript bastante
normal, pero sí tiene esa
combinación JS HTML y Javascript. Ahora como puedes ver, es solo una
función regular llamada app, y devuelve
este elemento HTML. De verdad es un maestro
brillante ahí. Lo que esto es,
en realidad es un componente. Esas cosas de las que estuvimos
hablando antes. Componentes que tienen
su propia pantalla y su lógica y todo lo contenido app aquí mismo
para nosotros es ese componente. Ahora bien, si pasamos
línea por línea, veremos que importa
un logo de logo dog, pero ese logo de punto logo,
punto Sg, que está en la
misma carpeta fuente. Importa aplicaciones, que
es ese archivo de estilo. Y luego crea esta
función llamada app, y luego en la
parte inferior, la exporta. Y luego en ese archivo
JS índice, lo importa. ¿Correcto? En apps, devolvemos un div con un montón de elementos
en él, dentro de él. Entonces tiene un div con un classameppadermagelogoitcedemagelogoI'm Pensando que ese es
ese logo de React del que estábamos
hablando antes. Y luego tenemos esa
línea de código que vimos. Tenemos esa línea
de texto, vimos. Lo dice, fuente slash app
dogs y guardar para recargar. Y luego en la parte inferior
aquí, dice Aprende, reacciona. Ahora bien, si volvemos por aquí, esto es exactamente lo que tenemos. Tenemos nuestro logo, tenemos editar, aplicaciones de
origen para sentarse y guardar para recargar. Y hemos
aprendido, reaccionamos. Entonces finalmente encontramos el lugar donde
ha estado viviendo toda esta información, ¿verdad? Entonces la comprensión reacciona
un poco más. Y entendiendo la estructura, tenemos este archivo JS de punto
índice más grande, que en realidad contiene toda
nuestra información, ¿verdad? Básicamente es donde
todo tipo de pilas en. Pero luego dentro del índice, tenemos aplicaciones de aplicaciones, que es donde realmente vive
la información, la lógica que
en realidad vamos a mostrar. Y ahora, antes de
olvidar quiénes como estamos en perros índice para que
nuestro bootstrap react se ejecute, si recuerdas, tenemos que
asegurarnos de que en la parte superior del archivo
importemos el bootstrap. Fresco. Deberíamos estar
bien para irnos ya. Bien, así
que ahora que
entendemos un poco mejor la estructura de
nuestra aplicación,
sigamos adelante y
trabajemos con aplicaciones, y comencemos
a construir nuestros componentes.
9. Crea un mostrador: Este es un estilo antiguo de
componente que vamos
a transformar en lo que
llamamos un componente de
función de flecha. Los componentes de la función de flecha son solo una forma más limpia
sintácticamente escribir y construir Esto no es estrictamente
necesario, pero lo voy a hacer
porque es una buena práctica poder saber cómo hacer esto y
mostrarte cómo hacerlo. Si seguimos adelante, en realidad vamos
a cambiar esto. Entonces dice constante app
es igual a igual flecha, y luego sólo
vamos a golpear a Safe. Bien, Y
acabamos de
transformarlo en un componente de
función de flecha. Impresionante. Ya somos un
poco más modernos entonces cuando
miramos nuestra aplicación aquí. Cuando miramos las aplicaciones de origen, realmente no necesitamos mucho
de esto ni nada de eso. Para ser honestos, lo que
vamos a estar construyendo, el contador es realmente solo una página singular
con algunos elementos. Podemos deshacernos de la mayor parte de esto. Creo que una cosa que
podemos hacer aquí mismo es simplemente aclarar todo lo
que hay en la aplicación aquí mismo. Mantendremos el di general, para la aplicación, pero aclararemos todo lo que no estamos
usando y lo guardaremos. Bien, y así ahora
tenemos nuestra app vacía, y si ves solo
tenemos una página en blanco llano, que es exactamente como
queremos empezar. Si estuvieras iniciando un nuevo proyecto
create react app, estos son los pasos que te
recomendaría que tomaras, ¿verdad? Obtienes tu proyecto,
lo limpias,
instalas los
paquetes que necesitas, y luego sigues adelante y
comienzas a trabajar con él. Bien, así que en el
futuro ahora hay algunas otras mejores
prácticas que
queremos emplear cuando
trabajamos con React. Entonces lo primero es lo primero, dentro de nuestra carpeta fuente, vamos a crear otra
carpeta llamada Componentes. Ahora la razón por la que hemos
creado este componente es porque especialmente cuando estás trabajando en proyectos más grandes, la cantidad de archivos más pequeños comenzaremos a
acumularse muy rápido. Y podría llegar a ser
muy poco manejable si simplemente
están todos sentados
en tu Y no es la mejor idea tenerlos todos en
todas partes. Se vuelve muy difícil
depurar y definir lo
que estás buscando. La mejor práctica es crear carpetas
separadas en función funciones en las
que
esté trabajando, en qué funcionalidad está trabajando, solo para mantener las cosas limpias y simples dentro de nuestra carpeta de
componentes. Ahora sigamos adelante y construyamos algunos de los otros componentes que vamos a necesitar. Si escribo, clic y
creo un nuevo archivo, sabemos que estamos
construyendo un contador. Entonces comencemos por
crear uno que diga contador contador Jsx enter Impresionante, Hemos creado
nuestro primer archivo JSX. Ahora lo siguiente
que vamos a querer
hacer es crear nuestro componente de
contador. Ahora hay dos
formas en las que puedes hacer esto. Hay una especie de formas de
autocompletar en las
que podemos hacer esto, o hay
formas manuales en las que podemos hacerlo Entonces si tienes instalada la
extensión, puedes escribir R, A FCE, que es S siete
fragmentos, el ES siete, y react snippets es la extensión que quieres instalar si
quieres trabajar con esto Y lo que esto va a hacer
es en realidad solo construir este componente para nosotros. Entonces vamos a darle a Enter para que podamos ver cómo
se ve. Entonces seguiremos adelante y lo
construiremos manualmente. Entonces, si golpeamos Enter,
verás que en realidad
hace todo el
trabajo pesado por nosotros. Importa, reacciona por nosotros. Crea un elemento
llamado contador. Devuelve un
elemento entre corchete con un Dave ya. Y dice contador y ya lo
exporta para nosotros. Esta es una manera realmente increíble
de hacer todo manualmente. Vamos a usar este para hacer todo sin tener
que escribirlo manualmente. Deshacerse de eso.
Si vamos a hacerlo nosotros mismos de nuevo, solo
impactamos de reaccionar. Y entonces seguiríamos adelante
y crearíamos un contador contador. Además, otra cosa sobre los componentes de
reacción es que la primera letra
del componente
siempre debe estar en mayúscula Eso es solo parte de la
sintaxis que se requiere. Contras contador es igual a
nuestra función, y luego vamos a devolver
un div que dice contador. Bien, y eso es
todo lo que tenemos ahora mismo. Y luego también vamos
a exportar contador por defecto. Bien, así que ahí
vamos. Estamos bien para irnos. Tenemos nuestro contador,
tenemos nuestro
componente de contador creado y, ya
sabes, está bien para ir, pero si revisamos nuestra página, no
va a
aparecer, ¿verdad? Porque nadie sabe que existe
el contador. Ahora mismo, el mostrador
solo vive en su propia carpeta de componentes, en su propio archivo pequeño, y no está haciendo nada. Entonces, para que otras
personas sepan que existe, ¿
necesitamos
importarlo a qué archivo? Nuestro archivo de aplicación, porque el archivo de la aplicación es un archivo que
se muestra actualmente. Así que volvamos a subir a app y luego vamos
a importar contador. Y
algo realmente genial es que
también podemos importar auto el código VS tiene algo de inteligencia en él y así si escribimos con el. El corchete de ángulo abierto y luego el nombre
del componente, en realidad nos pedirá que lo importemos desde
nuestro soporte de componentes. Entonces es muy
conveniente si tenemos que importar algunos
componentes diferentes o, ya
sabes, sin
tener que
importarlo y luego
traerlo al archivo. Es solo una
forma realmente
rápida e inteligente de trabajar con él. Y lo último que queremos
recordar ahora es que si nuestro mostrador o nuestro componente
no tiene hijos, queremos
cerrarlo de inmediato. Queremos que sea un elemento de cierre
automático, así que así, tops así. Perfecto. Entonces, pero ¿cómo es tener
hijos? Bien, como puedes ver ahora mismo, Counter es una app que
no tiene ningún hijo, pero si quisiéramos que fuera una
app que tomara niños, siempre
podríamos ponerla igual un elemento HTML normal y luego agregar los
hijos dentro de él. Derecha. Y
funcionaría igual. Así que esa es esta
combinación funky de script
Java e inacción HTML Impresionante, así que vamos a deshacernos
del segundo contador. En realidad no lo
necesitamos, y
comencemos a trabajar en nuestra aplicación desde
dentro de nuestros archivos de contador. Ya terminamos
con las aplicaciones por ahora. No necesitamos nuestro índice ML en este momento a menos que queramos cambiar algunos de los metadatos. Sólo nos vamos a
centrar en los contadores. Bien, entonces
tenemos nuestro mostrador. Tenemos un div, y todo
lo que dice es contador. Y si miramos en
nuestra página aquí mismo, veremos que
sí dice contador, así sabemos que la hemos enganchado
correctamente. Ahora bien, si volvemos a nuestra página, tenemos que pensar en cuáles fueron
los elementos que estaban en ese diseño inicial, ¿verdad? Teníamos ese número, teníamos un botón rojo
en un botón verde, o un plus y un menos, pero
no tienen que ser rojos y verdes. Así que queremos asegurarnos de que
construimos todos esos
elementos, ¿verdad? Bien, así que sigamos adelante
y empecemos a construir eso. Entonces dentro de este div
quiero crear, hagámoslo, hagámoslo
un H uno para el número. Así que vamos a empezar en
cero y solo guardar eso. Y luego debajo de eso
vamos a crear los dos botones. Y en lugar de hacerlo manualmente
o peinarlo manualmente, en realidad
podemos usar
React Bootstrap para estilizarlos un
poco más dinámicamente. Usaremos el botón
de React Bootstrap. Como puede ver, también
nos da la inteligencia y nos
pide que la importemos automáticamente.
Vamos a añadir ese botón. Podemos usar lo que se llama una variante React bootstrap nos
da una opción, una propiedad llamada variance. Con esas variantes,
en realidad podemos simplemente usar un nombre, como una propiedad que
ha sido predefinida, igual que los atributos en HTML, y darle algunos estilos
específicos Como resultado, hay dos variantes con las que vamos a
querer trabajar hoy. Uno se llama Éxito.
Vamos a cerrar eso. Y entonces este será
nuestro botón más uno. Y entonces el
otro va a ser, creo que es peligro, pero sí, vamos a tomar nuestro botón, copiarlo, pegarlo. Nos vamos, creo que
se llama peligro. Escribiremos ese segundo y cambiaremos esto a menos uno. Entonces echemos un
vistazo a nuestra página y veamos si funcionó muy bien. Estamos como el 90% del camino
ahí con el diseño ya. Entonces tenemos nuestro
botón verde, que es más uno, y nuestro botón rojo, que es menos uno.
Tan bueno para ir. Pero una cosa más que sí
quiero arreglar un poco es justo
donde se muestra esto. Porque ahora mismo está muy alto en la parte superior de la página. No es realmente ideal para
ver correctamente. Así que sí queremos simplemente
empujarlo hacia abajo en la
página solo para tat. Así que la forma en que vamos
a hacer esto de nuevo, es simplemente arreglando
nuestros estilos, ¿verdad Entonces, si vamos a nuestro elemento
contador aquí, en realidad
podemos
agregar algo de margen a la parte superior solo para darnos un
poco más de espacio. Así que podemos crear un archivo CSS para agregar
todos nuestros estilos, o podríamos usar CSS en línea Ahora, CSS inline es algo que básicamente
es lo que dice. Nos permite
escribir literalmente los estilos
en la misma línea. Nos permite
escribir literalmente los estilos en la misma línea que nuestro HTML, lo cual me parece bastante genial. posible que lo
hayas usado una o dos veces antes en tu HTML, pero es una
práctica mucho más común cuando estás trabajando con un React porque todo está mucho más compartimentado Entonces, si quisiéramos agregar nuestro
estilo aquí a nuestro Div, solo
escribimos estilo STYLE. Y entonces usaríamos
dos corchetes para usar la dinámica
ness del estilo inline. Entonces nos gustaría agregar algo de margen. Vamos a darle un margen
total de cuatro Ram. Y salvo eso, si
volvemos aquí, genial, tenemos un
poco más de raíz. Voy a añadir un
poco más de espaciado tal vez a la derecha de
nuestro botón verde aquí. Y así vamos a hacer, vamos a agregar esa misma propiedad de estilo
y vamos a hacer margen, derecho. De nuevo, otra
cosa realmente interesante de reaccionar, ¿no? En HTML teclearías
en margen, ¿verdad? Pero debido a que estamos
trabajando con Javascript, en realidad
queremos
usar el estuche camel. El, no habrá guiones cuando estemos escribiendo
nuestro CSS y Haremos margen, ¿verdad? Y luego volveremos a escribir en una cadena cuál debería ser nuestro
margen. Eso lo guardaré.
Perfecto. Bien, y ahí tenemos un
poco de espacio. Y luego solo agreguemos un
poco de espacio debajo del encabezado. Y deberíamos ser buenos. Entonces haremos lo mismo una vez más. Estilo, margen igual, fondo. Y luego pondremos dos rampas. Nosotros comprobamos ahí, creo que estamos bastante buenos para
ir con el estilo. Siempre podríamos hacer
mucho más con él, pero normalmente en una entrevista, no
te van a pedir demasiado más en
cuanto a estilizar más allá de este punto. Así que saltemos a la
lógica y empecemos a trabajar en hacer de esto
un contador funcional. Bien, así
que lo siguiente que vamos a querer hacer ahora que terminamos con
nuestros estilos básicos, es empezar a trabajar en
nuestra lógica real,
nuestra visualización de la lógica
y cosas así Entonces, si recuerdas,
tenemos este cero, ¿verdad? Y cuando pulsamos el
botón más y el botón menos, queremos que algo suceda. Ahora bien, si recordamos
de nuestro script Java, requerimos como una función
onclick o, ya
sabes, algo que se
pase en esa función
onclick para que algo
se ejecute realmente, Entonces, sigamos adelante y comencemos a implementar eso de manera reaccionante. Entonces como mencioné antes, reaccionar tiene esta cosa
llamada estado, ¿verdad? Entonces el estado es literalmente el estatus dado de
todo lo que está pasando. El estado dado de lo que está
sucediendo dentro de un componente. Entonces hay una manera de interactuar
realmente con el estado que usaremos
específicamente con react. El concepto de estado es un
poco abstracto al principio, pero se volverá mucho más
concreto a medida que trabajemos con él. Entonces lo primero que
quiero hacer, bien, en vez de que este
número sea cero, queremos ser un
poco más dinámicos, ¿verdad? Entonces voy a
crear una variable llamada count igual a cero. Entonces comencemos
reemplazando esto por contar, ¿
verdad? Agradable y sencillo. Nada demasiado loco hasta ahora. Y así si comprobamos aquí, el
conteo se ha mantenido cero. Bien, tick up. Pero ahora que hemos cambiado el conteo
para que sea una variable, ahora
podemos trabajar con él un poco más
dinámicamente, ¿verdad? Entonces como mencioné, queremos usar esta
cosa llamada estado. React también tiene esta cosa
llamada ganchos, ¿verdad? Los ganchos se introdujeron para reaccionar hace
unos años con el fin facilitar mucho el uso del estado dentro de
un elemento. Antes de esto, el estado realmente no se
podía usar en un elemento de la manera en
que lo estamos usando hoy. Entonces, lo que queremos
hacer para poder usar el estado es importar
realmente un gancho. Y lo que es un gancho es realmente
solo un componente simple. Eso es lo que es hook, es realmente solo otra función
que es algo extraída y solo estamos importando su funcionalidad para
poder trabajar con ella. Bien, así que vamos a importar el estado
usado de react. Genial, entonces ahora
hemos usado estado, vamos a modificar
la forma en que estamos trabajando con la
variable count, ¿verdad? Y sé que estás pensando
bien, ¿no podríamos simplemente llamar a una función y hacerlo al click
y etcétera, etcétera Hay una mejor manera de
hacerlo con la reacción cuando estamos usando state hay
la variable real en sí. Luego hay un conjunto, algo
llamado setter que nos
permite establecer el
valor de esa variable Ahora la forma en que
podemos inicializar esto es a través de un poco
de sintaxis específica Envolvemos nuestra variable
real entre corchetes, esa es nuestra variable inicializada y luego ponemos un
común junto a ella Y entonces la
convención típica de la forma
en que
escribimos esto es poner set delante del nombre
de la variable. Si nuestro nombre de variable es count, usaremos set count
para que ese sea nuestro setter Y entonces vamos a traer en estado de
uso cuando se trata del acto, el
número inicializado en sí mismo Escribiremos y usaremos state y envolveremos esto en esa llamada a la función. Entonces ahora ves que
nuestro recuento de conjuntos ha cambiado a una
función real en sí misma. Se utilizará para
ayudarnos a establecer el estado. Se engancha en ese gancho de estado U y nos permite habilitar
esa funcionalidad. Y entonces tenemos a nuestro
estado U trabajando y
haciendo su magia ahí. Entonces verás que el
recuento de conjuntos está subrayado todavía porque en realidad
aún no lo hemos usado. Pero lo usaremos
en sólo un segundo. Y si volvemos a revisar nuestra
página aquí, veremos que nada ha
cambiado hasta ahora porque el valor inicializado no
ha cambiado, ¿verdad? Hemos mantenido nuestro cero ahí y está funcionando
perfectamente bien. Ahora lo que queremos
hacer es usar este setter para que podamos actualizar el valor del
conteo dinámicamente, ¿verdad Cada vez que presionamos el botón más uno o el botón
menos uno, queremos que ese cero
aumente o disminuya. ¿Correcto? Entonces, la forma en que vamos a hacer esto es usando una función
onclick Va a ser
una función
onclick realmente simple y directa que nos
llevará 2
segundos implementarla Entonces, si vamos a nuestro botón, justo como sabemos, los botones
tienen funcionalidad click. Así que vamos a escribir en nuestro on click y debido a que
Javascript de nuevo, camel case es igual a
corchetes. Y entonces vamos a llamar
a nuestro Set count. Entonces vamos a usar nuestros paréntesis y
llamaremos set count Y vamos a pasar
entre paréntesis de set count el valor que
queremos que sea ahora, porque tenemos la variable
inicial de count Lo que cuenta el valor
es el estado, ¿verdad? Entonces contar es ese pedazo de
estado, cualquiera que sea su valor, ya sea un uno o 100 o 10,000 que es el estado
actual. Así que en realidad podemos usar eso en nuestra
función de adición aquí. Entonces vamos a tomar
el valor de contar, sea lo que sea en su momento, y sólo vamos
a agregarle uno. Así que realmente sencillo. Sólo vamos a escribir
dentro del recuento de conjuntos, vamos a tomar conteo
y luego más uno y guardar. Y esa es toda nuestra
función la que nos va a permitir sumar
una a nuestra cuenta. Entonces, si lo probamos
y vamos y pegamos más uno, podemos ver
que está funcionando. Entonces solo podemos agregar, agregar, agregar, y
todo lo nuestro está configurado. Realmente construir un mostrador no
es tan difícil. Simplemente se
trata más de entender la lógica y las herramientas
y los pasos detrás de ella. Si volvemos aquí,
en realidad podemos simplemente copiar esto, moverlo a nuestro segundo botón y cambiar el conteo
para restar uno Todavía nos estamos refiriendo a
esa misma variable de conteo, pero cuando alguien
hace clic en el menos uno, queremos que reste una ¿Correcto? Así que realmente
sencillo. Si vamos por aquí, restamos,
restamos ese botón ahora
está funcionando y tenemos todo nuestro
contador configurado, agradable y fácil. Fresco. Esta es realmente una especie
de forma de primer nivel de configurar el mostrador. ¿Correcto? Tu entrevistador podría pedirte que instales el
contador de esta manera Inicialmente esta podría
ser una versión uno. Pero si alguna vez has hecho una
entrevista tecnológica o si aún no lo has hecho, a veces lo que
los entrevistadores te piden que hagas es después de que hagas la
versión una de algo, te pedirán que iteres sobre ella y crees
una segunda Así que vamos a entrar en una posible
iteración de este elemento. Entonces hablaremos sobre
hijos de elementos, cómo pasa apoyos, cómo pasa
el estado,
y cosas así Así que vamos a subirnos a la
siguiente versión, dos.
10. Refinar la encimera: Bien, así que ahora que tenemos nuestra versión
uno completamente establecida, vamos a construir esta versión dos. Entonces, en la versión dos, lo que podría preguntarte tu
entrevistador, lo que alguien podría
pedirte que hagas en una segunda versión de esto es separar esto en
diferentes componentes Porque una de las
cosas
bonitas de reaccionar es que te
permite ser realmente modular con las cosas con las
que estás trabajando. Y no es necesario
tener todo tipo de anidado en un archivo HTML súper
largo, ¿verdad De hecho, puedes
descomponer las cosas en componentes más pequeños. Como vimos con pasar el
contador a la aplicación, en realidad
podemos acceder a las cosas como si
todas estuvieran en un archivo grande, pero manteniéndolas
separadas y limpias. Entonces, vamos a analizar un poco más sobre
cómo podríamos hacer esto. Una cosa que realmente podríamos romper es la sección de
botones, ¿verdad? El disparador real
del componente. Si quisiéramos seguir adelante
y crear un nuevo archivo aquí, podríamos llamarlo
botones y presionar Enter. Y si fuera a hacerlo. Entonces lo que
quiero hacer con botón ahora es simplemente abstraer esa lógica en su propio componente y
solo tener que vivir ahí. Entonces lo que vamos
a hacer aquí es que estamos, vamos a crear nuestro componente de
botón primero que nada, luego vamos a tomar
la información del botón de contadores y simplemente
copiarla en el. Y sólo vamos a copiar uno y te voy a mostrar
por qué en un segundo. Lo pegaremos aquí. Tenemos que volver a importar
esto por aquí. Y esto es solo volver a
importar el botón de Maria Bootstrap para
asegurarse de que todavía funciona. Entonces ya se
declaró lo siguiente, botón igual a botón . Tenemos que
cambiar el nombre. Vamos a llamar a esto,
vamos a llamar a este botón
personalizado. Cambiará a botón personalizado. Sí, así que esa es otra cosa importante con la
que probablemente te hayas encontrado en el script de trabajo antes de
asegurarte de que tus
variables sean únicas. Muy bien, genial. Notarás que estamos recibiendo un error con el recuento
establecido aquí. Trabajaremos en eso
en tan solo 1 segundo. Acomódese por ahora para que no nos dé un error de compilación. Bien, genial. Bueno para ir. Entonces, lo que
ahora queremos hacer con nuestro botón personalizado es que
básicamente queremos crearlo de una
manera que sea un poco más modular, ¿verdad? Entonces puede ser un botón de éxito o un
botón de peligro. Podría estar a la izquierda o
puede estar a la derecha. Podría ser un plus o un menos. Entonces queremos
implementarlo de una manera que no
tengamos que usarlo solo
para el caso de uso de un botón. Queremos implementarlo de
una manera que si tuviéramos un botón más y un menos y un botón de
multiplicación y tú todas estas
otras opciones, podríamos hacerlo
con nuestro botón Entonces la forma en que
vamos a hacer esto es pasándole apoyos
o propiedades, ¿verdad Entonces estas son cosas que
vamos a pasar
del componente padre
de Counter
al componente button
que ayudarán a identificar lo que este
botón específico está destinado a hacer. Entonces déjame mostrarte cómo
vamos a hacer eso. Entonces lo primero que
vamos a hacer es pasar en estas propiedades. Entonces, hay dos formas de
agarrar los accesorios, ¿verdad? Entonces podríamos,
básicamente podríamos pasar apoyos como, no sé, la variante y el número
o lo que sea, ¿verdad Sí, así podemos
pasar los apoyos
así y luego agarrarlos, ya sabes, a través de nuestros apoyos Derecha. Esta es una
forma válida de pasarlos, pero implica mucha sintaxis
adicional que hará que un código parezca
un poco
de dinero. Lo que queremos hacer en su lugar es realidad envolver estos
en un corchete, y luego simplemente podemos acceder a
estas variables directamente. Entonces solo puedo ir constante, no
necesito inicializar ahora una variante, una variable variante De hecho, puedo acceder a
variante directamente en el código. Entonces, en vez de pasar
el éxito aquí, ahora
voy a pasar
la palabra variante, la variable, ¿verdad? Y así vamos a
enganchar todo esto. Para que veas de lo que
estoy hablando si pasamos la
variante variable aquí y
volvemos a contador y
comentamos estos dos hacia fuera para que podamos ver que
ya no está funcionando. Bien, realmente vamos
a importar, vamos a sacar
esta importación aquí y vamos a
importar nuestro botón, nuestro botón personalizado
del componente local. Botón de importación no
desde Maria Bootstrap, sino desde el botón de barra diagonal Así que importar botón personalizado de. Bien, y entonces
vamos a usarlo. Aquí vamos a pasar es
crear un botón personalizado. En este momento solo es un botón azul
aleatorio. Incluso puedo comentar esto. Entonces comentaremos todo excepto la variante para asegurarnos de
que estamos
haciendo una buena prueba. Es un número de botón aleatorio,
no hay nada ahí dentro. Lo que entonces podemos hacer ahora es realidad pasar en nuestras propiedades. Vamos a ir variante igual
y vamos a escribir en el éxito porque nuestro primero fue el éxito, nuestro
segundo fue el peligro. Ahora el botón variante es verde. Sabemos que al pasar en nuestra propiedad de contador
a botón personalizado en a. propiedad en la
propiedad de variante y luego llamarlo
traerlo y luego acceder a él en botón personalizado y
usarlo como variante, simplemente lo canaliza directamente. ¿Verdad? Solo estamos
perforando el apuntalamiento de mostrador a botón. Entonces podemos hacer esto, así podemos hacerlo con cualquier propiedad con que queramos
trabajar, ¿verdad? Entonces, si quisiéramos entonces hacer
lo mismo con estilo, bien, Si tuviéramos peticiones de
estilo específicas nos gustaría que. Nosotros hacemos margen, ¿verdad? Un Ram, ¿verdad? Y si volvemos a
botón ahora en lugar de número, vamos a importar estilo. Podemos hacer estilo igual a estilo. En realidad no
necesitamos el doble, solo
necesitamos un estilo, ¿verdad? Y otra vez, realmente no podemos decir, pero se puede ver un
poco descentrada. Vamos a tener ese margen, ¿verdad? Bien, así que esta es una manera muy rápida en la que podríamos empezar a usar propiedades de una manera realmente
dinámica, ¿verdad? Para que si creamos
un segundo botón, ahora ya tenemos dos
botones para trabajar. Y no tuvimos que hacer
mucho trabajo, ¿verdad? No tuvimos que seguir adelante y escribir la variante
y escribir el estilo. Y esto y aquello,
solo teníamos que escribir en un, solo
teníamos que actualizar un par
de campos sencillos, ¿verdad? Entonces esta vamos a
cambiar la variante a peligro, y vamos a quitar
el elemento style aquí. Ahora deberíamos tener un botón
verde y otro rojo. Perfecto. Va muy bien. Ahora el otro par de
cosas que queremos incluir son el más
uno y el menos uno, así
como la función onclick Correcto, Lo que queremos hacer para que
esto funcione
correctamente es de dos cosas. Queremos pasar cualquiera que
sea el número que sea
dentro del botón personalizado, y luego también queremos
pasar en la propia función. Entonces, si realmente cambiamos esto de a no ser un elemento de
cierre automático y nosotros, como ya hablamos antes, vamos a tener que sea solo un elemento
regular que
lleva a los niños. Pondremos más uno
en el primero. Y si vamos ahora a Button, queremos acceder a
algo que se llama Niños. Hay una
propiedad especial llamada niños. Sí, hay una
propiedad especial llamada Children que nos
permite acceder a
cualquier cosa que esté anidada dentro de un elemento react Lo que vamos a
hacer aquí es que dentro nuestro botón accederemos en lugar de donde
acabamos de tener el más uno, en realidad vamos
a cambiar eso por decir niños. Y guárdala. Entonces si miramos aquí,
react ha descubierto que
debido a que el más uno era hijo de nuestro botón
personalizado aquí, queríamos ser hijos
del botón personalizado allí también. Ahora que hemos
indicado que queremos usar un niño
ahí, los niños, todos los niños ahora vivirán dentro del
elemento de botón personalizado. Eso tiene sentido. Entonces acabamos de tomar
el más uno aquí, llevándolo al botón de aquí, pasarlo como niños, que es un utilete especial. Y luego lo pasamos
a nuestra propia página. Hagámoslo una vez más, pero con nuestro menos uno. Entonces vamos a
cambiar esto aquí, convertirlo en un elemento no
autocerrable , solo
un elemento regular. Y vamos a hacer menos uno. Vamos a guardar eso entonces no cambies
nada ahí, solo vuelve a nuestra página y
ahí está. Está funcionando. Así que sólo estamos pasando en
niños como lo haríamos con HTML pero con nuestros botones. Bien, lo último que
necesitamos agregar es nuestra funcionalidad
on click, ¿verdad? Este es un poco más, este es un
poco diferente. Lo que vamos a hacer
aquí son dos cosas. Podemos escribir el on
click tal como lo teníamos antes y pasar
en nuestro set count, count equals count plus one. Y entonces eso funcionaría
una vez que agreguemos nuestro click. Entonces una vez añadimos nuestro on click
aquí y damos click en click. Entonces pase lo que pase en el
click y saquen
eso, eso funciona, ahí vamos. Estamos agregando uno
cada vez. Entonces esa es una manera de hacerlo. Otra forma en que podemos hacerlo es abstraer
completamente la
lógica en el componente. Lo que podría ser beneficioso aquí es crear una función
llamada add one. Vamos a añadir uno igual a conjunto
recuento para ser cuenta más uno. Bien, así que
acabamos de abstraer esa lógica en la
parte superior del mostrador Bien, así que ahora que hemos creado esta función add one, solo
podemos escribirla aquí. Sólo podemos escribir agregar uno. Entonces nuestro clic en
realidad solo agregará. Uy. Entonces nuestro clic en realidad
solo agregará uno cuando lo necesitemos. Impresionante. Lo siguiente que
podemos hacer aquí es abstraer este restar uno así que queda un poco más limpio en nuestro código
real en la parte inferior Entonces restaremos uno, haremos set count menos uno Eso lo guardaremos. Y
luego tomaremos esto, restaremos uno y lo pasaremos como un on click en nuestra función aquí Si lo hemos hecho, y si lo
hemos hecho todo
correctamente, debería funcionar. Entonces echemos un vistazo.
Restar uno. Impresionante. Está funcionando tal como
esperábamos que pudiéramos conseguir. Para que podamos deshacernos de este texto
extra aquí. Guarde eso. Y ahora hemos agregado otra capa a nuestros
componentes, ¿verdad? Entonces lo que hemos hecho es que hemos
pasado en estas variantes, hemos pasado en los estilos, y hemos pasado en estos
en clics al botón. El botón ahora
llama dinámicamente al niño. El botón ahora
llama dinámicamente a la variante el estilo y el
clic según sea necesario. Y pasa en el niño
correcto en base lo que hemos
pasado. Es bastante genial. Entonces esta es una forma de trabajar con propiedades de un componente
padre, por lo que el componente contador
a un componente hijo, que es el componente de botón. Entonces esa es solo una forma
de trabajar con ella. Entonces vamos a
practicar una última vez, pero lo vamos a hacer
con el componente count. Entonces esto es bastante
simple en realidad. Un poco más simple que
el botón en sí. Vamos a crear un nuevo
archivo y llamarlo cuenta. Y vamos a
hacer lo mismo y crear un componente de conteo. Lo que vamos a usar,
este componente de conteo es justo para lo que estamos
usando el h one. Vamos a importar el conteo
y vamos a pasar, en lugar de usarlo como un niño, realidad
vamos a
simplemente pasarlo en realidad
vamos a
simplemente pasarlo como una propiedad. Vamos a pasar en conteo. Y luego vamos
a abstraer todo este estilo de nuestro
componente aquí mismo. Entonces, deshagámonos de
eso. Y vamos a ahorrar. Y si volvemos a los recuentos, ahora
queremos acceder a todas
esas propiedades, ¿verdad? Así que haciendo lo mismo
que hicimos en botón, vamos a usar nuestros
corchetes aquí y
vamos a acceder al
valor de count. Vamos a salvar eso. Y si recuerdas, claramente, en realidad
teníamos un H
uno en lugar de un div aquí para nuestra visualización real
del recuento en sí. Y
lo genial de JSX es que realmente no
importa cuál sea
el componente externo Podría ser un botón, podría ser, realmente
no importa. Podría ser algo
llamado fragmento incluso, que es donde
en realidad solo tienes estos corchetes vacíos que
no tienen ningún valor para ellos. Lo que vamos a hacer
en realidad es usar ese H uno en su lugar. Así que vamos a escribir
uno H, vamos a guardarlo, y luego sólo vamos a
acceder al valor del conteo. Y si recuerdas, también
teníamos un poco de
siling pasando, así que solo lo vamos
a copiar, solo
vamos a
pegarlo de nuevo aquí Y ahora si lo hemos hecho
todo correctamente, debería verse exactamente
igual, ¿verdad? Tenemos nuestra cuenta y está
funcionando tal como se esperaba. Nuevamente, esto fue realmente
sencillo en términos de simplemente pasar del conteo. Pasamos el valor de count al componente llamado count, accedemos al valor de
count y mostrándolo. Entonces, ojalá, esto te
ayude a
entender un poco el flujo
de cómo funciona JS, cómo funciona reaccionar, cómo se pasan los
apoyos, cómo funciona la
relación padre e hijo Y nuevamente, la razón para hacer esto es solo para hacer las cosas
un poco más limpias. Algo que incluso podríamos hacer en el componente de botón para
limpiarlo un poco es mostrar la variante
dinámicamente, ¿verdad? En lugar de escribir
explícitamente la variante aquí
en el archivo contador, que como que simplemente
ocupa mucho espacio y es algo adicional
para que recordemos cambiar cada vez
que tenemos que cambiar algo. Sería genial si
todos nuestros estilos vivieran en los componentes
del botón. A ver si
podemos hacer eso aquí. Lo que vamos a hacer en realidad
es entrar en nuestro componente de botón y en lugar de acceder a
esta variante variable, lo que vamos a hacer es
basarlo en lo que es el hijo. Entonces aquí vamos a hacer
esta pregunta. Entonces, si los niños E
es igual a más uno, entonces este es nuestro
componente publicitario, ¿verdad? Y si recuerdas, nuestro
componente publicitario va a estar
del lado izquierdo y
va a ser verde. Queremos que nuestra variante sea, vamos a pedir y
vamos a querer que nuestra variante sea el éxito. Y si recuerdas,
esto es usar algo llamado operadores
ternarios, que repasamos en
Javascript, ¿verdad Entonces estamos haciendo
una pregunta a la condición aquí. Así que evalúa esta expresión. Si es cierto, da como resultado
este primer argumento aquí. Si es falso, sin embargo,
resulta en el segundo, que en nuestro caso es peligro. Y así, si lo hemos hecho
correctamente, para que
ya no se utilice esa variante, simplemente
debería seguir mostrando los colores correctos
de los botones. Entonces si miramos aquí, sí, sigue
siendo colores, mismos colores, y está funcionando
tal como se esperaba Impresionante. Entonces otra vez,
lo que hicimos aquí, bien, solo usamos
un operador ternario Tomamos el valor de los niños, que o va a
ser más uno o menos uno. Y nosotros hicimos la pregunta, así que si el niño es más uno, si eso es cierto,
queremos que muestre el color del éxito,
la variante del éxito. Si es falso,
queremos que muestre
el rumbo de peligro,
que ya sabes es rojo. Y como hicimos esto, ya no
necesitamos que se taladre esta
variante de utilería. Lo que en realidad nos permite limpiar nuestro código
solo un poco. Aquí mismo, tiene sentido. Vamos a usar
esto una vez más sólo para hacernos la idea de ello. Entonces otra vez, aquí en botón personalizado, ves que
tenemos estilo en uno y ningún estilo en el otro. Lo que podemos hacer de nuevo en botón es mostrar esto
basado en variante. Y solo lo estamos haciendo de esta
manera solo porque sabemos que nuestro contador no va
a cambiar tanto, ¿verdad? Tenemos un plus uno
y tenemos
uno menos y no va
a cambiar tanto. Si va a cambiar
mucho en el futuro, tal vez no
queramos
hacerlo de esta manera. Pero como es
una especie de alcance limitado, tiene sentido para nuestro caso de uso. Bien, entonces vamos
a tomar nuestro estilo y
queremos agregar un margen,
derecho, de uno alrededor. Voy a copiar eso.
Y lo voy a quitar de este componente de
contador externo. ¿Verdad? Así que ya hemos
limpiado mucho esto. Ya sabes, tenemos, realmente solo
tenemos como tres líneas
aquí y puedes ver algo el valor de
abstraer un poco del estilo
que
se muestra en un componente diferente, cuando ves cuánto más limpio cuando ves cuánto más limpio se pone el componente padre Derecha. Y como pueden ver, porque lo hemos sacado, el margen derecho, no funciona. No está ahí. Lo cual está totalmente bien porque
vas a agregarlo de nuevo. Entonces volvamos a botón. Bien, entonces, y
luego vamos a quitar el estilo
de aquí arriba, porque no lo vamos
a necesitar de nuevo. Guarde eso. Quita eso
ahí, y guárdalo. Bien, ahora lo que vamos
a hacer con el estilo aquí es ligeramente diferente porque
solo estamos modificando un elemento Vamos a comprobarlo de una
manera ligeramente diferente. Entonces vamos a escribir
en margen, ¿verdad? Y luego dentro de margen, ¿verdad? Ahora vamos a
hacer esa pregunta. Si hijos es
igual a igual más uno, queremos que el margen,
derecho, sea dos. N de lo contrario queremos que el margen, derecho, sea cero.
Vamos a salvar eso. Ahí lo tenemos. Ahora hemos
agregado nuestro margen, derecho, basado en si el
niño es o no el add one o no. Y entonces esta es
una manera muy fácil limpiar nuestro componente de
mostrador,
nuestro componente principal,
y simplemente mantener todos los estilos
viviendo en una sola área. Derecha. Todavía podemos
ver que tenemos la lógica que se está
manejando dentro de contador. Pero contador bien es ahora que como componente lógico
que contiene todo
el estado las
llamadas de función que luego se
pasan a los componentes
de visualización de conteo y botones personalizados. Así que los componentes de reacción también se crean para tener
idealmente un solo uso. Entonces están mostrando o
están trabajando en lógica, pero no están haciendo
ambas necesariamente. Y entonces esa es una de las
razones por las que se te podría
pedir que hagas esto en una entrevista o en un posible escenario laboral.
11. Pruebas: Bien, así que lo
último en lo que queremos
trabajar hoy es en las pruebas. Las pruebas son otro
elemento interesante con React. Como viste antes cuando estábamos viendo nuestro paquete dot json, había estas cosas
que estamos instalando llamadas bibliotecas de prueba, ¿verdad? Estas son
bibliotecas de prueba a las que tenemos acceso a las que luego podemos usar llamadas
específicas para
asegurarnos de que nuestra
aplicación funcione correctamente. Entonces, si revisamos las pruebas de aplicaciones. Entonces en este momento está fallando
porque en realidad hemos eliminado parte de lo que
solía ser en la aplicación. Derecha. Estaba
comprobando para ver si, bueno, pasemos por
esta línea por línea. Dentro de esta prueba,
importamos dos cosas. El renderizado y la pantalla de la biblioteca de
pruebas reaccionan. También importamos app desde app. Ahora lo que entonces llamamos a
esta cosa llamada prueba. Estamos haciendo una prueba. La prueba hace un enlace de aprender a reaccionar. Se renderiza la aplicación y
luego encuentra un elemento de enlace. Accede a la pantalla y
luego llama get by text. Llama a este método
llamado get by text que nos
permite encontrar
las palabras reaccionan. Y verás que en
realidad está escrito de manera
muy interesante Aquí notarás que
no está escrito como una cadena típica. Si recuerdas, en
algún momento tocamos la X
roja, expresiones
regulares. Sabes que esto es reg en la forma en que esto lo está
escribiendo de una manera que nos permita
buscar estas palabras independientemente de que sean
o no mayúsculas o letras comunes Entonces escribes una barra,
escribes tu frase, escribes otra barra, y luego escribes un I justo Entonces eso es solo un dato divertido que tal vez puedas
usar internets. Y entonces
la forma en que funciona la prueba es que el paso final es
siempre la aserción, entonces lo que estamos tratando de
asegurarnos está funcionando, está
sucediendo, etcétera Entonces esperamos que
el elemento link, que es esta variable que
creamos aquí, esté
en el documento. Por lo que esperamos que el elemento
link esté en el documento. Nuevamente, como dije antes, esto está fallando en
estos momentos porque hemos eliminado este elemento link
del documento. Pero en realidad podemos arreglar
esta prueba y hacer que busque otra cosa que
esté en el documento, ¿verdad? Entonces porque sabemos que nuestro encabezado siempre va
a estar en el documento, podemos usar este
elemento de enlace donde podemos usar el mismo formato para verificar para
ver si nuestro encabezado está presente. Así que sigamos adelante y cambiemos el elemento link para que se cuente. Y vamos a hacer pantalla, pero vamos a borrar esta parte. Vamos a hacer pantalla para salir adelante. Queremos conseguirlo por el papel. Y Get By Role nos permite básicamente encontrar cosas
en función del rol que tienen. Entonces si es un botón, si es un texto, si es una etiqueta. Podemos usar estos diferentes
roles para identificar los propios
elementos reales. Por suerte, solo tenemos
un encabezado en esta página, así que podemos usar get
by role heading. Podemos usar que ahí
esperamos que el conteo
esté en el documento. Como puedes ver,
cuando lo guardamos, ya funcionaba correctamente porque estamos afirmando
para las cosas correctas Una prueba más que podríamos hacer. Podríamos hacer exactamente esta misma
prueba, vamos a reescribirla. Pero podemos verificar el
botón más por ejemplo, ¿verdad? Podemos hacer renders. Um, y también vamos a
querer cambiar este encabezado de
renders
solo para ser correctos. La segunda prueba que queremos
hacer es Renders Plus Button. Y luego
solo podemos crear, vaya,
crear la prueba y
renderizaremos app Y ya sabes, lo interesante en lo
que quizás
ni siquiera hubiéramos pensado es la razón por la que esto está funcionando
bien es porque todos estos componentes
viven dentro
de la app Debido a que la aplicación contiene contador y contiene recuento
y contiene botón. No importa a
dónde llamemos a la prueba porque
puede verlas todas. Entonces solo otra
cosa interesante en la que pensar. Y entonces queremos escribir
constante, ¿qué fue? Botón Plus es igual a
pantalla, consigue por rollo. Pero ahora
lo interesante es que
en realidad no tenemos dos botones. Tenemos botón más
y el menos. Pero, ¿obtenemos por
botón de rollo y luego pasamos? ¿Qué pasamos a
la segunda parte? ¿Podemos pasar en más uno? Esa es potencialmente
una forma de hacerlo. Otra vez, como ves, en realidad
no funciona. Ahora estamos encontrando múltiples elementos con el botón roll. No podemos simplemente decir, oh sí, vamos a
averiguar qué es. Probablemente tenemos que dar
algún tipo de opción aquí. Entonces tenemos que preguntar
como, bien, queremos encontrar el botón, pero luego hay
otra propiedad llamada name que nos permite encontrar específicamente el botón que tiene cualquiera que sea ese nombre. ¿Correcto? Entonces así es como
soluciono el problema. Hemos hecho pantalla,
hemos hecho get by roll, hemos buscado
el botón roll, y luego queremos que el
botón con el nombre de más uno sea el botón que
estamos buscando. ¿Correcto? Entonces así es como
accedemos al botón más. Te voy a mostrar
otro método para hacer esto y podemos
buscar el botón menos. Entonces conductos más
botón es igual a eso. Entonces queremos asegurarnos de
que esté en el documento. Eso vamos a decir, ahí vamos, así sabemos que
en realidad está funcionando correctamente. Bien, entonces ahora
vamos a escribir una prueba más y sólo
vamos
a comprobar el botón de
restar Botón de restar renderizaciones de prueba. Escribiremos nuestra prueba. Haremos render de la app, ese botón restar igual
pantalla en vez de obtener por rol Ahora vamos a
usar get by text. Entonces vamos a hacer get by text y luego
va a ser menos uno. Vamos a salvar
eso. Entonces vamos a almacenar aserción. Espere que el botón de
restar esté en el documento. A eso lo llamamos. Si lo hemos hecho
bien, nuestras pruebas pasan. Hay dos formas de buscar
realmente un elemento. Quiero decir, hay
más de dos formas, pero las dos formas que
estamos viendo en este momento son usando get by role
y usando get by text. Ahora sorprendentemente,
aunque obtener por texto es la más concisa
de las dos opciones, en realidad se
prefiere
obtener por rol porque obtener por rol, puedes algo así,
puedes estar un poco más seguro de que estás obteniendo
exactamente lo que quieres. Digamos que teníamos un rumbo con
la escritura menos uno. Este punto de pantalla obtener por texto en realidad
obtendría ambos
elementos y desencadenaría un error porque get by text es literalmente solo
buscar el texto. Obtener por rollo, por otro lado, es un poco más matizado, un poco más especificado al obtener
por el rol de botón así como el
nombre u otra opción, podemos estar seguros o al menos
con un mayor nivel de
confianza de que
estamos obteniendo el elemento
correcto que
estamos buscando
12. CONCLUSIÓN: Conclusión,
hablamos mucho en este video desde los orígenes de React hasta construir
tu propio mostrador. Me encantaría ver cómo
decidiste implementar
tu contador. Así que por favor deja un enlace a tu
código o al sitio alojado en la pestaña Proyectos y
Recursos para que pueda ver todo el
trabajo duro que has hecho. Leo cada comentario y cada reseña y miro
cada envío de proyectos. Entonces, si tiene alguna pregunta, no
dude en
dejar un comentario en la sección de revisión
a continuación o comunicarse conmigo directamente. Consulta mi página de perfil para obtener más información al respecto. Si quieres saber
más sobre codificación, consulta los otros videos que
también tengo en mi página de perfil. También tengo videos en HTML y CSS disponibles en mi
canal de Youtube y mi página web. Si te interesa
aprender esos, bueno, échales un vistazo y ya
veré en la siguiente.
Zoë Davidson, Software Engineer & Cinematographer
