🚀 TODO lo que me hubiera gustado que me hubieran EXPLICADO cuando EMPECÉ con REACT

Summary

El script aborda el tema de React y los desafíos que enfrentan los desarrolladores que provienen de JavaScript. Se discuten problemas comunes, como la dificultad para dejar atrás prácticas de JavaScript al trabajar con React, y se ofrecen consejos sobre cómo abordar la manipulación del DOM, el uso de estados y la creación de componentes. El presentador comparte su experiencia personal y da un vistazo a conceptos clave como el uso de map, filter y spread en React, subrayando la importancia de la práctica y la adaptación al enfoque de React para superar los errores y mejorar en el desarrollo de aplicaciones.

Takeaways

• 😀 Los desarrolladores con experiencia en JavaScript pueden encontrar dificultades al aprender React debido a diferencias en el enfoque y prácticas.
• 🔍 En React, no se utilizan selectores de JavaScript como `querySelector` para seleccionar elementos del DOM, sino que se prefiere el uso de `useState` y otros hooks.
• 🛠 No se pueden modificar directamente los elementos del DOM en React; en su lugar, se deben realizar cambios a través del estado (state) utilizando funciones como `setState`.
• 🎨 La manipulación de estilos y contenido en React se realiza a través del estado, lo que significa que cualquier cambio en el contenido o estilo debe reflejarse en una variable de estado.
• ♻️ En lugar de bucles como `for` o `forEach` en JavaScript, React utiliza `map` para iterar sobre arrays y renderizar componentes.
• 📋 El uso de condiciones en React se maneja con operadores ternarios en lugar de estructuras de control como `if` o `switch` dentro del JSX.
• 🚫 No se pueden utilizar métodos de mutación de arrays como `splice`, `push` o `pop` en el estado de React; se recomienda el uso de `filter` y otras funciones para clonar y modificar arrays.
• 🔄 El estado en React es inmutable; para actualizarlo, se deben crear nuevas copias de los objetos o arrays y utilizar funciones como `setEstado`.
• 🔑 El atributo `key` en React es crucial para identificar elementos en listas y evitar problemas de renderización; suele utilizarse el ID único de cada elemento.
• 🛑 La práctica es fundamental para dominar React; los errores son parte del aprendizaje y ayudan a comprender mejor las diferencias con JavaScript convencional.

Q & A

¿Cuál es el principal problema que enfrenta la gente que viene de JavaScript al trabajar con React?

El principal problema es que a menudo se intenta hacer las cosas con un enfoque de JavaScript en lugar de adaptarse al enfoque de React, lo que puede llevar a errores y frustración.

¿Por qué no se deben utilizar selectores de JavaScript como `querySelector` o `getElementById` en React?

En React, no se manipula el DOM directamente. En su lugar, se utiliza un estado interno y se renderiza el componente de acuerdo con ese estado, por lo que no es necesario seleccionar elementos del DOM.

¿Cómo se debe modificar el contenido o la propiedad de un elemento en React si no se puede hacer directamente como en JavaScript?

En React, se deben utilizar variables de estado (state) para controlar el contenido y las propiedades de los elementos. Al modificar estas variables, el componente se actualizará automáticamente para reflejar los cambios.

¿Qué es 'setState' en React y cómo se relaciona con la modificación del estado?

'setState' es un método en React que se utiliza para actualizar el estado de un componente. Cuando se llama a 'setState', React re-renderiza el componente con los nuevos valores del estado.

¿Por qué no se pueden utilizar bucles como 'for' o 'forEach' dentro del JSX en React?

El JSX es una representación de los elementos que se renderizarán en el DOM. Los bucles deben ser representados utilizando el método 'map' en un array para iterar sobre los elementos y devolver un nuevo array de elementos a renderizar.

¿Cómo se pueden manejar eventos en React y por qué es diferente a JavaScript?

En React, los eventos se manejan utilizando props para pasar funciones a los componentes hijos. Estas funciones se ejecutan en respuesta a acciones del usuario, y no se asignan directamente en los elementos del JSX como en JavaScript.

¿Qué es 'Just Red' y cómo se relaciona con la selección de elementos en React?

'Just Red' es un ref que se utiliza para seleccionar y manipular elementos en el DOM en React. Sin embargo, su uso es excepcional y no es la forma habitual de trabajar con elementos en React.

¿Por qué es importante entender el uso de 'map' en React?

El uso de 'map' es crucial en React porque permite iterar sobre un array y devolver un nuevo array de elementos a renderizar, lo cual es una forma común de crear listas o colecciones de elementos en el JSX.

¿Cómo se manejan las condiciones en el retorno de un componente en React?

En React, en lugar de usar estructuras de control como 'if' o 'switch' en el retorno de un componente, se utilizan operadores ternarios o el método 'condicional rendering' para devolver elementos basados en condiciones específicas.

¿Cómo se pueden eliminar elementos de un array en el estado de un componente en React?

Para eliminar elementos del estado en React, no se pueden usar métodos como 'splice' o 'shift' directamente. En su lugar, se puede usar el método 'filter' para crear una copia del array sin el elemento a eliminar y luego actualizar el estado con esta copia filtrada.

¿Por qué es importante la práctica en lugar de solo ver videos para aprender React?

La práctica es esencial para aprender React porque permite a los desarrolladores entender profundamente cómo funciona el framework y cómo solucionar problemas reales. Ver videos es útil, pero la verdadera comprensión y habilidad vienen de la experiencia práctica.

Outlines

00:00

😕 React y los desafíos de los desarrolladores de JavaScript

El primer párrafo aborda los problemas que enfrentan los desarrolladores con experiencia en JavaScript al aprender React. Se menciona que, aunque la sintaxis de JavaScript es familiar, el enfoque de React difiere significativamente, lo que puede llevar a errores y frustración. El hablante comparte su experiencia personal y destaca la importancia de entender conceptos clave de React, como el uso de 'state' y la manipulación del DOM, que difieren de las prácticas habituales en JavaScript.

