Transcripciones
1. Introduccion: ¿Alguna vez has oído hablar
de una de las bibliotecas
front-end más populares del mundo, React? Hoy, vamos a
recorrer todo lo que necesitas
saber para construir tu propio
proyecto usando React. Incluyendo cómo
construir esta aplicación para hacer. Hola, mi nombre es Zoe. Soy ingeniero de software
y ex profesor al que le encanta educar a otros sobre
cómo comenzar con la codificación He creado toneladas de sitios web y aplicaciones web usando React CSS, HTML y otra tecnología. 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 una app para hacer
completamente funcional. Para ello, necesitarás acceso a una computadora y un editor de código
como código de Visual Studio. También debes tener
algo de comprensión del script
java o tipo script así
como HTML y CSS. Para poner en marcha nuestra app,
vamos a usar un framework llamado Next
S, que usa React. También vamos a utilizar material es para algunos
estilos básicos y componentes. Un salto enlaza con cualquier activo y recurso que necesites en la pestaña de
proyecto y recursos.
3. ¿Por qué reaccionar?: ¿Por qué reaccionar? Si ya estás
familiarizado con React, puedes saltar adelante a
las lecciones tutoriales. Pero en las próximas lecciones, vamos a repasar qué problema
se creó React para resolver, cómo se usa y
cómo ejecutarlo. React fue desarrollado en Facebook y lanzado al
público en 2013. Inicialmente se creó con el
fin de manejar recargas
y actualizaciones
ineficientes de página que en su momento requerían que se repintara todo
el Dom o el
modelo de objeto de documento Con cada actualización, React, soluciona este problema
creando lo que
llamaron el Dom 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 manera
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 una pieza de
código independiente y
reutilizable que encapula su propia funcionalidad,
estado y estructura Estos componentes se pueden
considerar como una combinación
de HTML y Javascript o JSX, que se usa 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 Así como HTML tiene elementos
dentro de otros elementos reaccionan, 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. Echemos un vistazo a
un componente de cuenca. Estos componentes están realmente
solo en sus funciones base. Pueden tomar argumentos, pueden modificar variables, y pueden devolver un valor. Pero simplemente hablando,
podemos pensar en props como los argumentos que se
pasan por nuestra función
cuando se llama,
y declarar 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: Crea la app React. varias formas de
configurar una aplicación de reacción. En este curso, repasaremos
dos de los más populares. La forma original de
configurar una aplicación de reacción era usando CRA o
crear una aplicación de reacción. La aplicación Create React también se desarrolló
en Facebook con el fin de eliminar gran parte de esta
complejidad y
convertirla en un comando simple pero
poderoso. Al usar la aplicación create react, te ahorrarás horas
de dolor de cabeza cuando intentes configurar una nueva
app de React por primera vez. Para ejecutar, crea la app React. Simplemente ingresa px,
crea la app react, 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. No obstante,
te advertiría que no lo uses para construir tu proyecto ya que ya
no se mantiene. En su lugar, sugiera
usar frameworks o herramientas como Next S o Vet. Usaremos la siguiente S
para construir nuestro para hacer.
7. TypeScript: Mecanografiado. En lugar de usar Javascript para nuestra aplicación para hacer, usaremos mecanografiado Typescript es en realidad solo
un superconjunto de Javascript. Lo que eso significa es
que se construye de Javascript y, en última instancia, se compila
hasta Javascript. Pero tiene algunas características
adicionales que Javascript no
nos da fuera de la caja. Typescript nos permite usar la escritura
estática en lugar de
dinámica, Atrapa muchos más errores
al escribir nuestro código, a diferencia de en tiempo de ejecución Desarrolla automáticamente un nivel de documentación
para tu proyecto. Es un poco
diferente a Javascript, pero lo pasaremos juntos paso a paso a lo largo de
nuestro tutorial. Si puedes escribir Javascript, estoy seguro que puedes
escribir Typescript
8. Next.js: Siguiente S en los años que han pasado desde que se introdujo la
aplicación create react por primera vez, se han
construido y desarrollado
muchos frameworks a partir de ella. Un framework muy popular
hoy en día es Next JS. Siguiente GS proporciona una gran cantidad de optimizaciones fuera de la caja, como enrutamiento de renderizado
servicida y SEO mejorado Y como tal, es uno
de los favoritos de los desarrolladores front-end. Lo usaremos
en nuestros proyectos, así que vamos a sumergirnos
y comenzar.
9. Estilos de la aplicación: Bien, así que comencemos. Entonces lo primero que
vamos a querer hacer es instalar el paquete
que estamos usando. En realidad vamos a usar
esta plantilla aquí que nos
permite crear una aplicación
que tenga el siguiente S Material, UI y escriba script todos
juntos a la vez. Si tuvieras que instalar
esto manualmente uno por uno, comenzando con el siguiente JS
y luego instalarlo, material I y escriba script, tardaría un
poco más en configurarlo. Así que solo estamos usando
esta plantilla como atajo para ahorrarnos
algo de tiempo en el tutor. Entonces, qué voy a hacer aquí
para poder utilizar esto, y dejaré el enlace
a este
repositorio Github en particular abajo en la pestaña de proyectos y
recursos a continuación. Entonces solo voy a ir
por el lado derecho aquí donde está el botón verde. Sólo voy a copiar
la URL del proyecto. Y luego voy
a entrar en la carpeta de
desarrollo
y la voy a clonar en una carpeta a la que
voy a llamar para hacer. Así que vamos a hacer eso
y luego increíble. Entonces está creado, déjame
pasar a mi carpeta de hacer ahora. Documentos, desarrollarlo y hacer. Y luego vamos a
abrir eso en código VS. Muy bien, increíble.
Ahora todo está en código VS,
deberíamos estar bien para ir. Ahora lo que vamos
a hacer es usar NPM para instalar los paquetes con los
que estamos trabajando Porque aunque tenemos
nuestro paquete en Json, que ya hemos hablado antes, tiene todos estos
paquetes que aún
necesitan ser instalados
para que podamos usarlo. Así que sigamos adelante y
empecemos con eso. Entonces voy a empezar
abriendo una nueva terminal. Y verás que ya está inicializado como repositorio Git Esa es una característica de usar
next S. Nos permite
básicamente obtener todas esas cosas
que
tendríamos que hacer una por una, básicamente hechas por nosotros. Seguimos adelante y
vamos a escribir NPM I para instalar y
dejar que se instale Y como verás arriba
en la parte superior izquierda aquí, acaba de aparecer
una carpeta llamada
módulos de nodo Y esto es básicamente el resultado de instalar todos
estos paquetes. Es toda la información que va a
necesitar
el proyecto para funcionar. Entonces verás que tenemos
instalados módulos de nodo ahí, un par de errores
ahí, pero no nos
vamos a preocupar por ahí. Y luego vamos
a seguir adelante y ejecutar NPM inicio para iniciar nuestro proyecto Ahí estamos recibiendo un
pequeño error. Oh, ¿sabes qué? Sí
necesitamos ejecutar NPM, ejecutar dev. Eso es lo que es.
Bien, lo siento, empieza a esforzarse. Dos comandos
diferentes. Entonces vamos a ir por la derecha aquí y si hemos hecho
las cosas correctamente, el anfitrión local 3,000 como se
dijo en nuestra terminal, deberíamos poder
sí, empezar. Así que tenemos nuestra próxima
S arriba y girando. Estamos usando material Y y
estamos usando script tipo. Así que básicamente
vamos a comenzar a desarrollar y construir nuestra aplicación para hacer para que
podamos enfocarnos en las
cosas que importan. Bien, entonces la
app para hacer que vamos
a estar construyendo, si solo buscas en Google
una, ya sabes, básicamente
quieres
crear algo, ya
sabes, con cualquier aplicación
dada para hacer. Quieres crear
algo que tenga como una lista de tareas. Ya sabes, alguna manera de
marcar lo que estás haciendo y alguna forma de
eliminar lo que estás haciendo. Uno que he creado en el pasado y que en realidad
vamos a modelar esto después es esta aplicación para
hacer aquí mismo. Entonces esto es por lo que
nos estamos esforzando. Queremos hacer app que
cuando agreguemos a Do, podamos agregarla a la lista. Ya sabes, con solo golpear
Submitter, presionar Enter, podemos
marcarlo y, ya sabes, tal vez tener algún estilo
asociado a eso Podemos eliminarlo
si queremos. Y luego si
lo agregamos para hacer y
actualizamos la página,
queremos que se quede bien. No queremos que
desaparezca porque queremos poder usar esto para
hacer la aplicación como algo
así como nuestra aplicación personal para hacer
durante el tiempo que queramos. Entonces hay un par
de cosas que
vamos a tener que hacer para
que funcione así. Pero usaremos esto para hacer app como referencia en caso de que
necesitemos ayuda en el futuro. Ahora mismo tenemos
esta aplicación aunque. Este próximo S kits de inicio. Sigamos adelante y
deshagamos de todo lo que
no necesitamos usar saltando
a nuestro proyecto de código
VS Aquí voy a entrar en páginas. La forma en que funciona la siguiente S es
que en realidad estructura tu app en términos
de páginas Debido a que
estamos en la
página principal de la app, solo
estaremos modificando este archivo de índice como ya
hablamos antes. Tenemos JSX, que es Javascript mezclado
con Javascript XML. Se trata de S, que es sólo la versión mecanografiada de lo mismo que
mencioné antes Si no estás familiarizado
con Typescript,
es muy, muy
similar a Básicamente son
lo mismo. Typescript es solo
Javascript con tipos, y vamos a entrar en eso a medida que
trabajamos en nuestro proyecto Entonces, lo primero
que queremos hacer es aclarar
todo esto en el medio. Así que vamos a
limpiar todo, desde Maine hasta el pie de página
y deshacernos de eso. Solo queremos una
pizarra en blanco y
aquí vamos a cambiar el título para hacerlo genial. Entonces como verás a la derecha, no
tenemos nada que hacer, así que sabemos que
hemos hecho nuestro trabajo correctamente. Lo limpiamos. También me voy a
deshacer de los estilos aquí, solo para que
podamos realmente, realmente empezar de una pizarra en blanco. Bien, así que volvamos a echar un vistazo a nuestra app.
¿Qué queremos hacer? Bueno, creo que vamos a
ser, vamos a necesitar crear varios
componentes diferentes aquí. Así que vamos a necesitar
tener este tipo de componente
más grande que
aloja el fondo. Tal vez solo puedas agregar el
fondo al cuerpo, pero luego tendremos
aquí
este contenedor que realmente contiene
lo real para hacerlo solo. Pero parece que tenemos un encabezado
aquí que podríamos nombrarlo. Arte para hacer lista o lo que sea, pero solo está llamado a
hacer por el momento. Y entonces tenemos este
insumo que se vincula a someter y lo real
a hacer ellos mismos. Entonces hay algunos componentes
que queremos crear. Piensa en crear
aquí. Empecemos diseñando primero
el fondo. Creo que lo que hemos hecho
aquí es un gradiente lineal. Entonces creo que eso es lo que probablemente
voy a hacer por nuestros proyectos también. Lo que voy a hacer para
agarrar eso es que voy a buscar la semántica
para gradiente lineal Y sí, esto es
lo que quiero hacer. Quiero agarrarlo como color
de fondo o básicamente simplemente
convertirlo en el fondo. Así que voy a
regresar a la app y luego probémoslo en nuestro div
aquí y veamos si funciona. Si cubre toda la página, entonces va a ser gradiente
lineal y
solo tenemos que envolver esta cita. Esto es CSS en línea si
no lo ha usado antes. Básicamente, esto nos está
permitiendo escribir nuestro CSS dentro del propio elemento
real. Así que solo tenemos que
asegurarnos de que eso se envuelve. Sí. Oh, ya sabes, lo siento, puse la cita
en el lado equivocado. Ahí vas. Fresco. Entonces echemos un
vistazo a lo
que nos ha dado eso. Mm hm. Ah, y agreguemos algo de textura para que podamos ver que estamos trabajando en el archivo
correcto. Todo bien. Para hacerlo increíble. Entonces esto nos está
dando un gradiente lineal, simplemente no cubre toda
la página. Entonces un paso más voy
a agregar a esta página. Básicamente, quiero que la página ocupe toda la página visible. Entonces, hay una propiedad llamada
view height que
realmente puedes usar para tomar el
100% de la vista, la altura de la vista
que estás usando. Entonces estableceremos la altura a 100 VH con soportes
para altura de vista. Y vamos a salvar
eso. Y ahí vamos. Tenemos nuestra página
tomando el fondo, o al menos para nuestra página de inicio, ocupando toda la
página. Eso es genial. Una característica más que
voy a agregar a este
estilo de degradado lineal aquí es un giro. Entonces voy a
sumar un giro de 0.125. Y eso sólo va a girar la línea donde está el
gradiente ahora mismo. Es algo así como a través de la
página. Simplemente va a darle la vuelta, así que
vamos a salvar eso. Genial. Y estos son solo un
poco de una llamarada extra. Fresco. Así que terminamos de
estilizar eso por el momento. Pasemos a la
creación de nuestros componentes. Entonces quiero crear
una nueva carpeta aquí, y voy a
llamarla componentes. Como mencioné en mis lecciones
anteriores, algo que me gusta
hacer cuando estoy creando un proyecto de react es crear una carpeta de
componentes para que pueda categorizar y construir todos mis componentes
en las carpetas existentes Encuentro que me facilita
mucho las cosas. Solo depende de la
aplicación
con la que estés trabajando y cómo te gustaría
estructurar tu proyecto. Entonces dentro de la carpeta de componentes, voy a crear un nuevo
archivo y voy a llamar a este archivo para hacer
contenedor porque este va a ser ese
gran contenedor blanco que vimos en el
otro, en el ejemplo. Entonces voy a presionar
Enter y luego usar, creo que soy yo,
es un auto completo, voy a usar R AFC y va a
crear automáticamente un componente funcional Entonces ahí vamos, tenemos un componente funcional
llamado a hacer contenedor. Lo que voy a
hacer ahora, saltando nuevo a esa página principal, solo
voy a
reemplazar nuestro pequeño texto aquí que dice a Do
y reemplazarlo con nuestro componente contenedor Do
que como lo ves realmente importa
automáticamente debido a
algunas de las extensiones que
tenemos instaladas Y solo voy a decir que si tienes más dudas
sobre extensiones, solo deja un comentario
abajo y te puedo recomendar un montón si necesitas
ayuda con cosas como esta. Así que saltando a,
verás a la derecha aquí que hacer contenedor ahora está realmente
presente en el, en la aplicación Entonces, ya sabes, estamos
trabajando bastante bien. Entonces lo siguiente que
queremos hacer es en realidad queremos darle estilo, queremos que nuestro
contenedor para hacer esté en el centro de la página, ¿verdad?
Queremos que esté ahí. Entonces para hacer eso, creo la forma más fácil de hacerlo sería configurar
nuestra página para
que sea una caja flexible porque esto va a ser lo
único en nuestra página. Podemos permitir que
sea una caja flexible con la mínima preocupación de que
va a afectar a cualquier otra cosa. Entonces en nuestra página, lo que
voy a hacer aquí es
establecer la pantalla, hacer flix y luego voy a justificar que el contenido
sea centro y guardar eso. Como verás, el contenedor
ya se ha rebotado al centro, por lo que ya está
centrado en la página Lo siguiente que voy
a querer hacer ahora es
en realidad darle estilo al
contenedor en sí. Y voy a agregar algo de
estilo inline a eso llegar a donde queremos que esté. Usando un poco de estilo en línea. En la inmersión aquí mismo,
voy a ir al estilo y luego voy a establecer un margen superior de
digamos cinco M por ahora,
solo para empujarlo un poco hacia abajo de la parte superior de la
página. Entonces lo siguiente que quiero hacer ahora es establecer un color de fondo. Color de fondo. Sólo vamos a
ponerlo en blanco, que es FF y
guardar eso, genial. Entonces tenemos nuestro contenedor para hacer, pero como puedes ver
va como todo el camino hasta la
parte inferior de la página. No necesariamente queremos eso. Entonces, lo que
realmente voy a hacer es establecer una altura máxima de altura y luego eso solo
lo mantendrá agradable y contenido. Podemos hacer esto
más grande si queremos. Podemos hacerlo más receptivo, o podemos hacerlo desplazable Todo este tipo de cosas
así son agradables de tener, pero nos preocuparemos por eso a
medida que bajemos de la línea. Ahora mismo, solo queremos
conseguir este tipo de MVP, el producto mínimo viable con el
que estamos trabajando aquí Bien, un par de cosas más que estoy viendo aquí es que no
queremos que hagamos nuestro es que
realmente se aplasta hasta el
borde del contenedor Así que probablemente queramos
agregar algo de relleno en. Entonces voy aquí y
agrego un poco de relleno. Vamos a agregar dos carnero de
relleno en todos los sentidos. Genial. Se ve bastante bien. Entonces lo último aquí,
vamos a agregar un radio de borde para simplemente
curvar esas esquinas. Entonces vas a
escribir el radio de borde y luego voy a configurarlo en, y guardarlo. Genial. Estoy bastante contento con
cómo se ve en estos momentos. Creo que podemos hacer un poco más una vez que empecemos a agregar en los componentes internos
aquí como encabezado. Y también vamos a agregar en la entrada, el botón
y lo real a hacer. Así que vamos a saltar y hacer eso. Volviendo a o diciendo realmente
en nuestro contenedor Do, sigamos adelante y
agreguemos el encabezado Así que vamos a
crear uno H. Y en realidad porque
estamos usando material I, que es una biblioteca particular de estilos y componentes
que está disponible para nosotros. Debido a que estamos usando react, podemos usar
algunos de sus
componentes integrados que nos permiten
diseñar las cosas un poco más rápido. Nos permitirá ponernos en marcha
un poco más rápido con nuestra Apple. Y también enséñanos una nueva biblioteca y danos una nueva herramienta con
la que estar familiarizados. Entonces voy a usar un
componente que han llamado tipografía e importación Ahora por
experiencia previa sé que el componente topográfico tiene un elemento o una propiedad
llamada variante. Entonces voy a usar
la propiedad variant y voy a querer
acceder a la variante de H one, porque este va a
ser nuestro título en nuestra página. Y luego dentro de
estos dos paréntesis, voy a escribir todos. Ese va a ser
nuestro título por ahora. Y ahí
vamos, ahí lo tenemos. Es un poco
diferente al que teníamos antes. Podría querer seguir adelante
y darle un estilo un poco diferente solo para el
propósito de este tutorial. Pero si quisieras
usar materialmente y para diseñar un proyecto más grande, en realidad
puedes saltar a la carpeta de estilos que
viene con
el siguiente JS y luego modificar el tema y trabajar un
poco más en detalle con la tipografía
y qué tamaño o H,
uno es, cuál es el grosor, el peso de
la fuente, y
cosas así Realmente puedes bajar y darle estilo a los componentes
aunque sea una biblioteca de
componentes. Pero por ahora,
sólo voy a acceder a los estilos reales del elemento mismo para modificarlo a la
manera que quiero que se vea. Entonces, para ver con el material I, cada componente de material Y tiene una propiedad especial llamada X. Y X es básicamente
como estilo, como estilo en línea, pero es solo específico
del material Y. Así que vamos a
usar la Prop SX, y en realidad voy a
establecer el tamaño de fuente para que sea, digamos tres Ram, tal vez cuatro. Después estableceremos el peso de la fuente. Pienso alrededor de 500. Bien, genial. A mi me queda bastante bien
. Sigamos adelante. Entonces, lo siguiente que
queremos hacer ahora, bien, nosotros, mirando
hacia atrás en nuestra aplicación To Do, queremos considerar esta entrada, el botón Enviar, y lo
real para hacer ellos mismos. Así que voy a empezar por crear el Todos y
luego trabajar nuestro camino de regreso, saltando de nuevo a nuestra aplicación y de hecho voy a establecer
esto en tres Rams para que coincida con el diseño el ejemplo
un poco más Vamos a crear
otro componente, call to do item. Vamos a usar lo
mismo, R AFC, y ahí va a exportar
nuestro componente Y entonces estamos, en lugar de
importarlo de inmediato, voy a
crear realmente algunos datos simulados. Así que voy a ir simulacro
constante para hacer entonces solo
voy a
crear una matriz de cadenas, ese
será nuestro simulacro. Para hacerlo hacer uno, hacer dos, y hacer tres. Y
vamos a salvar eso. Y lo que voy a hacer
debajo de la tipografía ahora
voy a simular datos e
importar nuestro artículo para hacer Entonces voy a, usando
estos corchetes nacarados, voy a tomar nuestro simulacro para hacer y voy
a mapear sobre ellos. Entonces, si recuerdas correctamente, ese mapa es una función que podemos usar en
matrices para permitirnos
iterar sobre
los objetos o los elementos una matriz y luego
extenderlos
y hacer una especie de nuestra
acción repetible en cada uno de ellos y hacer una especie de nuestra
acción repetible en cada uno de Entonces vamos a
mapear sobre cada uno de los tos y lo que queremos hacer, porque los mapas tienen
que tener un retorno, vamos a volver a hacer ítem, vamos a decir eso. Ahora me está dando un aire aquí. Dice que me falta la clave Prop porque con los mapas
se necesita tener
una clave para que cada ítem sea identificable de
forma independiente. Entonces lo que vamos a
hacer es que vamos a poner la clave para ser el To do, porque sabemos que nuestro
to Dos son únicos. Esto va a funcionar. Pero querrás
configurarlo en un ID único, lo que haremos en el futuro. Lo siguiente que vamos
a querer hacer aquí, así que nosotros, aunque veas a
la derecha aquí, los artículos para hacer se han poblado
por el número de veces. Entonces los Mac a Dos están presentes.
Entonces hay tres por hacer. Hay de tres a dos
elementos. Sin embargo, en realidad
no han
poblado con los datos. Y eso es porque no
pudimos pasar los datos al componente
real para hacerlo. Entonces sigamos adelante y hagamos eso. Volviendo al ítem do, lo que vamos a
hacer aquí y aquí es donde Javascript
y los tipos de scripts empiezan a diferir un poco. Si estás familiarizado con
el Javascript reaccionante, sabrás que
puedes crear un prop para hacer y luego pasarlo a tu componente
real. Pero lo que no verías en el
guión de trabajo es este
error que estoy recibiendo. Por lo que dice elemento vinculante para
hacer implícitamente tiene cualquier tipo. Y eso es porque no
hemos especificado el tipo de para hacerlo. Al igual que en Javascript, todo tiene un tipo, ¿no? Todo en el tipo
script tiene un tipo. Pero en el script tipo, quieren que
definas o
declares explícitamente ese tipo
para que
no haya confusión sobre
lo que se está pasando, dónde se está
pasando, etcétera Entonces, una forma de
hacer esto en el tipo script es crear algo llamado
interfaz de interfaz. Y puedes llamarlo como
quieras, pero nosotros lo vamos
a llamar apoyos Y dentro de esta interfaz
ahora vamos a definir nuestros tipos. Ahora solo tenemos uno, pero podemos agregarle más
según lo necesitemos. Así que vamos a
crear, vamos
a definir que hacer para ser una cadena. vamos a
decir. Y luego fuera de este
corchete aquí, vamos a poner dos puntos. Y vamos a escribir la
palabra props para indicar que estos apoyos deben
aplicarse a estos parámetros Para hacer es el tipo string. Si agregamos algo más aquí, no
tendremos que ir
y agregar más y más apoyos en la línea siete Podríamos simplemente agregarlos en
las líneas 56.7, etcétera. Así que volviendo a hacer artículo, ahora
queremos pasar
el real para hacer. ¿Verdad? Porque sabes
que ahora lo está esperando. Básicamente, sabe que
para hacer artículo se necesita un hacer. Entonces necesita que
usemos realmente esa propiedad en particular, que es una de
las grandes cosas de la mecanografía No vas a cometer este
tipo de errores. Como si esto fuera Javascript
y nunca
pasáramos a hacer, podríamos estar preguntándonos por qué nuestro
hacer nunca está poblado, pero debido a
que es tipo script, nos va a dar este error ya que estamos escribiendo nuestro código. Y así no vamos a tener estos como errores
silenciosos fallando
ya que nuestra aplicación se está ejecutando. Entonces todo lo que tenemos
que hacer aquí es escribir la propiedad para hacer y luego pasar el para hacer y guardar eso. Y ahí tienes.
Tenemos nuestro que hacer uno, hacer dos, y hacer tres, y así como lo hemos escrito en nuestro simulacro para que
sepamos que estamos pasando los datos correctos. Impresionante. Lo siguiente que
vamos a querer hacer es que
realmente vamos a querer empezar a darle
estilo a esto, bien. Porque tenemos algunas cosas que queremos que se hagan aquí. Queremos tener una
pequeña casilla de verificación, queremos tener un
pequeño botón de borrar Queremos tener este fondo
gris. Ya sabes, un par de cosas que
queremos lograr. Entonces, si nos dirigimos a hacer ítem, podemos comenzar a alcanzarlo. Entonces dentro de esto para hacer, lo primero que quiero hacer supongo es establecer ese fondo. Entonces déjame agarrar un color aquí. Entonces hagamos un RG, un color, vayamos a la
imagen en color aquí y escojamos una especie de
gris claro para nuestro fondo Voy a hacer esto y luego simplemente lo
configuraremos como el
fondo de nuestra inmersión usando ese estilo de color de
fondo. Vamos a ponérselo
a eso. Vamos a guardar esa ayuda por aquí. Genial, tenemos nuestro color
de fondo. Lo siguiente que
vamos a querer hacer es que probablemente vamos
a querer agregar algo de espaciado debajo ellos y luego agregar ese radio de
borde nuevamente. Entonces voy a agregar esto haciendo un margen inferior de
digamos un Ram. De esa manera
se agrega a cada nuevo que hacer eso ,
tendremos ese espaciado. Y luego vamos
a añadir también, um, el radio del borde de, vamos a hacer 0.25 Ram. Y decir que lo último vamos
a querer hacer aquí ahora es agregar algo de relleno solo para que haya un poco
más de espacio a nuestro alrededor para hacer. Así que agrega el relleno y vamos a hacer tal vez un Ram
también, solo por todas partes. Bien, genial. Entonces eso
se ve bastante decente por ahora. Lo siguiente que creo que
vamos a querer abordar son los
elementos reales dentro, ¿verdad? Queremos tener esa casilla de verificación y queremos tener
ese bote de basura Creo que la forma
más fácil de agarrar la casilla de verificación, probablemente
estaremos usando la casilla de verificación de
material. Sí, solo queremos algo
realmente básico como esto. Queremos que se desmarque
al principio y luego se marque a medida que lo usamos. De hecho, podemos simplemente
copiar esta línea de texto aquí mismo
e incluirla. Antes de que podamos predoblarlo, sacaremos esta
pieza que está etiquetada aquí por cómo
quieren etiquetarla. Si queremos incluir una
etiqueta con la casilla de verificación, podemos, pero vamos
a darle estilo por separado Entonces vamos
a agregar esa importación desde maduramente por casilla de verificación Entonces ifa por aquí
tenemos que hacerlo increíble. Otra cosa que podemos hacer es envolver arte para hacer en un elemento
tipográfico ya que
es un elemento tipografía es un elemento Y guarda eso, genial. Entonces queremos
agregar un bote de basura. No estoy seguro si
tienen un ícono de bote de basura, pero si lo hacen, eso
sería genial. Vamos a probar la basura. Impresionante, sí
tienen un icono de eliminar, hecho
podemos acceder a esto. Podemos copiar eso. Usa eso en nuestros componentes, me pregunto si. Sí, y podemos cambiar
el color, lo cual es genial. Sigamos adelante y
solo dejaremos esto, lo siento. Dejaremos caer el ícono
en nuestro proyecto aquí. Y luego simplemente
llamaremos a eliminar icono aquí. Que el genial, tenemos
nuestro ícono de eliminar aquí. Y entonces deberíamos poder
establecer el color en él. Entonces, si escribimos en
color y lo ponemos, creo que probablemente va
a ser peligro o error. Probablemente el error debería
ser el color rojo. Si guardamos eso, genial. Tenemos un bote de basura rojo. Impresionante.
Sin embargo, notarás que todos estos bajan directamente
en línea recta, lo cual no es lo ideal. Lo que queremos
hacer para arreglar eso es que en realidad
vamos a
configurarlo básicamente para que esté en una caja flexible transversal y luego los
separaremos de ahí. Entonces vamos a crear una inmersión que envuelva alrededor de
la casilla de verificación en topografía Porque si recuerda
de nuestro ejemplo, queremos que se queden
en el lado izquierdo y que el delete
esté a la derecha. Entonces vamos a
hacer esto más grande de un tipo flex box en display. Configura para flexionar eso. Lo mismo aquí, vamos a agregar ese prop, digamos que también estamos alineando elementos en el centro porque ahí están un poco torcidos Y aquí vamos a
hacer lo mismo Genial, todo se
ve bastante bien. Lo último que
vamos a querer hacer es establecer esta inmersión superior en el
contenido que se va a espaciar entre ellos. Queremos que básicamente este div y este icono de eliminar
estén lo más separados posible. Y una cosa que nos
va a ayudar en
esto en realidad es
establecer un mínimo con este contenedor exterior porque en este
momento no hay mucho espacio
entre ellos. ¿Verdad? Entonces para hacer eso
vamos a ir a nuestro contenedor Para hacer y vamos
a establecer un ancho mínimo,
digamos 40 ancho de vista, uno, si eso,
eso es bastante bueno. Entonces tenemos nuestro Para hacer, los
tenemos poblando
línea por línea Tenemos nuestro encabezado, que en realidad voy a
agregar algo de margen al fondo de un solo Ram. Y tenemos nuestro que hacer, y nuestra casilla de verificación está marcando
y desmarcando, pero ahora mismo ninguno
de nuestros botones o íconos está haciendo Entonces sigamos adelante y
hagamos que hagan cosas. Entonces, lo que también tendremos que
hacer aquí para
permitir esa funcionalidad es envolver nuestro
icono de eliminar en un botón. Así que acabo de importar el
botón del material. Yo, no lo he hecho. Ahora he importado el
botón de la interfaz de usuario material, y ahora en realidad es un botón. Entonces, cuando pasas el mouse sobre él, ves que en realidad
se convierte en un botón. Ahí hay un pequeño estado de
hover, así que estamos seguros de que es
un botón esencialmente Bien, entonces la otra cosa vamos
a necesitar hacer ahora, bien, como en lugar de
usar estos datos simulados, en realidad
vamos a querer usar datos reales en algún momento. Entonces, para poder
ingresar realmente los datos reales, vamos a necesitar
una entrada, ¿verdad? Así que sigamos adelante y
creamos nuestro insumo. Lo vamos a crear aquí
mismo en este
nuevo contenedor. Yo creo, creo material. Tengo entrada de texto. Opción de entrada de texto. Campo de texto de mayo. Sí, es un campo de texto
y creo que queremos igual que el campo de texto
esbozado realmente básico. Entonces nuevamente, solo voy a copiar la primera línea de
las opciones aquí, la documentación, y
pegarla en nuestro proyecto. Y solo voy a
hacer una solución rápida para
poder importar el campo de texto. Y si volvemos tripulación,
genial, está ahí. Pero entonces también necesitamos un botón. Así que vamos a seguir adelante y crear un botón separado simplemente usando
ese mismo componente de botón, y va a
ser un botón Enviar. Genial. Entonces tenemos el botón y el
Enviar uno al lado del otro. De hecho voy a
seguir adelante y envolverlos en una inmersión solo para que estén contenidos, como
todo lo demás. Y luego puedo agregarles
estilo para que las cosas aparezcan como
que quisiéramos con el div. Yo voy a hacer lo
mismo. Voy a poner y hacer que sea una caja flexible. Entonces vamos a
hacer Display Flex. Y ¿encuentras que estás
haciendo el mismo tipo de patrón una y otra vez? Una cosa que podrías hacer es crear algo así como un
componente de estilo que solo sea un contenedor
que
crea automáticamente una caja flexible cada vez. Y luego usa eso en lugar
de usar divs básicos. Eso es algo que quizás
quieras hacer si estás haciendo un proyecto más grande o simplemente estás pensando en optimizaciones Display Flex, agregaremos un
margen inferior de una M. Si, se ve bastante bien. Yo quiero hacer con esto. Bueno, vamos también, lo siento, agreguemos algo de margen al
lado de nuestro insumo ahí. Margen, ¿verdad? Volveremos a hacer una M. Y quiero hacer algo
con este botón aquí para que quede
un poco más de pie. Entonces si voy al
botón LI de contenido, hemos esbozado, tenemos texto. Creo que lo que queremos hacer
es tener un botón contenido. Así que en realidad voy a
agregar este bit aquí que dice variante es igual contenida
a nuestro botón. Vamos a guardar eso. Y ahora ves que tenemos un poco más
de un botón contenido. Pero también notarás que
es muy, muy alto. No sé si queremos que
sea así de alto. Creo que eso podría ser
por nuestra caja flexible. Entonces creo que lo que puedo hacer
aquí es en realidad solo alinear los elementos al
centro y eso debería arreglar la altura extra
de nuestro botón ahí Vamos a probar eso. Di
eso y genial. Sí, ha vuelto a
esta talla normal. Pero sí, me gusta el botón, pero creo que sí quiero mantener un tema similar de
estilo similar en todo el asunto. Entonces, lo que voy a hacer con el botón
aquí es cambiar
el fondo para que
coincida con nuestro grado lineal en hot back over a
nuestro archivo índice TSX Literalmente solo voy a agarrar este color de fondo aquí, copiarlo, regresar a
nuestro elemento botón. Y dentro de la X prop
que voy a añadir aquí, sólo
voy a dejar caer eso
y guardarlo. Ahí vamos. Nuestro botón tiene automáticamente, así que vamos a comentar
esto por un
segundo para que realmente podamos
echarle un vistazo a esto. Era blanco y azul. Y luego cuando,
déjame agregarlo de nuevo. Sigue siendo blanco,
pero sí tiene este gradiente lineal que ahora
funciona bastante bien. Lo siguiente que queremos
abordar es la entrada real. En este momento, la etiqueta
dice esbozado. Cambiemos eso. Entonces es un
poco más rápido. Digamos a lo mejor, agrega
nuevo punto y guarda eso.
10. Agregar estado global: Lo siguiente que vamos a
querer hacer aquí es en realidad básicamente asegurarnos de que nuestros To Dos estén viviendo en
alguna herramienta de gestión estatal. Vamos a querer considerar algo como Redox o Z. Stand personalmente,
creo que Redux podría tener un poco
demasiado repetitivo para este proyecto en este Porque en realidad es solo
una app muy sencilla de hacer. No tenemos muchas acciones
complejas de UI. Creo que solo un simple usar un en su lugar podría
ser el camino a seguir. Si buscamos la
documentación para el stand, podemos averiguar cómo
instalarlo y hacer que funcione. Es como un sistema de
gestión estatal más simple realmente. Entonces vamos a seguir adelante
e instalar stand en nuestro proyecto
que ahora que está instalado, vamos a seguir adelante y voy a crear una nueva carpeta aquí y voy
a llamarla store. Entonces, si nunca antes has trabajado
con la tienda, básicamente es solo
un lugar donde tú, tu estado esencialmente
vive en ella. pocas palabras, esta tienda la voy
a crear llamada index y aquí es donde está nuestra tienda. Este va a
ser nuestro archivo de tienda. Mirando su
documentación aquí. Básicamente usa esto para
crear realmente nuestro componente. Entonces voy a poner eso
ahí y luego podemos seguir
adelante y modificarlo para que se
ajuste a lo que estamos haciendo. Entonces lo que esto hace aquí, así importa esta función
crear desde z stand. Y creamos una variable aquí llamada store, que
llama create. Y entonces básicamente
esta es en realidad nuestra tienda aquí.
Crea nuestra tienda. Los osos en este caso
en realidad van a
cambiar para ser todos. Va a ser una
matriz vacía para empezar. Cuando vayamos a acceder a nuestros todos, aquí es donde
van a estar viviendo. Simplemente, seguiremos adelante
y agregaremos esto a nuestro entorno de espacio de
trabajo. Así que ve a por eso.
Son. Todo bien. Entonces, en lugar de
aumentar la población, en realidad
vamos a querer crear algo llamado agregar a. Esto solo va a
ser lo que sucede cuando
pulsamos Enviar y agrega nuestro
To do a la lista de cosas. Vamos a establecer el estado
en lugar de osos va a
ser a lo que sea el estado
actual de hacer en lugar de más
uno que vamos a hacer, tal vez
tengamos que ponerlo, envolverlo en una matriz, lo siento. Vamos a hacer
cualquiera que sea el estado de a lo que fuera la
matriz anterior y luego más el nuevo para hacerlo en lugar
de estado más el nuevo oh, lo siento, ese era el
lugar equivocado al que realmente vamos a pasar para hacer y más
lo nuevo que hacer. Voy a decir que
aquí me están dando algunos errores porque de nuevo, los tipos necesitamos poner los tipos correctos
en este proyecto para que
funcione correctamente. Entonces, de hecho, voy
a crear un tipo más y voy a crear una carpeta
más para el tipo. Entonces voy a crear
una carpeta llamada types. Voy a crear un nuevo archivo, índice S, y ahí
va a ser donde se creen todos
nuestros tipos. De esa manera si creo
un tipo, por ejemplo, no
necesito
recrearlo en cada archivo, crear una interfaz
en cada archivo Solo puedo exportarlo y acceder a él en cada archivo para que
podamos mantener nuestro código seco. Entonces esta es otra
forma de crear un tipo. Voy a crear
el tipo a hacer. Y al igual
que la interfaz, nos permitirá escribir
lo que sea con lo que estemos trabajando. Entonces yo,
pensemos realmente en esto por un segundo
aquí porque esto
va a ser algo
que podemos modificar algunas veces o podemos crear una vez y luego construir
el código alrededor. Entonces, cuando estamos viendo nuestro
ejemplo para hacer app, bien, queremos poder
agregar el To do, ¿verdad? Entonces tiene que tener algún tipo de descripción o lo que sea que
signifique Qué hacer es, como mencionaste antes,
queremos tener una identificación única Entonces esa es también otra propiedad que nuestro hacer debería tener. Entonces queremos como una descripción
y queremos una identificación. Probablemente queramos rastrear si está o no
marcado o no Porque si queremos que
persista cuando la página se recarga. No podemos simplemente tenerlo
en vivo del lado del cliente, ¿verdad? Necesita vivir en alguna parte
de la tienda. Eso no va a cambiar
de recarga a recarga. Y luego finalmente
queremos poder eliminarlos. Así que de nuevo, eliminar tipo de
vidas con esa capacidad de identificación. Para eliminar
lo específico a hacer, es bueno que tenga una identificación. Entonces creo que hemos establecido una especie de tres cosas que hacer. Debe tener o tres propiedades. Le vamos a dar
una propiedad ID, que probablemente será una cadena. Probablemente vamos
a hacerlo, lo siento, probab lo vamos
a hacer un UUID Probablemente le vamos a
dar una descripción. También va a ser una cuerda. Por último, le vamos a
dar una propiedad comprobada. Entonces, ya sea que se revise o no, y eso va
a ser un bolling. Entonces un verdadero o un falso. Permítanme seguir adelante y exportar este tipo para que podamos
acceder a él en otros lugares. Y luego lo voy a
importar aquí. A ver. Creo que en realidad podemos,
oh, ya sabes lo que es. Necesito crear otra, sí necesito crear
una interfaz más, pero esto es solo para la tienda, así que necesito crear
un tipo para hacer tienda. Básicamente eso nos va a
dar todas estas opciones. Y vamos a cambiar esto, pero eliminar a Do,
básicamente necesitamos definir
qué tipos son estos. Va a ser una matriz para hacer. Array van a importar
el para hacer de tipos. Una matriz de Todd para hacer va a ser una función
que tome en do, que es del tipo string En realidad sabes
qué, esto no lo es, esto probablemente va
a ser descripción. Entonces vamos a cambiar eso. Lo cambiaremos aquí. Y ahí lo
cambiaremos. Lo guardaremos, luego regresaremos, y luego el final aquí. O quizá probablemente
vamos a tener dos más. Entonces vamos a hacer eliminar para hacerlo así que esa va
a ser nuestra eliminación. Vamos a tomar en un
ID que es de tipo cadena y tratar de funcionar. Y luego, sí, así que
vamos a cambiar esto para eliminar. Para ello sabemos que
eso es lo que se supone que se acomoden por
el momento. Bien, entonces estamos
recibiendo un error aquí. Ah, porque no hemos
aplicado nuestra tienda para actuar como nuestro estado a nuestra
tienda con script tipo. Depende como a
dónde vayan las cosas. Pero por lo general
puedes ponerlo algo así como justo por la función aquí. Al igual que cuando estás
creando un efecto de uso, lo
pones justo
después de las palabras use effect, pero justo antes
del corchete abierto. Entonces creo que puedo ponerlo aquí
mismo después de crear. Entonces voy a hacerlo,
porque básicamente es un gancho. Entonces voy a
escribir en Do store, voy a cerrar
el soporte y voy a
guardarlo y luego genial. Bien, los es han cambiado. Dice que me faltan las
siguientes propiedades. Agregar a hacer. Oh, ¿sabes qué? Eso es solo porque lo he
escrito de otra manera. Déjame hacerlo para
hacer todo minúsculas. Sólo estaba diciendo que me falta quitado para hacerlo.
Vamos a crear eso. Entonces vamos a hacer tomado una identificación y no va a
devolver nada por ahora. Oh, no, eso no le gusta. No. En realidad, déjame arreglar, bien, déjame arreglar dos problemas. Voy a
arreglar este anuncio para hacer. Lo que vamos a
hacer aquí es que creo, oh, ¿sabes qué? Bueno, es
un par de cosas diferentes. Un par de errores difieren
que estamos llegando aquí. Entonces el operador spread
realmente necesita suceder en estado para hacerlo, tal vez no lo volvamos a poner en
una matriz. ¿Eso lo arreglará? Ahora, haz estado. adelante y
terminemos de crear nuestro removido para hacer y luego
podemos abordar este otro er, solo
voy a copiar
esto y pegarlo. La forma en que vamos a
averiguar cuál hacer, estamos quitando para
acceder básicamente a todos nuestros que
hacer y queremos filtrarlos para
que hagan eso que ya no estamos usando. Todo bien. Hacer que ya
no queremos hacer se convertirá en
lo que sea que hacer. Un estado para filtrar para lo que haga
filtro para el estado ID Filtro Dom Dodd. Ford se da mainer me falta otro soporte
aquí dicho filtro Ford Queremos,
busquemos filtro. Bien. Vamos a
un filtro derecho para no igualar al DID. Eso debería funcionar. Vamos a averiguar por qué estos errores
están ocurriendo ahora. Muy bien, así que mirando esto, eliminado para hacer
falta en tipo para hacer. Nunca agregar para hacer, pero se requiere
en tipo para hacer cosa de tienda. Oh, ¿es ese el único
error al llegar aquí? Claro. Todas mis comas están
en el lugar correcto Despeje, quitado para hacer,
de ambos. Echemos un vistazo solo
al anuncio para hacer errores. Veamos qué está pasando aquí. Es para despejar pero nunca establecer. Entonces solo un pequeño
error aquí es que en realidad solo necesitamos
probablemente eliminar estos corchetes. Y luego en lugar de simplemente
pasar la descripción, lo
que realmente queremos hacer es crear una nueva que hacer, ¿verdad? Así que en realidad
queremos crear un ID, ID
único, que
será una cadena. Y luego vamos a
crear la descripción, que solo será
la descripción. Y luego también vamos
a agregar un estado de cheque. Entonces se va a verificar y va a
comenzar como falso. Entonces el estado check, ahora no podemos simplemente pasar una cadena
vacía por cada ID. En realidad vamos a
querer un identificador único. Y para eso
probablemente vamos a usar como una biblioteca UUID, que NPM tiene al menos una Vamos a usar
este UID y básicamente nos va a permitir crear ID únicos
para nuestro proyecto Entonces solo lo voy
a instalar aquí. Y luego lo voy a importar en nuestra tormenta y salvar eso. Ah, y sabes
qué, creo que sí
necesito instalar y guardar a Deb Creo que a
veces me sale este error. Bien, genial. Y entonces si todo lo demás falla, solo ciérralo y
ábrelo de nuevo. Y a veces
solo aclara el aire. Oh, vamos a darme una sugerencia
aquí, déjame probar eso. Renuncia, vuelve en más tiempo. Todo bien. Se
corrige el error perfecto. Bien, entonces
queremos, eso debería funcionar. Y luego en vez de
pasar una cadena vacía, creo que lo que
sugieren aquí es que nosotros solo, sí, solo llamamos UID
cuando lo necesitamos Entonces ID antes y
luego solo
lo llamaremos y eso debería crear un ID
único para que nuestro nuevo lo haga. Impresionante. Entonces creo que estamos prácticamente establecidos
en el frente de identificación. No creo que seamos ninguno para
instalar más paquetes. Trabajamos con el stand Z ahora para acceder
realmente al nuestro y agregarlos a nuestra lista y usarlos
para hacer en lugar de también. Creo que podemos comentar
techo para hacer ahora. Creo que hemos
resuelto el error que estábamos teniendo
que es realmente con el nivel superior al que vamos
a, estamos basados en hacer. Muy bien, tan genial.
Ambos deberían estar funcionando ahora. Optar por volver a hacer el artículo. Vamos a engancharnos a todo ahora y hacer que todo funcione de la
manera que queríamos. Entonces supongo que tenemos que
estar en hacer contenedor, así que queremos que el hacer. Entonces comencemos con
eso. Entonces vamos a agarrar el para hacer. Tan constante de hacer es igual a este gancho aquí
almacenar desde z stand. Y luego queremos agarrar
al estado. Y en el estado los para hacer eso están presentes
en ese estado, ¿verdad? Entonces esa pequeña matriz que
creamos al principio, eso es lo que queremos
agarrar para que podamos hacer estamos aquí D no es bowl, por
eso
que nos está dando ese error en realidad
ocho correctamente. Todo bien. Es solo
un error de tipo que estamos recibiendo porque
Estado tiene cualquier tipo. Creo que hay algunas guías
tipo script que podemos seguir aquí
accediendo a nuestra tienda. ¿Qué no exporté la tienda? Exporta la tienda. Sí, tengo que exportar la tienda. De lo contrario, no podemos usarlo. Ese era el tema. Yo estaba
como, ¿Por qué esto no funciona? Bien, vamos a cerrar esto un poco más de tiempo. Ábrelo de nuevo. Oh, todavía estamos
recibiendo el error. Eso es muy interesante.
¿Qué decía? Tipo, pero está importando
la tienda equivocada. La tienda. En realidad renombrar esto un
poco menos confuso. Entonces vamos a llamar a
esto To Do Store. Y voy a
llamar a Store Store. Importé la tienda equivocada, así que necesito importar
tienda de tienda. Entonces puedo hacer lo
que intentaba hacer. Me preguntaba por
qué no funcionaba. Bien, entonces Estado
será Estado para hacer. Y ya ves cómo escribe script a ready crea como este tipo
de documentación incorporada. Es realmente genial en ese
sentido que puedas simplemente averiguar lo que te estás
perdiendo esencialmente. Bien, así que esto
será nuestro para hacer. Entonces deberíamos tener una
lista de nuestras que hacer. Aún no tenemos nada que hacer, pero aquí será
donde nuestro hacer vivir. Si sigo adelante y cambio
a hacer a dos para hacer, no
deberíamos tener datos porque aún no tenemos
necesidad de hacerlo. Entonces eso en realidad está funcionando. Entonces sabemos o hemos roto
completamente nuestra, nuestra app o, ya sabes, la hemos
cambiado correctamente. Entonces voy a cerrar esto. Aquí me sale un pequeño
error que el tipo de a hacer
no es asignable a hacer Y eso es correcto
porque en realidad To Do, originalmente lo
habíamos
definido como una cadena. Entonces lo que realmente tenemos que
pasar es hacer descripción. Lo mismo con la llave aquí. Necesitamos en lugar de pasar
el objeto de hacer, necesitamos pasar a Dod y
guardar eso, tener esos errores Lo siguiente que
vamos a querer hacer ahora es que vamos
a querer conectar nuestro anuncio para que de hecho
podamos agregar el tod que
vamos a volver a sacar Vamos a estar en nuestro
contenedor para hacer y luego
vamos a agarrar nuestra función
que es ad to do. Entonces vamos a
hacer lo mismo. Usted almacena, almacena,
soporte, estado. Y luego vamos a agarrar anuncio
estatal para hacer.
Vamos a salvar eso. Y entonces lo que vamos
a hacer es que vamos a llamar
a eso cuando se haga clic en el
botón Enviar, ¿verdad Entonces podríamos hacer esto, en realidad
podríamos
hacerlo en Submit. Podemos crear,
podemos convertir esto en un componente de formulario y en realidad podemos crear una función de
controlador para esto Vamos a crear un
manejador llamado Hand Submit. Queremos hacer dos
cosas. pasar en un evento porque
básicamente lo que vamos a terminar teniendo que
hacer es apuntar a esta entrada y como el
valor de esa entrada, así que queremos pasar en caso
del click, cualquier tipo por ahora, que no
es la mejor práctica, pero eso solo va a
deshacernos del error que
estamos a punto de golpear. Así que llame al evento, evite que la página se vuelva a cargar
cada vez que la agreguemos para hacer Lo que vamos a hacer
ahora es llamar a nuestro anuncio para hacer. Entonces entonces vamos
a agregar To Do. Y el hacer eso que estamos agregando va a
estar en ese evento, así que va a ser
el final del evento. Vamos a tener que
apuntarlo, ¿verdad? Por lo que se va a llamar
a este manejador al presentar. En nuestro formulario, tenemos una propiedad
especial llamada a enviar que básicamente
cuando envías el formulario, en realidad
llama a cualquier
función a la que quieras llamar. Entonces nuestro onsubmit va
a ser este mango para hacer. Entonces como resultado de eso, se va a pasar
un evento
a ese asa para hacer. Y así queremos sumar
nuestro objetivo de hacer. Ese evento, va a ser objetivo del
evento porque el formulario envuelve alrededor de múltiples elementos. Va a ser el primer
elemento al que nos dirigimos. Y entonces va a
ser el valor de eso. El valor del elemento va a ser lo que estamos
pasando a nuestro anuncio para hacer, que es la descripción. Sé que probablemente fue
mucho para tomar. Vamos a correr
una vez más. Hemos creado un componente de formulario, hemos utilizado el elemento form. El elemento form tiene una propiedad
incorporada llamada a enviar cada vez que se
envía su formulario, eso es lo que sucede. Creamos esta función
llamada manejado para hacer, lo que evita que default
lo que impide que la página vuelva
a cargar cuando presionamos el botón
Enviar o
enviar el formulario Y luego también agrega son para hacer. El anuncio a hacer va a
tomar esa descripción, ese valor de la entrada, y luego lo va
a enviar a nuestra tienda y darnos que hacer. Se va a crear un
que ver con una nueva identificación y el estado de verificación de fallas
que debería funcionar prácticamente. Lo último que
vamos a querer hacer antes de seguir adelante y agregar necesidad de hacer es agregar
el tipo a nuestro botón. Entonces quieres que el botón
sea de tipo enviar. Hay dos formas de
presentar esto ahora mismo. Puedes presionar Enter cuando añades tu valor, o
puedes presionar Enviar. Queremos asegurarnos de que
ambos estén funcionando correctamente. Entonces ahora el botón
es escribir Enviar. El formulario sabe que oye,
cuando presionan este botón, quieren enviar y
debería funcionar en consecuencia. Lo que
vamos a hacer es probarlo. Entonces sigamos adelante
y agreguemos qué hacer y ver si aparece. Se presentó.
Tenemos nuestro primero que hacer y nuestro anuncio está funcionando correctamente. Lo que vamos a
querer hacer ahora es que nuestro remove funcione correctamente.
Entonces eso es muy similar. Solo vamos a tener que
hacerlo dentro de nuestro componente
para hacer item. Así que saltando a hacer
artículo va a seguir adelante y vamos a
agregarlo a nuestro botón aquí Vamos a agregarlo al botón de
borrar que
hemos creado. Entonces lo primero es lo
primero que tenemos que hacer. Entonces esto se va a
quitar para hacer. Se retira para hacer almacenar nuestra tienda. Vamos a agarrar
al Estado y luego vamos a hacer
Estado. Quitar para hacer. Impresionante. Correctamente eliminado
para hacer toma un ID, así que vamos a querer
agarrar lo que sea el Dos ID que podamos eliminar el correcto que hacer
con el botón. Ahora vamos a decir al hacer
clic para eliminar. Queremos llamar remove to Do. Entonces queremos pasarlo
a Hacer y guardar eso. En realidad, me va a dar un pequeño error porque cometí un pequeño error en
el contenedor para hacer. De hecho cometí el error
de pasar a hacer descripción. No queremos hacer eso.
Queremos pasar el hoyo para hacer. Voy a dar
esto para hacer el tipo de que hacer desde nuestra carpeta de tipos. Esa fue otra buena razón por que
deberíamos haber
pasado nuestras cuotas. Entonces
te va a dar otro error aquí porque es como si todas estas
cosas se estuvieran rompiendo ahora. Estamos, solo
vamos a acceder a la descripción y todos
nuestros errores deben estar hechos. Ahora de nuevo, esta es otra buena razón por la que existe el script de
tipo. Al igual que aunque pueda
parecer un poco molesto tener que resolver
estos errores todo el tiempo, si no resolvemos el error, ahora
pasaríamos
unos minutos tratando de
depurar por qué el error está
ocurriendo incluso con el script Java. Porque no hay
manera de saber que nuestro proyecto está fallando silenciosamente Si hemos hecho
todo correctamente, hemos conectado nuestra mudanza para hacer, hemos pasado a hacer a ID. Agreguemos un segundo para hacer, solo para estar seguros si lo eliminamos, que es el
correcto que estamos borrando. Y sigamos adelante e
intentemos eliminar para hacer. Nadie funcionó a la perfección. Así que ahora somos capaces de agregar para hacer, somos capaces de eliminar does. Lo último que
queremos hacer es probablemente sólo, creo, perdón. Las dos últimas cosas que
queremos hacer son poder rastrear
el estado de verificación. Y entonces si notas cuando
refresque esta página, persista. Entonces queremos
asegurarnos de que nuestra T esté persistiendo, la estamos usando. Abordar eso primero.
Abordemos la persistencia primero Para abordar la persistencia,
vamos a utilizar el middleware que se
incluye con Entonces lo que vamos a hacer aquí es que
vamos a importar, vamos a
importar herramientas de profundidad y vamos a
importar persisten. Y como puedes ver
aquí, todo lo que han hecho es simplemente
envolver su aplicación, envolver su tienda en herramientas en
profundidad y persistir. Y eso solo
permitirá persistir. Esto hace esto por creo, guardarlo en almacenamiento local. Se guardará en tu navegador almacenamiento
local y luego cada
vez que lo vuelvas a girar, deberías poder
acceder a los mismos valores. Si tuviera que configurarlo
en el almacenamiento de la sesión, entonces cada vez que su
sesión expirara, entonces podría
acceder a esos valores nuevamente. Adelante y simplemente
envuelve nuestra aplicación en esto. Ponlo aquí, Ups, agarra a estos dos ahí Y entonces queremos llamar a
set power function. También estoy cometiendo un error aquí. Necesito quitar
este soporte aquí. Y entonces todo esto
debería subir
al salvo que creo que
tengo un par más. Un par de demasiados, un par
muy pocos soportes, dos más. Guarde eso. Todavía estamos
recibiendo un error. Necesito pasar las opciones. Ese es mi bate. Como ves aquí, persiste el estado real con el
que estás trabajando y luego crea algo para nombrarlo. Eso es porque cuando
miras en tu aplicación, en tus de tools,
cuando
inspeccionas, en realidad verás un nombre
presente para tu tienda. Entonces vamos a seguir adelante
y darle un nombre como segundo argumento
a hacer. Y guarda eso. Ponlo dentro del soporte derecho. ¿He añadido uno? No, no, no. Lo he puesto
dentro de los paréntesis equivocados. Eso es lo que es aquí. Persistir no es asignable
a un tipo para hacer tienda. ¿Por qué se establece un pase aquí? Ese es el problema. Así que solo necesito sacar esto, eso y luego eso
realmente se deshará de nuestro, el
problema de soporte adicional que estamos teniendo. Entonces era solo una flecha
extra que no necesitaba estar ahí
en un parámetro extra. Entonces sí, ahora que hemos
configurado persisten. Entonces, si lo hemos hecho correctamente, volvemos a nuestra aplicación. Dale un poco de refresco ahí. Agregar a hacer refrescar la ración de página para
arreglar esa hidratación. Lo que básicamente está
diciendo esa hidratación es como
lo que sea que construya
no es necesariamente lo que estamos
obteniendo que estamos persistiendo. Es como diferente cada
vez. Lo cual es bastante justo. Entonces, lo que podemos hacer para arreglar esa hidratación en
realidad es simplemente ejecutar un simple efecto de uso seguro de
que lo que estamos viendo, es como una
página de carga solo para asegurar que se cargue
lo correcto. Entonces lo que vamos
a hacer, vamos a correr aquí en nuestra página de índice y sólo
vamos
a crear cargado. El conjunto está cargado. A realmente simple de reaccionar. Y aquí sólo vamos a
llamar al efecto de uso. Pero correr una vez y luego una vez que se ejecuta sólo vamos a
establecer se carga a true. Entonces básicamente
va a ver que, ya
sabes, la página está cargada. Va a ver con
qué datos estamos trabajando y luego
va a ser verdad. Lo que queremos hacer ahora es simplemente mostrar esto para hacer contenedor solo cuando se carga es
verdadero correctamente. No debemos obtener ningún error. No, estamos durmiendo en ella. ¿Por qué lo hacía antes? Esa es mi apuesta. Yo solo se lo dije a lo equivocado más tiempo. Sin errores de efecto de uso,
sin errores de hidratación. Entonces pasemos
a la siguiente pieza. Bien, entonces la pieza
final que queremos hacer es tratar con
nuestro estado de cheques, ¿verdad? Queremos asegurarnos de que cuando
se marque y nos refresquemos, en realidad
se quede verificado. En este momento, es solo que siempre son
incumplimientos por defecto. Entonces, lo que tenemos que hacer
para eso es
establecer el estado de verificación
dentro del estado. Cuando se comprueba,
lo pasa
al estado y eso persiste
como parte del estado Entonces, lo que vamos a hacer ahora
es volver al índice. Y aquí vamos a agregar
una acción final. La acción de alternar marcada, tomar en el ID de lo que sea que
hacer estamos trabajando con. Y entonces va a seguir la misma estructura
donde se establece, hace algunas cosas más. Entonces lo
vamos a sumar aquí para que no nos comunique el toggle de error que es básicamente lo
mismo que eliminado. Para hacer en lo que respecta al script de texto
es igual a la cadena. Entonces, qué queremos hacer
aquí ahora, veamos. Queremos averiguar
cuál de los dos está
marcado o desmarcado Eso bien, vamos, sigamos
adelante y llevemos nuestro estado punto a punto
para hacer sobre cada uno para hacer. ¿Todo bien? Y si eso para hacer, ¿queremos hacer
una de dos cosas Si lo hace igual a
ID, quiere devolver, quiere devolver
lo que sea el que hacer es. Entonces queremos devolver
el ID y
queremos devolver la descripción. Pero queremos establecer el para hacer
lo que sea que no fuera a hacer. Sólo tiene que ser
lo contrario de lo que era. Entonces se comprobó,
debería estar desmarcado. Si estaba desmarcado,
se debe verificar. Si ese no es el caso, solo
queremos volver a hacer. Yo cometí un error. Sólo queremos establecer comprobado
porque ya sabemos que es hacer para ser para hacer
comprobado dos argumentos. Tenemos uno para poner
esto en la zona equivocada, probablemente por eso
me está dando un error. Oh, no. Sí, y trabajar si
digo que sí, eso debería funcionar. Bien, genial. Así que
hemos tomado nuestro, hemos pasado por y
hemos mapeado a través nuestro Do para agarrar al
individuo para hacer. Y estamos comprobando
cada uno de esos que hacer, así que queremos ver si
el DNI de ese Para hacer. Id ID propiedad del Para hacer. Coincide con la identificación que
estamos pasando. Cuando comprobamos que duplicando el cheque, si coincide Entonces sí queremos pasar el
resto del parámetro para hacer, pero luego para el parámetro
check
queremos pasar lo
contrario de lo que era. Entonces, sea cual sea el parámetro
check, queremos pasar,
ya sabes, si era cierto queremos pasar
caídas, etcétera Si no coincide con
todos los otros dos Dos, solo
queremos pasar
eso para hacer y seguir adelante. Y así el camino así entonces vamos a realmente simplemente
seguir adelante y probar esto. Así que voy a volver
a hacer item y luego voy a pasar en Target, la
palanca marcada. Voy a usar la
tienda una vez más fecha. Hacer alternar marcado,
guárdalo en la casilla de verificación. click solo quiero pasar
en linea voy a alternar, checar, checar, y
luego voy a pasar en el Todd y guardar eso Eso debería funcionar. Entonces si reviso esta página y
actualizo la página, una cosa
más tengo que hacer. En realidad tengo que acceder a la propiedad marcada
en la casilla porque en este momento la casilla no sabe si se supone que debe ser marcada o no ¿Verdad? Estamos como una especie de asumir que lo sabría.
No tiene forma de saberlo. Entonces lo que vamos
a hacer aquí es acceder a la propiedad comprobada. La propiedad comprobada en realidad
va a ser lo que tenga que hacer, checada es, así que eso es
si
debe verificarse o no. Entonces si actualizo, si lo
reviso y luego
actualizo es check state. Impresionante. Voy a hacer un pequeño
retoque más con los estilos justo ahora que tenemos acceso a este
prop en la Si está marcada, quiero hacer un par de estilos
diferentes. Entonces quiero cambiar el color para que quede un poco
más graduada. Entonces es algo así como,
oh, hemos hecho esto, es como que ya no necesita
ser tan prominente. Entonces quiero cambiar el
color del Para hacer. Si hacer comprobado
cambiar el color. A lo mejor algo un
poco
más oscuro que esto, tal vez eso. Y luego lo pasaremos. Queremos que el color
sea lo que estaba destinado a ser, así que solo pasaremos un auto. Sí, ¿te refieres a
marcar sin marcar? Fresco. Lo siguiente que quiero hacer es agregar un strike through. Literalmente llamándolo
a través de nuestra lista, listo para eso es la línea de
decoración de texto a través. Voy a hacer la misma comprobación. Voy a decir en es la
propiedad a la que estoy apuntando, si a hacer se comprueba. Lo siento pregunta, quiero que
sea una línea a través. Si solo quiero no tener un chequeo de decoración de
texto, marca una línea a través. Impresionante. Entonces sí, prácticamente
tenemos
todo nuestro trabajo de aplicación para hacer. Como mencioné antes, en realidad se
puede ver dónde está viviendo la tienda
para esto. Si revisas la aplicación
necesitas almacenamiento local aquí, puedes ver que en realidad
tenemos o para hacer almacenar aquí. Entonces tenemos nuestro estado. Déjame mencionar esto
un poco. Entonces tenemos nuestro estado
que tenemos que hacer. Tienen sus identificaciones únicas, bueno, solo las 12,
pero tiene una identificación única. Tiene la propiedad comprobada de true y tiene la
descripción de hacer. Si lo desmarcamos,
verá que cambia y que el
hacer ya no tiene
esa verdadera propiedad Tiene una propiedad falsa ahora, tiene la descripción que hacer
y tiene la misma identificación. Entonces sí, nuestra aplicación para hacer
está completamente funcionando. Lo único que queda por
hacer es tal vez alojarlo. Pero podemos cubrir eso
en una lección diferente sobre cómo
alojarlo usando Verselle Siguiente S y Verselle
en realidad están conectados. Creo que Versell creó la siguiente S, así alojada usando sell Pero vamos a cubrir eso
en una lección diferente. Entonces sí, ojalá esto
te sea de utilidad. Si tiene alguna
duda, por favor
deje un comentario en la sección de
comentarios a continuación. Si disfrutas de esta lección, por favor deja una
reseña también. Realmente ayuda, algo así como poner a la superficie esto a otras personas que quieran tomar el curso
11. CONCLUSIÓN: Conclusión, hablamos
mucho en este video desde los orígenes de reaccionar
hasta construir tu propia aplicación completamente funcional para
hacer la aplicación usando el siguiente JS. futuro,
deberías poder
abordar cualquier proyecto de reacción
que se te presente. Incluso cosas con tipo script
para buscar algo cuando no
estás seguro e ir al desbordamiento de
pila según sea necesario Me encantaría ver cómo decidiste
implementar tu aplicación Do. Así que por favor pon el 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, 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. Me encanta ver lo
que ustedes tienen que decir. Consulte la página para
obtener más información sobre eso, Conozca más sobre la codificación. Consulta los otros videos
que tengo en mi página de perfil. También tengo videos en HTML y CSS disponibles en mi
canal de Youtube y sitio web. Los vincularé a continuación y en mi perfil si estás interesado en aprenderlos también, y los veré en el siguiente.
Zoë Davidson, Software Engineer & Cinematographer
