Transcripciones
1. Introducción: Hola, estoy almorzando y soy Ingeniero de Software con durante años de experiencia con React. En este curso,
estaremos construyendo una sencilla aplicación React la cual te permite ingresar a
una tarea agregada a tu lista. Y luego una vez que hayas terminado,
puedes completarlo haciendo clic en el botón de aquí
estará pasando por el HTML, CSS, y JavaScript
del código desde cero. Por lo que es el
proyecto perfecto si solo aprendes, reaccionas y quieres mojarte los
pies con un proyecto de la vida
real. conocimiento de HTML, CSS Se requiereconocimiento de HTML, CSS
y JavaScript y se prefiere
un conocimiento básico de
los reactores. Pero no te preocupes,
estaremos revisando todo. Al final de esto,
habrás construido tu primer proyecto React
y habrás
aprendido a aplicar conceptos de reaccionar a proyectos de la vida
real
sin más preámbulos. Empecemos.
2. El proyecto: En este curso,
estarás aprendiendo a construir una aplicación de
lista de tareas pendientes. Al final de la misma,
deberías tener una aplicación de trabajo
en la que puedas agregar ítems y puedes eliminarlos pulsando
el botón de aquí. Ahora tu proyecto
será construir sobre esto agregando
más características. Algunos ejemplos de
características podrían ser un botón que borra
todos los ítems. Tal vez en lugar de retirar
el artículo mes que está hecho, se puede mostrar como
grisado-hacia fuera a través de la duda. Esto te enseñará cómo
crear un componente por tu cuenta, cómo pasar apoyos para soldar, y cómo manipular el estado. Para empezar,
trata de pensar los componentes que necesitas y en el estado que
van a manipular. Una vez que hayas terminado, asegúrate de
publicar un video o un enlace a tu proyecto
en la sección de proyectos y recursos a continuación. Me encantaría ver
lo que has hecho.
3. Planifica nuestros componentes y estados: Antes de comenzar cualquier
nuevo proyecto de React, debes planear cómo lo
estarás logrando. Y cuando planee, piense en dos cosas, los componentes y
los estados que necesitará. Aquí tenemos dos componentes que son la forma
y el campo de texto. Dentro del formulario,
tenemos dos elementos, que es el campo de texto y el botón en el
lado derecho. Por otro lado, las
listas de tareas pendientes pueden tener muchos
subcomponentes, que son los elementos de la lista. Y cada elemento de la lista tiene texto y un botón en
el lado derecho. Estaremos necesitando
a diferentes estados. En la primera etapa se hará un
seguimiento de los textos que el usuario ingresa dentro del campo de
texto. En segundo lugar, tendremos una lista
que hará un seguimiento de todos los ítems que ya hemos
agregado a nuestra lista de tareas pendientes. En resumen, antes de
iniciar nuestro proyecto, planeamos cómo se
verá con base en los componentes y los
estados que tendrá. En la siguiente lección,
echaremos un vistazo
al entorno de desarrollo
que vamos a utilizar.
4. Nuestro entorno de desarrollo: En esta lección,
estaremos echando un vistazo a
las herramientas que vamos
a utilizar para crear nuestro proyecto. Estaremos haciendo un proyecto en un sitio web llamado
código sandbox.io. Este es un sitio web gratuito que te permite crear proyectos
React forma remota sin requerir
instalar nada en
tu máquina local. Si acabas de
empezar con React, esta es la plataforma perfecta
para que empiece. Puedes iniciar sesión ya sea por tu cuenta de GitHub
o cuenta de Google. Puedes hacer click en cualquiera
de esos para empezar. Una vez que hayas iniciado sesión, verás una página
similar a esta. Ahora lo que tienes que hacer
es que tengas que ir a este botón que dice nuevo
sandbox y dar click sobre él. Lo que esto te permitirá hacer es crear un nuevo proyecto. Se puede ver que podemos
crear proyectos a partir de múltiples frameworks como
Vue, Angular y React. Pero como se trata de un proyecto de bricolaje, iremos por aquí
y luego haremos clic en React para empezar. Una vez configurado tu proyecto, verás una página
similar a esta. En el
lado izquierdo, puedes ver los archivos en tu proyecto, cualquier dependencia que uses, y cualquier recurso externo que estemos usando, como fuentes. En el medio se puede
ver el código que está escribiendo y cualquier archivo
que tenga abierto. Y en el
lado derecho puedes ver cómo luce
tu proyecto React en el navegador. Ahora lo bueno del sandbox de
código es que cualquier
cambio que hagas tu código aparece casi inmediato en el navegador,
en el lado derecho. Cambiemos el
texto por aquí de hola código sandbox
a hello world. Cuando guardemos eso, verás en el
lado derecho que se actualiza casi automáticamente. En esta lección,
aprendimos a configurar código sandbox dot IO
para nuestro proyecto. En la siguiente lección,
estaremos echando un vistazo a los diferentes archivos que se van utilizar y cómo
estructurar un proyecto.
5. Configuración y estructura de archivos: Bienvenido de nuevo. En esta lección,
estaremos echando un vistazo a la
estructura de archivos y carpetas de nuestro proyecto. Y también estaremos agregando un poco de estilo básico
a nuestro proyecto. Si echas un vistazo
al lado izquierdo, tenemos principalmente cinco expedientes. Entonces en primer lugar, hemos
empaquetado o JSON. Este archivo contiene la
configuración para tus proyectos como cualquier
dependencia que
tengas y cualquier script
que tengas. Entonces hemos indexado en HTML. Estos son los primeros cinco que se renderizan cuando alguien
visita tu sitio web. Realmente no tiene
mucho contenido dentro de él. Pero eso se debe principalmente a que
todo el contenido de su sitio web será
inyectado en él por index.js. Index.js es básicamente un
archivo JavaScript que toma todo el código React que
tienes dentro tu componente de aplicación e
inyecta en index.html. Todos los
componentes React que
hagas por residir dentro de app.js, cualquier empresa que
hagas se pondrá dentro este desarrollo el cual tiene
el nombre de clase de App. Se enviará a index.js, que lo inyectará en
el archivo index.html. Por último, tenemos styles.css. Esta es una hoja de estilo
que aplica estilos a nuestro componente de aplicación y
por lo tanto a todo el proyecto. Cuando estés empezando con
un nuevo proyecto React, siempre
debes entrar en
la carpeta fuente y crear una carpeta dentro de
ella, componentes de TI. Ahora cada vez que hagas
un nuevo componente, puedes agregar los archivos
JavaScript y CSS para ese componente
dentro de esta carpeta. Para empezar,
crearemos los archivos para nuestro primer componente en el que
estará trabajando, que será el componente
formado. Lo que tienes que hacer es que
tengas que hacer click en este icono por aquí y tienes que
anotar formado o JS. Puede crear la hoja de
estilo correspondiente creando un nuevo archivo y
nombrándolo forma de punto CSS. No
lo estaremos codificando ahora mismo, pero esta es la
estructura básica que debes seguir al crear
cualquier componente nuevo. Por último, vamos a entrar en styles.css y agregando algún estilo
básico para nuestro proyecto, lo cual es una buena
práctica cuando se
inicia con un nuevo proyecto. Entonces lo que haremos es en primer lugar, le
daremos un
color de fondo de ligeramente gris. Lo que podemos hacer es decir color de guión de
fondo y establecer el valor a hash F4, F6, FDI. Ahora puedes ver en el
lado derecho que nuestra app no cubre todo el
ancho y alto de la página. Lo que podemos hacer es decir
que el ancho de nuestra app debe ser igual al 100%
del ancho de la ventanilla. Y la altura de nuestra
app debe ser igual a un 100% de la altura de la
ventanilla. Por último, podemos ver que el contenido de una
aplicación se inicia directamente desde la parte superior y
queremos dejar algún
espacio en la parte superior. Lo que podemos hacer es que podemos
añadir algún relleno a la parte superior de nuestra aplicación y
darle un valor de dos REM. Y una vez que lo guardamos, podemos ver que el contenido de una aplicación comienza
ligeramente por debajo de la parte superior. En esta lección,
echamos un vistazo a algunos de los archivos que ya están
presentes en nuestro proyecto React. Creamos la estructura de archivos y
carpetas y agregamos algún estilo básico
a nuestra aplicación. En la siguiente lección,
comenzaremos con nuestro
primer componente, que es el componente de formulario.
6. Nuestro primer componente: la forma: Bienvenido de nuevo. En esta lección, estaremos
creando nuestro primer componente, que es el componente de formulario, estará repasando el HTML y el CSS
para este componente, y la lógica se
agregará en la siguiente lección. Así que empecemos
entrando en forma dot js. Empezaremos creando nuestro
componente funcional escribiendo forma const de
exportación igual a B. No tomaremos ningún
parámetro a partir de ahora. Y vamos a crear el componente
funcional, entonces tenemos que devolver el HTML,
en nuestro caso, va a estar
devolviendo un formulario. Por lo que agregaremos las etiquetas de
formulario por aquí. Y luego por dentro
estaremos agregando dos entradas. En primer lugar, habrá
una entrada de texto tipo. Y en segundo lugar habrá
una entrada de tipo submit. Vamos a seguir adelante y ahorrar eso. Ahora tenemos que agregar
esto a nuestro app.js para
que podamos verlo irá a app.js y lea las
dos etiquetas de encabezado por aquí y agregue en nuestro componente de
formulario. Ahora tenemos que
importarlo también. Entonces iremos sobre tu
cabeza y diremos Import form, que es el nombre
del componente partir de entonces la ruta a donde está
el componente de formulario, componentes de slash
dot slash form. Vamos a seguir adelante y ahorrar eso. Y ahora podemos ver un campo de texto y un botón en el
lado derecho. Ahora no se ve tan genial. Entonces lo que tenemos que hacer es
volver a formar dot js y agregar algunos
nombres de clase y algún estilo. Lo que haremos es añadir algunos nombres de clase a nuestros
diferentes elementos. Empezaremos
agregando un nombre
de clase de forma a nuestro elemento de formulario. Agregaremos un nombre de clase de
TextField a nuestro campo de texto. Por último, agregaremos un nombre de
clase de submit, dash y btn a nuestro botón de
enviar por aquí. Y luego como queremos que los estilos se apliquen
a este componente, se importará la hoja de estilo
yendo a la parte superior y diciendo importar punto
slash form dot CSS. Y seguiremos adelante
y salvaremos eso. Ahora tenemos que
definir los estilos. Entonces entraremos en forma dot
CSS y comenzaremos en eso. En primer lugar, agregamos el estilo a todo
nuestro componente de formulario. Vamos a decir display flex. Queremos justificar los contenidos. Al centro. Queríamos tener una
altura de dos REM. Queríamos tener
un ancho del 80% de la página y
le daremos un margen auto, centrándolo a través de la página. Entonces agregaremos un poco de estilo
a nuestros campos de texto. Entonces diremos dot txt field. daremos un
color de fondo de un poco de acuerdo. Entonces diremos que el hash
de color de fondo eliminará cualquier
borde que tenga. Le daremos un borde ligeramente
redondeado al decir radio de guion
fronterizo y
dándole un valor de 0.5 rem, le
daremos una altura
del 100% de su padre. Nos deshacemos del margen en el lado derecho
de diez píxeles, por lo que no está pegado al botón. daremos algún relleno de
cinco píxeles y diez píxeles. Para que cuando estés
escribiendo haya
algo de espacio entre el
texto y el borde. Entonces le daremos un tamaño de
fuente de un rem. Y también
le damos una caja-sombra, nos aseguraremos de que la sombra
sea de 0 píxeles horizontalmente. Cinco píxeles verticalmente
tiene un desenfoque de diez píxeles. Y le daremos
un valor RGB de 218 para rojo, verde y azul. Y también le daremos
una border-box de tamaño de caja para que al
calcular el tamaño, también se tomen en consideración los píxeles en
el borde. Ahora nuestro campo de texto
se ve perfecto, pero una vez que nos
enfocamos en él, no queremos que aparezca el
contorno y
también queremos que la sombra
cambie ligeramente. Empezaremos en eso
usando el selector de enfoque. Entonces diremos campo de texto de punto. Cuando está en foco. estableceremos para que tenga
un esquema de ninguno. Y lo marcaremos
como un estilo importante. Y también cambiaremos ligeramente
la caja-sombra. Entonces diremos 0
píxeles horizontalmente, tres píxeles verticalmente,
un desenfoque de cinco píxeles. Y le daremos un
valor RGB de 218 para los valores rojo, verde y azul. Ahora al hacer clic en
él, se ve mucho mejor. Por último, comenzaremos
en el botón de enviar. Entonces diremos dot submit, btn. daremos una altura
del 100% de su padre. Le damos un color
de fondo de ligeramente azul al decir color de
fondo y
dándole un valor de 1993 y hacemos 55. Entonces diremos que los
formularios deben ser blancos. Y vamos a quitar cualquier
frontera que tenga. daremos un
radio fronterizo de 0.5 rem. Le daremos un tamaño de fuente de un rem para que el texto
sea un poco más grande. Le daremos una
sombra de caja de 0 píxeles, cinco píxeles, y diez píxeles, y le daremos un color de B1 Ff. También agregaremos algún
relleno de 01 rem. Cuando pasamos el cursor sobre el botón, queremos que parezca
ligeramente diferente que
podamos decir que
estamos flotando sobre él. Entonces escribiremos dot,
submit, dash, btn, y on hover cambiará ligeramente
la sombra. Entonces diremos caja
sombra 0 píxeles, tres píxeles, y cinco píxeles, y le daremos un valor hash de 789. Más fácil. Adelante y salva eso. Y por último, dentro formado o JS, cambiaremos
el texto del botón Enviar para
que diga Agregar. Y seguiremos adelante
y salvaremos eso. Ahí tenemos nuestro componente
de forma. Aprendimos a crear un
nuevo componente funcional. Aprendimos a agregar el HTML, y luego
aprendimos a agregar el CSS. En la siguiente lección,
estaremos trabajando en agregar la funcionalidad
usando JavaScript.
7. Cómo añadir estado a nuestro formulario: Bienvenido de nuevo. En nuestra lección anterior, aprendimos a crear un nuevo componente funcional
usando HTML y CSS. Ahora si entramos en el
campo de texto y
escribimos algo, vemos que
se muestra en la pantalla. Pero el tema es que
no tenemos acceso al valor que
el usuario ha introducido dentro del campo de texto. Para que sea útil, necesitamos almacenarlo en
algún tipo de variable que podamos enviar a
nuestros otros componentes. Entonces para hacer esto, podemos usar una característica
React llamada estado. El estado es cualquier variable de la
que realice un seguimiento, lo que influye en cómo se representa el
componente. Lo que podemos hacer es ir a la
cima por aquí e importar una función llamada
estado estadounidense desde React. La función estatal estadounidense nos
permitirá crear una
nueva variable que mantendrá un seguimiento
del estado del texto que
el
usuario ha ingresado. Para ello, podemos
bajar aquí y decir const, añadir algunos corchetes, y nombraremos el texto de la
variable. Y la función que
podemos utilizar para modificar esta variable
se llamará SetText. Dirá estado estadounidense, para que sea una variable con estado y le daremos un valor
predeterminado de vacío. Ahora lo que queremos
hacer es conectar esta variable al
valor que ingresa el usuario en el campo de texto irá al elemento
TextField HTML. Y diremos que
el valor dentro esto debe ser igual
a la variable de texto. En segundo lugar, siempre que el usuario cambie el valor
dentro del campo de texto, queremos tomar
en este evento y establecer la variable de texto
al último valor. Haremos eso usando set
text dot target dot dot value. Y seguiremos adelante
y salvaremos eso. Ahora si vamos
al campo de texto
del lado derecho y
anotamos algo. Es lo mismo que
cuando empezamos. Ahora para ver el valor
dentro de la variable de texto, vamos a imprimirlo. Una vez presionamos el
botón Agregar por aquí. Para ello, crearemos una nueva función
llamada const handle submit tomará en caso de presionar el
botón como parámetro, y diremos E dot
prevent default. Esto debería impedir que la
página se
refresque cada vez que presionamos el botón
como lo hace en este momento. Vamos a seguir adelante en
el formulario y decir cada vez que se llame a la
función onsubmit,
llame al método handle submit. Entonces iremos
dentro de la función y console.log el valor
dentro de la variable de texto y también lo
restableceremos para que se vacíe. Entonces diremos texto establecido y vamos a poner una
cadena vacía por ahí. Ahora, si vamos
al lado derecho y anotamos algo
y hacemos click en Agregar. Se puede ver que el valor ha sido impreso en la consola. Entonces en esta lección, aprendimos a convertir un componente que era
incontrolado y que no se
hubiera quedado en
un componente que fuera controlado por nosotros
y que tendrían estado. En la siguiente lección estaremos
aprendiendo a agregar estado a toda
nuestra aplicación
y cómo realizar un
seguimiento de
todas nuestras tareas.
8. Cómo añadir estado a nuestra aplicación y usar accesorios: En esta lección,
estaremos aprendiendo a hacer
un seguimiento de todas nuestras
tareas usando el estado. Y también estaremos
echando un vistazo a cómo
podemos pasar funciones como apoyos para que podamos agregar nuestro último
elemento a nuestra lista de tareas pendientes usando el componente telefónico comenzará
volviendo a app.js. Lo que queremos hacer es hacer un seguimiento de todos nuestros elementos de la lista de tareas pendientes. Para ello podemos usar el
estado estadounidense como lo hicimos antes. Podemos ir a la cima por
aquí y anotar importación. Declaras desde React. Podemos ir dentro de ese componente de
app y decir const para hacer y establecer hacer, que es nuestra variable y están funcionando para cambiar
esa variable. Y podemos darle un
valor de una lista vacía. Ahora, tenemos nuestra variable
que ha sido declarada. Ahora necesitamos una función
que cuando se le dé un elemento, actualice la lista para que
contenga el elemento más nuevo, creará una nueva función
llamada const add to do, que agregará una nueva tarea pendiente
a nuestra lista existente. El espíritu tomó un parámetro
que será nuevo todo, que será sólo algunos textos. Entonces crearemos
la función de flecha. Entonces diremos set to do. Ya que queremos actualizar
el valor de las tareas pendientes, agregaremos algunos corchetes
y luego diremos usar las tareas pendientes existentes
mediante el uso del operador spread, pero también añadimos el nuevo todo
que estamos obteniendo. Ahora esta función debe anexar el último elemento a
nuestra lista de tareas pendientes. Ahora lo que queremos hacer
es ejecutar esta función y pasar el nuevo valor cada vez que se pulsa
el botón Agregar. Y para ello,
necesitaremos pasar esta función como prop
a este componente, que es el componente del formulario. Los apoyos nos permiten
pasar variables y funciones de un
componente padre a un componente hijo. Podemos pasar en un prop
llamado Add to do, y podemos establecer su
valor a la función Add to do que
acabamos de crear. Ahora, iremos dentro del componente de
formulario y
aceptaremos este prop y
lo usaremos siempre que se haga clic en el
botón Agregar. Volvamos a formar dot js. Por aquí en el parámetro, agregaremos algunos tirantes rizados y aceptaremos el Add to do prop. En lugar de hacer un
console.log por aquí. Eliminaremos eso y
en su lugar diremos Agregar para hacer. Y pasaremos
el último valor dentro de la variable de texto, ya que esto
contendrá lo que sea necesario queremos agregar
a nuestra lista de tareas pendientes. Ahora para ver el último
valor de nuestra lista de tareas pendientes, lo que vamos a hacer es que solo lo
console.log por aquí. Y seguiremos adelante
y salvaremos eso. Ahora podemos bajar aquí
y abrir la consola. Y podemos ver que empieza
con una lista vacía. Anotemos el elemento uno. Y cuando hacemos click en Agregar, vemos que se ha
agregado a nuestra lista. Agreguemos el ítem dos también. Podemos ver que el artículo
ha sido agregado. En esta lección,
aprendimos a hacer
un seguimiento de
toda nuestra lista de tareas pendientes. Y también
aprendimos a pasar en funciones como apoyos
a componentes infantiles.
9. Entinta a la UI: Bienvenido de nuevo. En la lección anterior,
aprendimos a un
seguimiento de
toda nuestra lista de tareas pendientes. En esta lección,
estaremos creando la lista de tareas pendientes y el elemento
de lista Componentes. Y también estaríamos viendo cómo se pueden reutilizar
los componentes, que es lo que
los hace tan grandes. Empezaremos eliminando
este console.log por aquí. Y luego crearemos algunos archivos
JavaScript y CSS. Hagamos los archivos para
el componente de lista de tareas pendientes. Entonces diremos lista de tareas pendientes dot js. También queremos hacer la
hoja de estilo para eso. Entonces iremos a decir
To Do list dot CSS. Entonces queremos hacer elemento
de lista dot js. Queremos hacer elemento
de lista dot css. Dentro del elemento de lista dot js creará un componente
funcional. Entonces diremos que el elemento de
lista const es igual a, no
tomaremos ningún
parámetro a partir de ahora. Y solo devolveremos
un div por ahora. Y también vamos a exportar
eso. Para el elemento de la lista. Tomaremos un
acercamiento del texto que queremos mostrar
en el ítem de lista. Y dentro del div agregaremos algunas etiquetas de párrafo para mostrar
los textos que queremos. También queremos la característica de poder completar una tarea. Entonces para eso, agregaremos
un botón por aquí. Ahora lo que queremos
hacer es que queremos
entrar en el componente
dot js lista de tareas pendientes. Por aquí estará importando
el componente de elemento de lista porque vamos a representar el elemento de lista a través de nuestro componente de lista de
tareas pendientes. Diremos elemento de lista de importación de punto slash list item dot js. Entonces vamos a seguir adelante y crear el componente dirá exportación, const para hacer lista. No vamos a tomar ningún
apoyo a partir de ahora. Apenas devolveremos un nuevo div. Y dentro del div, agregaremos algunos elementos de la lista. Crearemos una nueva instancia
de un componente de elemento de lista. Más cerca hacia abajo. Entonces para el texto solo
diremos el ítem uno estará conectando esto a nuestro estado
en la próxima lección. Pero por ahora, solo estaremos
usando algunos valores fictitos. Hicimos uno. Agreguemos unos cuantos más. Entonces diremos el punto
dos, punto tres. Ahora que tenemos el componente de lista de
tareas pendientes,
todo lo que tenemos que hacer es entrar en app.js importado y renderizarlo. Entonces diremos importar lista de
tareas pendientes desde
componentes de slash de puntos slash lista de tareas pendientes. Seguiremos adelante y
lo renderemos por debajo de nuestra forma. Una vez guardamos eso, podemos ver que se ha rendido toda la
lista. Entonces vimos que teníamos que
hacer componente de lista y teníamos varios
componentes anidados de elementos de lista dentro de eso,
que estamos representando los elementos de
la lista. Ahora lo que vamos a hacer es agregaremos un poco de estilo a nuestros componentes. Empecemos agregando un poco de
estilo a nuestra lista de cosas por hacer. Empezaremos importando
nuestras hojas de estilo. Entonces en la parte superior
diremos import dot slash, lista de
tareas pendientes nota CSS. Ahorra eso. Entra en lista de tareas pendientes dot CSS. Para la clase de lista de tareas pendientes se
sumarán los estilos. Antes de eso necesitamos agregar el nombre de la clase
al desarrollo. Vamos a decir div, el nombre de la
clase es igual a dos do do dash list. Ahorra eso. Y ahora vamos a sumar los estilos. Queremos
mostrarlo como una columna. Por lo que diremos display flex y dirección flexor
será columna. Queremos alinear los artículos
al centro horizontalmente. Por lo que diremos alinear los artículos centro. También queríamos hacer lista para estar en el centro de la página. Entonces diremos ancho del 60% y le daremos un margen de un rem
y auto horizontalmente. lo guardaremos. Ahora no se ve
muy diferente, pero vamos a añadir un poco de estilo
a nuestro elemento de lista también. Así que en primer lugar, vamos a importar
lista elemento dot css. Después agregaremos los nombres de las clases. Por lo que llamaremos a esto un ítem de lista. Le dará al botón un nombre de
clase de casilla de verificación. Ahora vamos a seguir adelante y
agregar los estilos para este elemento de lista interior punto CSS. Para empezar, agreguemos los estilos para
el elemento de la
lista en sí. Diremos elemento de lista. Queremos mostrarlo como una fila. Entonces comenzaremos diciendo que flex establecerá la
dirección flex en fila. Queremos alinear los
artículos verticalmente, por lo que diremos alinear los artículos en el centro. Queremos justificar el espacio de
contenido entre para que el texto esté a la izquierda y el botón esté a la derecha. Por lo que diremos justificar el contenido y establecer eso
al espacio entre. Entonces agregaremos un
margen verticalmente para que todas las cartas
en stock juntas. Entonces vamos a poner eso como cinco píxeles verticalmente y 0
píxeles horizontalmente. Agregaremos algún relleno
a los bordes horizontales. Por lo que diríamos 02 EM. Le daremos un ancho del 90% y un color
de fondo de blanco para que
sea fácilmente visible. Le damos un borde redondeado. Por lo que podemos decir radio de salpicadura
fronteriza. daremos un valor
de 0.5 de ellos. Y por último,
le daremos una sombra. Entonces 0 pixeles, cinco
píxeles, diez píxeles. Y le daremos un valor
RGB de 10992 fuera. Eso lo guardaremos. Ahora, una vez que pasamos
por encima de la tarjeta, queremos que se vea
ligeramente diferente. Entonces diremos elemento de lista de puntos
y usaremos el selector de hover. Cambiaremos ligeramente la
caja-sombra. Diremos sombra de caja. Diremos 0 píxeles,
tres píxeles,
siete píxeles, y le daremos un valor
RGB de 205 a lo largo. Entonces lo guardaremos. Ahora si pasamos el cursor sobre los artículos, podemos ver que se
ven ligeramente diferentes. Ahora por fin, vamos a darle un poco de estilo a la
casilla de verificación también. Entonces diremos casilla de verificación de puntos, que es el botón en
el lado derecho. Le daremos un
color de fondo de blanco, también
le daremos un borde. Entonces lo haremos 3.5 pixeles. Será sólido, y queremos que sea azul. Por lo que diremos RGB 1993255
eliminará cualquier sombra que tenga. Entonces diremos box-shadow none. Le daremos una altura de 20 píxeles y un
ancho de 20 píxeles. Entonces queremos que sea
completamente circular, eso diremos radio corporal y
pondremos eso como un 100 por ciento. Por último, cuando pasamos el cursor sobre él, queremos que el cursor
sea un puntero. Entonces diremos
casilla de verificación de puntos al pasar el cursor, gire el cursor en un puntero. Ahí vamos. nuestros elementos de lista dentro de
nuestra lista de tareas pendientes, y ellos tienen las casillas de verificación
y luego también. Entonces en esta lección aprendimos sobre componentes anidados y
vimos cómo reutilizar la competencia como lo hicimos con los ítems de la lista. Ahora en esta lección
usamos valores ficticios, pero en la siguiente lección
estaremos echando un vistazo
a cómo renderizar la competencia en
base a los datos reales.
10. Mapaa el estado a los componentes: Bienvenidos de vuelta a todos. En la lección anterior, usamos valores ficticios para
representar nuestra lista de tareas pendientes. En esta lección, estaremos
echando un vistazo a cómo podemos mapear nuestros datos a los componentes del elemento
de la lista. Para empezar,
iremos dentro del componente de lista de tareas pendientes y eliminaremos
los valores ficticios que tenemos aquí. Ahora lo que queremos
hacer es que queremos
renderizar nuestra variable de tareas pendientes, que tenemos en
nuestro archivo app.js. Lo que haremos es que pasemos esta variable a nuestro componente de lista de
tareas pendientes como un prop ahorrará
dos cuotas y
asignaremos la
variable de estado de tareas pendientes a esto. Ahora ya que
lo estamos pasando como un problema, podemos ir al
componente de lista de tareas pendientes y aceptarlo poniendo unos tirantes rizados y tomando el prop de tareas pendientes. Ahora tenemos que encontrar
una forma de mapear esta lista de texto en
una lista de componentes. Asuerte, ES6 tiene la función
perfecta para esto, que se llama función
de mapa. Si quieres usar algún
JavaScript dentro de nuestro HTML, te pondrás unos tirantes rizados. Lo que decimos es llevar esta lista de
tareas pendientes de textos y asignarla a una lista de componentes de elementos de
lista. Para cada valor en el interior, tome el valor de texto,
que es la tarea pendiente, y el índice actual, que luego usaban
una función de flecha. Decimos, devolverme por cada elemento, un componente de elemento de lista y el
texto debe ser el Tareas pendientes, le
dará a cada
elemento de lista una clave única, que será el índice, ya que eso es sólo
buenos caracteres. Y seguiremos adelante
y salvaremos eso. Ahora verás que está vacío. Pero una vez que seguimos adelante
y
agregamos un ítem, podemos ver que se suma
aquí abajo y podemos seguir adelante. Por lo que podemos decir el
punto dos, punto tres, y sigue
siendo agregado a nuestra lista. En esta lección, aprendimos
cómo podemos mapear una lista de variables a una
lista de componentes. Esto nos muestra el poder de los componentes y la reutilización. Y esta es la
razón por la que React es tan popular y tan poderoso. En la siguiente lección,
estaremos agregando la funcionalidad de Tarea Completa, y echaremos un
vistazo a cómo pasar
apoyos a lo largo de múltiples niveles. Y un caso de
uso más complejo del estado estadounidense.
11. Cómo agregar la función de eliminación de tareas: Bienvenidos de vuelta a todos. Ahora tenemos la
funcionalidad de
poder agregar un nuevo
ítem a nuestra lista. En esta lección, vamos a estar agregando la función para marcar que
un elemento tiene completado. Lo que vamos a hacer
en esta lección es aprender a crear una función que tome en índice de
un ítem y lo
elimine de nuestra lista. Para empezar, vamos a
crear una nueva función y la llamaremos
const, eliminar para hacer. Y tomará en el índice del ítem que queremos
eliminar y lo haremos
en una función de flecha. Lo que necesitamos
hacer es crear una copia de nuestro estado de tareas pendientes. Entonces lo que haremos es decir
const para hacer es copiar. Y usaremos el
operador de spread para crear una copia. Entonces solo escribiremos
dot, dot, dot to-dos. Luego para eliminar el
elemento se escribirá tareas pendientes copiar empalme de puntos, y luego a la derecha hacia abajo para
hacer índice coma uno. Ahora tenemos una variable
que contiene la lista actualizada sin el ítem que
queríamos eliminar. Ahora guardaremos
esto diciendo set to-dos y pasando
la copia de tareas pendientes. Ahora que tenemos una
función que puede eliminar un elemento de la lista, necesitamos
pasarlo como prop
al elemento de lista para que una vez pulsado
el botón, pueda invocar esta función y retirarse de la lista. Así que lo pasaremos a nuestra lista de
tareas pendientes diciendo eliminar dos du es igual a la función Eliminar para hacer,
que simplemente queremos decir. Entonces iremos dentro del componente de lista de
tareas pendientes. Tomará en
este apoyo por aquí. Vamos a anotar eliminar para hacer. Entonces como ya conocemos el índice basado en la
variable de aquí, podemos pasar en una función
al elemento de lista, que será una versión modificada de la función eliminada para hacer. Pasaremos un prop llamado eliminado para hacer al elemento de la lista. Y siempre que el
elemento de lista llame a este prop, llamaremos a la
función remove to do que
obtuvimos de app.js. Pasaremos en el índice
del elemento de lista actual. Tenemos que hacer ahora es que tenemos que
ir dentro del componente de
elemento de lista. Tenemos que tomar en la función
Eliminar para hacer. Tenemos que
anotar que cada vez que se llame
onclick por aquí, solo
debemos invocar
el remove para hacer prop. Porque el
componente de lista de tareas pendientes se encargará del índice en el
que tiene que ser eliminado. Por lo que ahora que hemos guardado eso, si hacemos clic en el botón, borra el ítem. Vamos a añadir algunos ítems más que podemos ver que se está eliminando el
correcto. Y si tratamos de eliminar el
elemento número tres haciendo clic en el botón,
se elimina. En esta lección, agregamos la funcionalidad
para eliminar una tarea. Aprendimos a pasar apoyos
a través de múltiples niveles. Y también vimos un caso de uso
más complejo de la función estatal estadounidense.
12. Conclusión: Enhorabuena, acabas de hacer todo
un
proyecto React desde cero. No es una hazaña pequeña. Así que palmaditas en la espalda. Mientras trabajábamos en este proyecto, aprendimos a
crear nueva competencia. Nosotros señalamos, pasamos apoyos a
diferentes componentes, reutilizar componentes, y renderizar
componentes en función del estado. Ahora aún no ha terminado. Echa un vistazo a la sección de proyectos
y recursos
abajo y trabaja en agregar más
características a nuestra lista de tareas pendientes. Asegúrate de publicar tu proyecto
en la galería del proyecto. Me encantaría revisarlo. Si has llegado
hasta aquí en el curso, por favor considera dejar una reseña y darme un
seguimiento en skillshare. Eso es todo por ahora gente, mejor de las suertes con
tu viaje de reaccionar.
Laksh Dwivedee, Software Engineer