05:00

🛠️ Nociones básicas de React que todo desarrollador debe conocer

Este párrafo se enfoca en aspectos fundamentales de React que a menudo son malentendidos por aquellos que provienen de JavaScript. Se explica que no se deben utilizar selectores de JavaScript para manipular el DOM, y que en su lugar se debe utilizar el estado (state) para actualizar la interfaz de usuario. Además, se discute la necesidad de adaptar el enfoque al utilizar eventos y estilos en React, en lugar de las técnicas tradicionales de JavaScript.

10:01

🔄 La importancia de map y el manejo de bucles en React

El tercer párrafo enfatiza la importancia de utilizar el método 'map' en lugar de bucles tradicionales como 'for' o 'forEach' en JavaScript al trabajar con JSX en React. Se argumenta que 'map' es esencial para recorrer arrays y devolver elementos de la interfaz de usuario, y se menciona la necesidad de evitar el uso de bucles dentro del JSX. También se toca el tema de los condicionales y la forma de implementarlos en React.

15:04

🚫 Modificar el estado en React no es como en JavaScript

Este párrafo destaca la diferencia entre modificar el estado en React y en JavaScript. Se señala que en React no se pueden modificar arrays o objetos de estado directamente como se haría en JavaScript, y se introducen técnicas como el uso del operador spread y funciones de orden superior como 'filter' para actualizar el estado de manera inmutable, que es una práctica común en React.

20:06

🎨 Cambios dinámicos de estilo y manejo de eventos en React

El quinto párrafo explora cómo cambiar dinámicamente el estilo y manejar eventos en React, contrastando estas acciones con las técnicas de JavaScript. Se ilustra cómo se pueden crear funciones de flecha para modificar el estado reactivo y aplicar estilos condicionales, resaltando la diferencia fundamental entre la manipulación directa del DOM en JavaScript y la declarativa en React.

25:09

🔧 Prácticas y enfoque en el desarrollo con React

Este párrafo enfatiza la importancia de la práctica en el aprendizaje de React, comparando el proceso con el de aprender JavaScript. Se discute cómo el enfoque incorrecto puede causar errores y se sugiere que la clave del éxito en React es cambiar la mentalidad y realizar una cantidad sustancial de prácticas, incluso si eso significa cometer muchos errores al principio.

30:11

📚 Introducción a un proyecto de React y su estructura básica

El sexto párrafo describe el proceso de inicio de un proyecto de React utilizando 'create react app' y la estructura básica que se genera. Se menciona la creación de un estado inicial y cómo se puede utilizar el método 'map' para renderizar elementos en la interfaz de usuario, destacando la importancia de la clave 'key' en listas en React.

35:12

🔄 Manipulación de estado y eventos en el desarrollo Reactivo

Este párrafo se centra en la manipulación del estado y la creación de eventos en React. Se muestra cómo se puede modificar el estado utilizando funciones de flecha y 'setState', y se ejemplifica con la creación de un evento de clic que cambia el color de un elemento. Se resalta la diferencia entre la manipulación directa en JavaScript y la forma en que se manejan estos aspectos en React.

40:13

🗑️ Eliminación de elementos y el uso de 'filter' en React

El octavo párrafo explica cómo eliminar elementos de una lista en React utilizando el método 'filter'. Se describe un escenario en el que se crea un botón para eliminar elementos y se utiliza 'filter' para crear una nueva copia del estado sin el elemento correspondiente, resaltando la inmutabilidad del estado en React y la diferencia con las técnicas de JavaScript.

📚 Reflexiones finales y consideraciones sobre el aprendizaje de React

En el último párrafo, el hablante reflexiona sobre la importancia de cambiar el enfoque al aprender React y la necesidad de práctica. Se discuten las dificultades que pueden presentarse al intentar aplicar técnicas de JavaScript directamente en React y se enfatiza la importancia de la introspección y el aprendizaje a través de la realización de proyectos prácticos.

Keywords

💡React

React es una biblioteca de JavaScript utilizada para construir interfaces de usuario. En el video, se discute cómo las personas con experiencia en JavaScript pueden encontrar dificultades para adaptarse a React debido a diferencias en el enfoque y las prácticas de desarrollo. Ejemplos en el guion incluyen la manipulación del DOM y el uso de estados en React, que difieren de las técnicas de JavaScript tradicionales.

💡JavaScript

JavaScript es un lenguaje de programación ampliamente utilizado para la creación de aplicaciones web interactivas. El guion menciona que los desarrolladores experimentados en JavaScript pueden tener un enfoque problemático al trabajar con React, ya que React tiene su propio conjunto de reglas y prácticas que pueden contradecir las técnicas de JavaScript convencionales.

💡Estado (State)

En el contexto de React, el estado es una forma de almacenar y administrar datos que pueden cambiar durante el tiempo de ejecución de una aplicación. El guion destaca la importancia del estado en React, ya que es fundamental para actualizar la interfaz de usuario dinámicamente. Se menciona que todo en React se basa en el estado, y se debe manejar de manera diferente a como se haría en JavaScript puro.

💡JSX

JSX es una extensión de la sintaxis de JavaScript utilizada en React para describir la interfaz de usuario. En el video, se discute cómo en React todo se coloca dentro del JSX, lo que difiere de la forma en que se escribía HTML y se manipulaba con JavaScript en el pasado. El JSX permite integrar lógica de programación con el markup de la interfaz de usuario.

💡Manipulación del DOM

La manipulación del DOM (Documento Objeto del Modelo) es una técnica utilizada en JavaScript para interactuar con y modificar el contenido del documento HTML. El guion señala que en React no se utilizan selectores de JavaScript para manipular el DOM directamente, lo cual es una práctica común en JavaScript, sino que se abstrae esta manipulación a través del estado y las actualizaciones de la interfaz de usuario.

💡Map

El término 'map' se refiere a un método de los arrays en JavaScript que crea un nuevo array a partir de la transformación de cada elemento del array original. En el video, se explica que en React, en lugar de utilizar bucles como 'for' o 'forEach', se prefiere el uso del método 'map' para iterar sobre arrays y renderizar elementos en el JSX, lo que es una práctica específica de React.

💡Condicionales

Los condicionales son estructuras de control de flujo comunes en la programación que permiten ejecutar diferentes bloques de código basándose en ciertas condiciones. El guion menciona que en React, en lugar de usar estructuras condicionales como 'if' o 'switch' dentro del JSX, se prefieren los operadores ternarios para renderizar elementos de manera condicional.

💡Hooks

Los Hooks son una característica introducida en React que permite el uso de estado y otras características de React sin la necesidad de escribir una clase. El guion hace referencia a los Hooks como una forma de manejar el estado en componentes funcionales, lo que es una práctica fundamental en la programación React moderna.

💡Props

Las props (propiedades) son una forma de pasar datos de un componente padre a un componente hijo en React. Aunque no se menciona directamente en el guion, la idea de pasar datos entre componentes es fundamental en React y se relaciona con la discusión de cómo se manejan los estados y la lógica de presentación en la biblioteca.

💡Eventos

Los eventos son acciones que ocurren en una interfaz de usuario, como clics o entradas de datos, que pueden desencadenar una respuesta en la aplicación. El guion habla sobre cómo en React se asignan eventos a elementos del JSX de manera diferente a como se haría en HTML con JavaScript, y cómo se gestionan dentro de los componentes.

Highlights

Problemas comunes al migrar de JavaScript a React, incluyendo la dificultad para dejar atrás prácticas de JavaScript y adaptarse a un enfoque más declarativo.

React no utiliza selectores de JavaScript como `querySelector` o `getElementById` para seleccionar elementos del DOM.

No se pueden modificar elementos o propiedades directamente en el DOM con React, sino que se debe utilizar el estado para gestionar los cambios.

El estado en React es más importante que en JavaScript, ya que controla la interfaz y los cambios en ella.

En React, todo se gestiona a través del estado; incluso el estilo y el contenido se modifica a través de variables de estado.

La creación de eventos en React se realiza de forma diferente, colocando los eventos directamente en los componentes y no en el HTML.

Los bucles en React se realizan con `map` en lugar de `for`, y no se pueden utilizar bucles tradicionales dentro del JSX.

Los condicionales en React se manejan con operadores ternarios en lugar de `if` o `switch` dentro del JSX.

La modificación del estado en React, especialmente de arrays, requiere la creación de una nueva copia del estado utilizando `map`.

Se destaca la importancia del operador de propagación (`...`) en React para clonar objetos y arrays al modificar el estado.

Se abordan técnicas para eliminar elementos de un array de estado en React utilizando `filter` en lugar de `splice`.

Se enfatiza la necesidad de práctica y experimentación para aprender React y superar los errores comunes al venir de JavaScript.

Se menciona la importancia de la estructura y el enfoque al trabajar con React, comparándolo con las prácticas de JavaScript.

Se discuten las diferencias en la forma de pensar y abordar el desarrollo entre JavaScript y React, y cómo esto impacta en la productividad.

Se comparte una experiencia personal sobre cómo el enfoque de JavaScript puede interferir con la comprensión y aplicación de conceptos de React.

Se sugiere que la clave para el éxito en React es la adaptación a sus principios y la superación de los hábitos de JavaScript.

Se habla sobre la importancia de la comunidad y los recursos en línea para resolver problemas y aprender de los errores en React.

Se menciona la utilidad de los ejemplos prácticos para ilustrar los conceptos y buenas prácticas en React.

Transcripts

Vale entonces lo que hacemos Es Vamos a

entrar en el plato fuerte de en el plato

fuerte

para hablar del tema de react a ver el

problema que hay en muchas ocasiones que

la gente que viene desde javascript

la bien la gente que viene desde

javascript tiene experiencia javascript

habitualmente tiene problemas por el

enfoque es decir sí que es verdad y

todos sabemos que el día funciona bajo

con javascript y que entender y saber

haber trabajado con javascript nos da

facilidad Porque no tenemos que es

utilizar la misma sintaxis etcétera

aparte de funcionalidades que tiene el

día pero qué ocurre que muchas veces a

la hora de practicar o de hacer

cualquier cosa con el enfoque que le

damos es un enfoque que lo haríamos que

sería como si lo hiciéramos con react Y

evidentemente eso hace que muchas veces

para hacer una tontería para hacer

cualquier tipo de aplicación cualquier

chorrada podemos estar tres o cuatro

horas dándole vueltas a las cosas

saliendo errores que a veces no

entendemos y

desesperándonos y luego al cabo de

buscar en internet buscar en chat gpt y

mil cosas sale y no sabemos cómo

Entonces yo cuando empecé ya hace tiempo

reac Pues claro había cosas que al

principio te dicen o intuyes Pero había

otras cosas que no y yo le daba un

planteamiento un planteamiento que le

hacía con con javascript y siempre iba

por el mismo problema Entonces yo voy a

comentar una serie de cosas que son muy

importantes tener en cuenta con día

algunas ya las sabréis evidentemente y

otras igual no y luego si queréis al

final hacemos un ejemplo vale primero de

los de los aspectos importantes que

tenemos que tener en cuenta en que en

riad no vamos a utilizar selectores de

javascript es decir No utilizaremos ni

el cueri selector ni el cuery selectoral

ni el gettel en ni nada por el estilo no

utilizamos selectores para seleccionar

elementos del Domo

si querría tiene un Hub que se llama

Just red sirve para seleccionar un

elemento pero no es el uso que le vamos

a dar habitualmente y es una cosa bueno

bastante excepcional con lo cual no

podemos utilizar el cueri selector por

ejemplo el segundo aspecto que viene

ligado con el primero que podía ser el

mismo es que no podemos como hacemos con

javascript no podemos

modificar directamente

algún elemento alguna propiedad o algún

contenido de un elemento del Don de una

caja por ejemplo o de un botón con

javascript hacemos el cuerix selector y

luego puntos Select o classlist bueno y

podíamos seleccionar directamente

un elemento y poder modificarlo con

react esto no lo podemos hacer no

podemos acceder directamente un elemento

y poder modificarlo Hay que hacerlo de

otra manera tampoco podemos Modificar el

contenido como hacemos con javascript

que ponemos un html o ninsertz en html o

un Apple y ahí añadíamos el contenido no

tenemos que hacer de otra manera

todo va como bien sabéis lo que habéis

empezado con

ría todo a través del Estado el estado

para los que empecemos es el valor de

las variables que con javascript es muy

importante pero con ría lo es mucho más

todavía si queremos por ejemplo

Modificar el estilo Modificar el

contenido lo tenemos que hacer con una

variable o una variable que indique el

valor de la propiedad que queremos

modificar o bien el contenido el

contenido de la variable y cuando

modificamos ese valor automáticamente se

modifica Pues el estilo o se modifica

el contenido bien esto quiere decir que

a la hora de programar con ríack todo va

en el reto así como con html lo que

hacíamos era crear un html puro sin

Style Neon click ni nada por el estilo

nada solo html y todo lo hacíamos dentro

del código con react no lo haremos así

se puede hacer pero por día todo lo

vamos a poner dentro del reto como luego

vamos a hacerlo soy muy bajo

a ver ahora con con reac lo que haremos

será colocar otro evento del Reto De

hecho cuando queremos crear un evento

con un clic por ejemplo lo ponemos

directamente dentro

dentro de la propia caja como con

javascrita y se puede hacer pero estaba

un poco mal visto con lo cual se coloca

el Style el html no poníamos el atributo

Style dentro de una caja estaba súper

mal visto una mala práctica pero con

reac lo haremos de esta manera poniendo

un Style siempre queramos cambiar la

propiedad la queramos cambiar de manera

dinámica si la propiedad La queremos

cambiar de entrada le pondremos un Class

name normal que sea un Class y el css le

pondríamos lo que queremos que tenga

pero si no iría dentro del estilo

esto cambia mucho la manera de hacer las

cosas también otro de los problemas o

cosas que tenemos que tener muy en

cuenta aparte de Añadir a hilo dentro

del reto en añadir los eventos y Añadir

también el tema del Style es

cuando queremos crear un bucle con

javascript lo hacíamos dentro del código

creamos una función en la función

poníamos un forich un forín

lo que queramos o incluso un map un wide

aunque sea mejor que no y dentro de la

función del código

y accedíamos a lo que quisiéramos por

ejemplo accedíamos al array a un valor

de un array y lo lanzábamos a la caja

correspondiente en realidad esto no lo

vamos a hacer así aunque se podría hacer

lo mejor es ponerlo dentro poner el

bucle dentro de la caja dentro del dip o

dentro de lo que sea dentro de un spam o

dentro lo que queramos tenemos que

ponerlo dentro del contenido la caja el

tip estaría encerrada dentro de un bucle

Qué quiere decir esto que no podemos

utilizar el Ford ni el foro ni el foring

ni nada por el estilo dentro del código

dentro de lo que sería el html en react

se llama jsx ahí no podemos poner un

Ford tenemos que utilizar un map porque

un map porque un map nos permite

recorrer un array por ejemplo un array

de objetos e ir devolviendo con una

expresión ir accediendo cada uno de los

datos y dentro de una expresión si

ponemos un foro un forich no nos va a

funcionar con lo cual esto quiere decir

que el mapa es súper importante

dominarlo porque la vamos a utilizar

para todo el map es súper importante ya

veremos que también es importante para

otras cosas se escucha abajo

no sé cómo quitar más

a ver si puedo subir el volumen

de alguna manera

propiedades que está al máximo

esto al máximo el volumen

pero hemos podido en pantalla sí la idea

es que sí que ahora haremos un ejemplo

Julián Gracias por saludarme por el

saludo a ver

ponemos ahora lo haremos un mapa

recorremos dentro de las cajas y dentro

de cada uno del map podemos ir

recorriendo un array y lo iríamos

escribiendo pantalla pero solo se puede

hacer utilizando map quiere decir que

react no se puede utilizar for it se

puede utilizar sin ningún tipo de

problema pero nunca dentro del reto

nunca dentro del código jsx siempre iría

dentro de una función pero el map es

bastante mejor y los condicionales pasa

lo mismo

con javascript nosotros podemos crear

unir para detectar a partir de una

condición detectar si

podíamos por ejemplo dibujar una caja o

no y resulta que con ría tenemos

diferentes opciones pero si lo ponemos

dentro dentro del

dentro del return no podemos utilizar un

If porque es un flujo no podemos

utilizar un switch tenemos que utilizar

los ternarios operadores ternarios que

nos permiten como una expresión decir si

una caja tiene que mostrarse o no

pondríamos la condición luego lo haremos

una condición y pondríamos la caja

dentro si tiene si cumple la condición

utilizaríamos el operador del

interrogante cerrado y si no se cumple

la condición en los dos puntos Vale y

podríamos hacerlo de esta manera pero

nunca lo haríamos con un con unir ni con

un Suite quiere decir que no se puede

utilizar se puede utilizar sin ningún

problema el switch Pero dentro de

funciones dentro del Código de

javascript como lo haremos pero nunca

dentro del rector

y el otro punto muy importante

Ya es donde hay más cambio

es que el estado las variables los

arrais no se pueden modificar

directamente no podemos acceder a un

array y Modificar el índice cero por

otro valor no lo podemos hacer

si utilizamos el Hook State lo que

habéis empezado seguro que lo conocéis

cuando nosotros creamos una variable en

realidad es diferente javascript

nosotros ponemos un con la variable

igual a un valor o led o incluso bar

Aunque mejor que no led Y luego podemos

modificar esa variable a igual a 24 pero

claro pondría que esto no pasa así

tenemos que utilizar una función si es

una variable numérica o de String no hay

ningún tipo de problema

pero cuando se trata de un array y

queremos Modificar un índice el 0 el 1 2

el 3 el que sea no lo podemos hacer como

director

Perdón no lo podemos hacer directo como

lo hacemos con javascript que ponemos

array y entre corchetes el índice el 0

el 1 el 2 el 3 y luego le ponemos el

valor no se puede hacer de esta manera

sino que te lo que tenemos que hacer es

recorrer todos los valores de la raíz

desde el índice 0 hasta el último

utilizando que

utilizando map solo podemos utilizar

Maps porque a diferencia entre map y

forix por ejemplo forin es que map no

modifica el valor lo que hace map es

devolver una copia del valor por lo cual

va fantástico el map es súper importante

utilizarlo luego lo veremos y tenemos

que recorrer todos y cuando vayamos al

índice que queremos modificar lo

modificamos

Si queremos eliminar no podemos utilizar

splies ni ni slide ni nada por el estilo

tampoco podemos utilizar Push ni pop ni

nada por el estilo los métodos antiguos

de los de los anteriores no nos van a

funcionar porque modifican modifican el

estado Push o nada entonces todo salto

hacemos con reviews por ejemplo o bien

lo podemos hacer con filter o bien con

por ejemplo

bueno los el operador de propagación el

operador de propagación por ejemplo que

son los tres puntitos los tres puntitos

con cerrado con un corchete Sería para

hacer referencia a una raya entero luego

lo veremos pero si lo encerramos entre

llaves los tres puntitos el spray

operator el operador de propagación

haría referencia a un objeto súper

importante el espíritu lo tenemos que

utilizar para esto si por ejemplo

queremos eliminar un valor eliminarlo no

lo podemos hacer con splays

porque si no modificamos el estado cómo

lo hacemos Bueno pues lo podemos hacer

con el filter y tú dirás Sí con el

filter imaginaros que tenemos un array

con Los Reyes godos

o por cualquier elemento y queremos

modificar queremos eliminar a uno de

ellos eliminar por ejemplo a sisebuto o

aún cualquier otro Pues bien lo que

tenemos que hacer es seleccionar con

filter todos los valores excepto el que

el objeto nombre sea diferente a el que

queremos eliminar con lo cual

seleccionaría todos excepto ese por eso

cuando utilizamos a raíz de objetos

conviene poner un campo de tipo id para

poder seleccionarlo porque si hubiera

dos que se llamaran igual claro borraría

los dos vale es decir Tenemos que tener

en cuenta ese tipo de cosas si hacemos

un enfoque centrado en javascript nos

daremos de cabezazos siempre con el

mismo punto

Siempre

vamos a hacer un ejemplo para que lo

veamos vale esto lo podemos cerrar

si encuentro el cursor aquí vale esto

fuera

aquí vale esto es un ejemplo de

javascript vamos que nos puede servir en

el que accedemos directamente Bueno hay

selectores por un tubo el insert por un

tubo Y luego por aquí pues tenemos el

spray que no se puede utilizar en react

y luego modificamos directamente un

array que tampoco se puede hacer en reac

Vale entonces esto si lo quisieron hacer

así copiando y pegando los tendríamos un

grave problema vamos a hacerlo con vamos

a hacerlo rápidamente

luego Aquí

voy a hacerlo con Beat

app le voy a poner un nombre por ejemplo

directo vale aquí le ponemos ion

template para que me haga un proyecto de

react es súper rápido aquí le ponemos

code y el nombre que le he puesto es

directo vale

directo me abre Aquí súper rápido vale Y

luego lo que tengo que hacer es npm y

para las dependencias es muy rápido

tarda unos 22 segundos

a no ser el código

Ah vale perdón

ahora vale me voy a quitar yo me voy a

poner mucho más pequeño

Gracias por decírmelo porque si no vale

bueno

creamos el creado un proyecto con

create bit app luego he hecho el epm y

para poder acceder vale Aquí tengo el

proyecto creado bien este proyecto

evidentemente pues

esto lo cierro

vale esto aquí fuera bien Aquí tengo lo

habitual aquí elimino todo

Entonces primero en javascript

tendríamos lo que sería el array de

objetos el array de objetos en

javascript no es tan importante es

importante pero

en realidad es súper importante voy a

hacerlo

de esta manera aquí cuesta directamente

vale aquí tendríamos el array este array

vale lo tenemos que dibujar directamente

en el mapa entonces lo que tenemos que

hacer evidentemente lo que ya utilizáis

es como lo queremos modificar tenemos

que crear una variable

una variable para poder modificarlo yo

aquí voy a importar o ya tengo aquí por

ejemplo

voy a poner Pons muy utilizado con react

aquí crearía la variable que se va a

llamar por ejemplo colores y luego la

función que se va a encargar de

modificar la variable colores esto es un

State que se va a importar en la parte

superior y el valor inicial el valor

inicial sería letras

bien perfecto maravilloso genial tener

en cuenta que cuando utilizáis bit es

obligatorio poner el import read cuando

utilizamos create app no es necesario

bien cuando yo quiero esto modificarlo

con javascript lo que hacíamos era desde

el código nosotros lo que hacíamos era

recorrer con un map y desde una función

lo estábamos volcando a una caja

volvía esto no lo vamos a hacer sino que

lo vamos a crear directamente dentro del

reto es decir

aquí dentro de voy a borrar voy a crear

los fragmentos

estos para que podría ser un tipo Pero

supongo los fragmentos es mucho más

limpio bien

entonces

a ver si se me ha cerrado esto

vale a ver aquí lo que haría sería por

una parte en cerrarlo con las llaves

porque es código y le diría que tiene

que recorrer colores

colores punto Mac Por lo cual recorrerá

colores y aquí me va a indicar

añadirle donde lo tiene que introducir

valor quiere decir que valor será

primero esto de aquí luego será esto y

luego será esto a mí me interesa poner

básicamente el nombre vale por lo tanto

aquí le digo

vale que me cree

un dip ya sabéis clase name

en vez de class

vale esto lo cierro aquí vale Y aquí le

tendría que poner en este caso como

quiero poner el nombre le pondría valor

y el nombre como esto es no quiero que

me ponga valores exactamente así lo voy

a poner encerrado entre llaves

si ahora por ejemplo aquí Bueno voy a

poner aquí y el key que si no voy a dar

un error el key que tengo que poner

siempre cuando utilizo react para que

distinga una cosa de la otra le voy a

poner que de valor me ponga el ID valor

punto ID

vale si esto Ahora lo compilo

vale con npm Run

de me saldrá

aquí

perfecto

está aquí vale viernes sábado domingo

está súper ampliado creo vale Pero bueno

así se ve mejor viernes sábado y domingo

esto lo hemos creado directamente

dentro de la de lo que sería el html que

sería jsx hemos recorrido colores y

hemos añadido el valor de nombre y hemos

cogido el id para que sea diferentes el

que es obligatorio bien Ahora supongamos

que yo quiero eliminar esto cuando yo

haga clic en o por ejemplo que cambie de

color Que cuando haga clic en viernes

clic este se ponga de color rojo clic

color rojo clic de color rojo también el

estilo con javascript lo que haríamos

sería acceder directamente al elemento

acceder directamente y modificaríamos el

elemento directamente pero con react no

lo podemos hacer así con día que lo

tenemos que hacer de otra manera he

perdido una ventana por aquí

perdido me he perdido en algún lugar

bueno es igual Vale entonces

voy a poner se puede hacer diferente

maneras pero aquí voy a poner un Style

esto con javascript y con html está

súper mal visto pero con ríack lo

haríamos de esta manera incluso yo aquí

le podría poner uno un clic Con la c

mayúscula para que al Acceder al hacer

clic fuera una función ahora da error

porque no hay ningún tipo de función y

ninguna parte bien aquí yo puedo crear

una función

con const o con función Igualmente

llamado por ejemplo colorear

esta función normal si yo aquí le pongo

colorear

va a funcionar perfectamente pero como

colorear necesitas saber qué elemento

quiero colorear Aquí le tengo que enviar

el elemento que quiero modificar

entonces si yo lo pongo así me va a dar

un problema porque lo va a ejecutar de

manera directa sin tener que hacer clic

de manera directa por lo tanto para que

lo haga únicamente cuando hago clic

utilizó la función de flecha y aquí le

digo lo que tiene que enviar hasta aquí

tiene que enviar el ID el ID que en este

caso es valor y de vale Este valor ID

viajará desde aquí hasta aquí y aquí lo

pondremos donde queramos por ejemplo mi

ID bien quiero que se modifique el color

pero no lo voy a modificar directamente

lo tengo que modificar

viniendo aquí a que sea y sustituyendo

Green

por red por ejemplo este Green y este

red de aquí inicialmente debería estar

Green de red verde yo lo puedo utilizar

dentro del css por ejemplo aquí y voy a

importar el app.cs

Uy app

punto

css vale que lo tengo aquí fuera le voy

a decir que Green

significa pues color gris

y red

Bueno voy a darle algún tipo de

propiedad más como fonts o lo que sea

pero ahora para ir al grano vale

Serían dos propiedades css Green o de

color esto si yo quisiera ponerlo para

que se cambiara lo podría poner dentro

del Clash pero si lo quiero modificar

directamente aquí

Aquí

voy a poner doble llave Por qué la doble

llave La primera llave porque es código

y la llave azul es porque esto es un

objeto y como es un objeto tiene que ir

con las llaves bien Aquí le voy a poner

color

mira lo voy a hacer de otra manera y

aquí voy a escoger este Green de aquí

y lo voy a modificar le voy a decir que

vaya color que vaya a valor

y me dé este caso print mi color

mi color

si ahora lo pruebo me sale aquí está de

color verde pero no es porque tenga

ningún css porque lo he hecho así pero

al final esto Aunque lo borre daría

igual lo borro y sigue saliendo de color

verde porque de color verde porque aquí

lo pone si aquí pusiera por ejemplo read

en uno de ellos

y lo probara

salía de color rojo vale No no tiene

problema pero Grimm Pero si yo quiero

modificarlo dinámicamente lo quiero

modificar cuando haga clic en este caso

lo que tengo que hacer es primero cuando

haga clic en un elemento tiene que ir a

colorear y enviarle el ID el ID será si

hago clic en viernes el ibé será uno si

hago clic en sábado y será 2 Y si hago

clic en en domingo el ID será 3 bien

este uno Este dos y este 3 lo recibe la

función colorear y lo añade aquí y para

modificarlo no lo puedo modificar

directamente en javascript vendría aquí

y pondría red y ya está tengo que

recorrer en este caso colores por lo

tanto dentro de aquí le diría Mira sabes

lo que tienes que hacer Tengo que

utilizar set colores

copio y lo pego

perfecto vale Y aquí tiene que ir

recorriendo cada uno de los tres objetos

vale los objetos se llaman colores por

lo tanto tiene que ir a colores

o colores vale Y lo tiene que recorrer

vale de cada uno de los valores

va a añadirlo cogerá cada uno y será

valor decir primero valor será todo esto

de aquí luego valor será esto y luego

valor será esto de aquí

y lo que tiene que ver es en cada uno de

ellos si este uno coincide con el que le

ha enviado si este uno coincide con el

que le ha enviado quiere decir que este

es el correcto y tendría que venir aquí

quitar el Green y poner rit pero si no

lo es si no es el uno el que está

buscando tiene que devolver Exactamente

lo mismo vale por lo tanto aquí le diré

mira

a ver cómo lo hago para que se vea mejor

digo mira

porque no estoy haciendo nada dentro del

reto le digo Mira si el mide es decir el

numerito que éste le ha enviado

aquí el ID si este ID que ha sido

enviado es igual igual que valor y de

decir que este de aquí quiere decir que

ese es el que tiene que modificar y si

no no yo voy a poner un Else

Vale cuando coinciden A ver cuando no

coincide más fácil cuando no coinciden

tiene que devolver Exactamente lo mismo

que ha recibido es decir que si recibes

esto de aquí devuelve esto si recibes

esto de aquí devuelve Exactamente lo

mismo devuelve valor

que es este de aquí pero si coincide lo

que tengo que hacer es modificarlo

entonces para modificarlo

primero habría que todo todos los

campos para todos los campos todos

y modificar solamente uno que

modificaría este de aquí modificaría

este de aquí aquí tengo que utilizar el

escrito Predator Punto a Punto con esto

lo único que hago es seleccionar todos

los campos del objeto los tres subirá

más seleccionaría más y utiliza las

llaves porque es un objeto si fuera un

array Bueno pues utilizaría

corchetes y luego le digo Mira me coges

todo el valor bien y luego lo que tienes

que hacer es Modificar el campo llamado

mi color

mi color perdón

y aquí le pones otro por ejemplo red

me parece me falta algo

a ver estamos aquí

pondrá perfectamente cuando hago un clic

se pone de color rojo vale lo he hecho

básicamente modificando esto de aquí

he perdido el chat de vista y ahora no

sé cómo recuperarlo

donde estoy

sigo en directo

os

tras sigo en directo

sube un poco más el volumen

a ver

Kevin buenas crack a ver python o

javascript es que depende Si te gusta La

Estructura de datos python de cabeza si

te gusta más el tema del fronten puedes

utilizar javascript yo lo recomiendo

javascript

tienes forma de subir más el volumen

ostras Pues es que lo que puedo hacer es

ponerme el micrófono

voy a quitar

bien Ahora se me escucha súper bien

supongo

no

ahora alto y claro claro que el

micrófono no lo puedo colgar no tengo

colgado cuando vídeos Sí pero en estos

casos no

a ver si hago más directos

miraré de cómo solucionarlo porque claro

Es mi primer directo entonces todo es

nuevo

Claro Lo que pasa que si pongo si cojo

esto lo que no puedo hacer es escribir

no pero bueno por eso lo tenían un poco

más alejado

vale a ver

vale Estoy leyendo

vale react router doom súper importante

tengo un vídeo que lo explico De hecho

si los que no conozcáis tengo el curso

completo de react y hay un apartado

donde explicó todo lo relacionado con

ella es súper importante por para poder

acceder de un componente a otro para

hacer spa o sea es súper importante pero

ya lo tengo explicado y de hecho

Bueno cuando hagamos otro proyecto un

poco más más grande lo volvería a hacer

también próximamente bueno Próximamente

más adelante introduciré el tema de

redux

porque me lo habéis pedido mucho y bueno

de alguna manera pues pienso que es muy

importante también tenerlo en cuenta

vale

a ver queréis que sigamos con esto

Yo escucho bien el principio matadokis

pues perfecto tengo la boya rota de lo

que he gritado

vale Vanessa porfa Qué significa que sí

o que no

que me calle ya

a ver vale esto sería no sé voy a hacer

para para poder escribir con una mano a

ver esto Esta estructura

Es únicamente para modificar a raíz o

modificar

a raíz de objetos o y es exclusiva de

realidad para javascript no hace falta

hacer nada de esto simplemente lo

ponemos y ya está

vale si por ejemplo quisiera eliminar

uno

aquí por ejemplo no sé cómo lo voy a

hacer a ver cómo hago para poner

Bueno voy a ver si quisiera por ejemplo

eliminar

Sí

para para

repasar el tema del tubo es muy

importante subir un vídeo que era el

Cómo funcionaba

[Música]

el reviews

sí Y es súper importante pero por alguna

razón fue un vídeo poco visto

y tendré que hacer alguna alguna

actualización de esto bien a ver para

eliminar imaginaros por ejemplo que

tenemos aquí un botón vale un botón

vale un botón

vale un botón este botón va a servir

para eliminar Eliminar

falla porque

aquí como son más un elemento hay que

Añadir las llaves de aquí las llaves

también

y también debe ser porque me he olvidado

Por alguna cosa algún sitio

el botón a ver

Esto va con esto

voy a meter

esto lo pongo aquí

aquí se ve mejor así

y el botón lo pongo

este motor será para eliminar vale

simplemente saldrá

si saldría

el botón Vale tengo

algún error por algún sitio no sé que no

lo puedo ver

Dónde está la consola de

más el micrófono se me está cayendo

madre de Dios a ver aquí no pasa nada no

hay error

el botón no hace nada porque

evidentemente no hace nada porque no lo

he puesto simplemente pues se colorea de

color rojo pero no se elimina Entonces

esto

Aquí le voy a poner uno un clic para

borrar

aquí como también tengo que pasarle

tengo que pasarle un parámetro a la

función voy a hacer lo mismo que arriba

aquí le digo funciones de flecha y aquí

la función eliminar por ejemplo y para

que eliminar sepa lo que tiene que

eliminar voy a enviarle también el ID

vale

esta idea

esta función tiene que existir Vale pues

la voy a poner por ejemplo aquí el orden

da igual Pons eliminar vale función de

flecha

lo que le he enviado lo mismo lo va a

meter aquí por lo tanto si yo hago clic

en este botón

de aquí este primero recibirá el 1 si

hago clic en el segundo le enviará dos

si hago clic en el tercero envía tres

enviar al ID del elemento que hago clic

y esto se lo envía el propio botón

con lo cual aquí recibe el uno el dos o

el 3 y lo que tiene que hacer es

modificarlo para modificar set colores

lo mismo

set colores vale Cómo elimino no puedo

eliminar no puedo utilizar el spray no

puedo utilizar el slide voy a utilizar

el filter Entonces le digo primero que

vaya a colores vale colores es lo de

arriba la raid y haga un filter

vale recorrerá cada uno de estos Primero

este de aquí luego este de aquí y luego

esto de aquí y esto lo tiene que guardar

en la música lo guarda por ejemplo

en valor valor será cada uno de los

objetos bien Ahora qué tiene que hacer

pues tiene que ver cuál tiene que

modificar Cuál tiene que eliminar no

elimina sino que si yo tengo por ejemplo

este array de objetos y le digo Ey con

un filter seleccióname todos los que el

ide no sean el 2 Bueno pues

si quiero eliminar el 3 le diré que

todos los que no sean el 3 de sea el 3

Entonces esto lo voy a poner Aquí le voy

a decir mira

cuando el valor punto y de decir cuando

este de aquí no sea igual

a mi ID

es decir va a seleccionar una copia y a

seleccionar todos los otros

si esto Ahora lo voy a probar aquí y

eliminó el sábado Ay perdón porque está

claro al hacer clic aquí se ejecuta este

lo más fácil voy a eliminar el online de

arriba voy a separarlo pero para hacerlo

rápido

porque está la misma caja claro

elimino el sábado elimina el sábado

elimina el viernes elimino el viernes

elimino el domingo elimino el domingo o

sea funciona correctamente el que hago

clic se elimina cuando hago clic aquí

envía el tres

y cuando yo

hago un filter me devuelve todo menos en

tres con lo cual al final se borra y los

átomos

no el filter igual que el map y igual

que el map que el reviews y que no no no

crea una copia no modifica el estado con

lo cual el filter se utiliza Mucho igual

que el Maps Tampoco tampoco hace ningún

tipo de lo que haces hacer una copia del

estado y devuelve un objeto nuevo o un

array nuevo con lo cual

es el que se utiliza habitualmente para

todo esto

pero claro qué ocurre que si esto lo

intentamos hacer con javascript nunca lo

haríamos Así es que con javascript esto

es el de antes es todo directo o sea

para para actualizar utilizo el splies y

para aquí accedo directamente a un

elemento en un índice a un hilo y le

cambio el estilo Y ya está decir es muy

diferente entonces qué pasa que muchas

veces

estamos intentando

intentando hacerlo como si estuviéramos

con javascript y

patinamos siempre sobre el mismo punto

cuando cambiamos el enfoque Entonces es

cuando la cosa empiezan a funcionar pero

para cambiar el enfoque tenemos que

hacer mucha práctica tenemos que cagarla

mucho con el perdón de la palabra

tenemos que fallar mucho fallar mucho y

luego detectar Dónde está o sea el error

es donde está un poco el aprendizaje si

no nos equivocamos nunca no nos damos

cuenta de Dónde tenemos el problema

y es súper importante hacer prácticas

solo viendo vídeos no vamos a aprender

nada y os lo digo yo que hago vídeos

nadie me dedico a la formación la

formación online o formación presencial

de javascript de Ría etcétera Pero

hace falta práctica para todo ello

Y sí es una clonación

tenéis alguna pregunta alguna duda

alguna petición

aparte del volumen

queréis que otro día

a ver esto esto ha sido sobre todo una

prueba para ver el tema de los directos

Cómo funcionaba o no sé qué a mí me

gusta más hacer vídeos porque me los

curro más le pongo más postproducción le

pongo cartelitos le pongo por aquí pues

que salgan los bueno etcétera entonces

depende un poquito Cómo funcione el los

el directo igual hago más o menos Aunque

este vídeo pienso que es tan importante

que me parece a mí Según como haya sido

Aunque el directo luego se graba es

posible que haga un vídeo para

explicarlo bien

depende un poco de cómo ha ido

vale No sé cómo ha ido o como porque no

acabo de ver

la funcionalidad

pero sí Si veo que no ha quedado muy

claro pues lo que haré será Borrar el

directo como vídeo borrarlo del directo

y hacer un vídeo únicamente para esto se

ha quedado un poquito mal para que se

entienda perfectamente porque pienso que

es un contenido que es un tema muy

importante a tenerlo en cuenta

alguna duda petición

nada

y bueno me disculpo por él por el

volumen

si ha sido bajo

y el próximo se haga otro otro vídeo si

hago otro otro directo pues ya pondría

el sonido me haría como hacerlo de

manera más bueno

que suene más fuerte

Estoy leyendo el chat

una pequeña guía de cómo subir un

proyecto de rían sería otra opción sí

Gracias por el Live gracias Antonio

Gracias a todos os tocan agradecer que

no vaya a dejar solo pensaba que sería

un directo conmigo y mi sombra misma y

como somos 24 lo cual está bastante bien

para mi volumen de YouTube llevo cuatro

años en YouTube Hemos llegado a los

9.000 suscriptores lo cual

hombre voy a estar más O podría ser

menos pero os doy las gracias a todos a

todos a todos por haberme seguido y a

ver haber evitado que haya hecho un

directo totalmente solo

Hasta luego acabamos aquí

a ver cómo se termina la visión

este

Sí a ver para para nuevamente Me puedes

hacer preguntas nuevamente contesto

bastantes preguntas

Lo que pasa que el chat de YouTube pues

no da para mucho realmente

pero cualquier cosa que me digáis suelo

contestar

perfecto acabamos aquí os dejo os dejo

Ya de dar la chapa Y nos vemos en el

canal en vídeos sucesivos de todo no

dudéis en suscribiros a ver si

en menos de un año superamos los 10.000

y nos vemos en el siguiente vídeo hasta

luego