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

Summary

The speaker discusses common challenges faced by developers transitioning from JavaScript to React. They highlight the importance of understanding React's state-driven approach, the use of state over direct DOM manipulation, and the application of React-specific patterns like using map instead of traditional loops for rendering lists. The talk includes practical examples to illustrate these concepts, emphasizing the need for practice and learning from mistakes to effectively adopt a React-centric mindset.

Takeaways

• 😀 The speaker discusses common issues faced by developers transitioning from JavaScript to React, emphasizing the need to change one's approach when working with React.
• 🔍 It's highlighted that in React, direct DOM manipulation using selectors like `querySelector` or `getElementById` is not used; instead, state management is key.
• 🚫 The script mentions that modifying elements or their properties directly, as is common in JavaScript, is not the React way; changes should be made through state variables.
• 📝 The importance of understanding React's state is underscored, as it is more central to React than variable states are to JavaScript.
• 🛠️ The script covers the use of `map` in React for looping over arrays, as traditional JavaScript loops like `for` or `forEach` are not used within JSX.
• 🔄 The speaker explains that conditional rendering in React is done using ternary operators rather than `if` or `switch` statements, which are not suitable for inline usage in JSX.
• 🛑 The script touches on the immutability of state in React, where direct modification of arrays or objects is not allowed and functional updates must be used instead.
• 🔄 The use of the spread operator (`...`) is introduced as a way to create copies of arrays or objects when updating state in React.
• 🔑 The importance of unique `key` props in React lists is mentioned, which helps React identify which items have changed, added, or removed.
• 🎨 The script includes a practical example of creating a React component that changes color on click, demonstrating the principles discussed.
• 📈 The speaker concludes by emphasizing the importance of practice in learning React, as understanding comes from making and correcting mistakes.

Q & A

What is the main challenge people face when transitioning from JavaScript to React?

The main challenge is the shift in approach. Experienced JavaScript developers may struggle with React because they tend to apply JavaScript concepts directly to React, which can lead to inefficiencies and confusion since React operates differently, focusing on state and component-based architecture.

Why is it not recommended to use JavaScript selectors in React?

In React, you should not use JavaScript selectors like `querySelector` or `getElementsByClassName` because React manages the DOM differently. Instead of directly manipulating the DOM, you should use state and props to control the UI, and React will handle the DOM updates.

How should you modify the style or content of an element in React?

In React, you should not modify the style or content of an element directly as you would in vanilla JavaScript. Instead, you should use state to control these properties, and changes to the state will automatically reflect in the UI.

What is the significance of state in React compared to JavaScript?

In React, state is even more important than in JavaScript. It controls the UI, and any changes to the state will trigger the component to re-render. It's the central point for managing variable values that affect the component's output.

Why should you avoid adding styles directly to elements in React?

Directly adding styles to elements in React, as you might do in HTML with JavaScript, is not recommended. Instead, you should use the `style` prop and define styles in an object, which allows React to manage the styles in a more controlled and efficient way.

How should you handle events in React components?

In React, events should be handled within the component itself, often using inline functions or event handlers defined within the component. This is different from JavaScript, where you might attach event listeners to elements in the DOM.

What is the recommended way to create lists or loops in React?

In React, you should use the `map` function to create lists or loops. This function allows you to iterate over an array and return a new array of elements, which can then be rendered within the component.

Why should conditional rendering be done differently in React?

Conditional rendering in React should be done using ternary operators or conditional (ternary) rendering inside the JSX, rather than using traditional JavaScript `if` statements or `switch` cases, because React's rendering is based on the return value of the component function.

How can you modify an array state in React?

To modify an array state in React, you cannot directly change an index as you would in JavaScript. Instead, you should use the `map` function to create a new array with the desired modifications or use array methods like `filter` to create a new array that excludes certain elements.

What is the purpose of the `key` prop in React elements?

The `key` prop helps React identify which items in a list are changed, added, or removed. It should be given to elements inside the array to give each element a unique identifier, which helps React efficiently update the DOM.

Why is practice important when learning React?

Practice is crucial when learning React because it allows you to make mistakes and understand where those mistakes occur. This hands-on experience helps solidify the concepts and teaches you to think in React's way, rather than trying to apply JavaScript concepts directly.

Outlines

00:00

😕 Challenges of Transitioning from JavaScript to React

The speaker discusses the common difficulties experienced by developers who are transitioning from JavaScript to React. They mention that while JavaScript knowledge is beneficial, a different approach is required for React. The speaker emphasizes the importance of understanding React's state management and the unsuitability of traditional JavaScript methods like direct DOM manipulation. They also highlight the need to avoid using JavaScript selectors in React and to manage state changes through state variables instead.

05:00

🛠️ Best Practices in React Development

This paragraph focuses on key aspects to consider when developing with React. It covers the inappropriateness of directly modifying the DOM or element properties as in JavaScript. The speaker explains that React relies on state and state changes to update the UI, rather than direct manipulation. They also touch on the use of events, conditional rendering, and the importance of using the 'map' function for loops instead of traditional JavaScript loops within JSX.

10:01

🔄 Modifying State in React: The Right Way

The speaker elaborates on the correct way to modify state in React, pointing out that direct modification of arrays or variables is not allowed. They explain the use of the 'map' function to create a new array with the desired changes and the necessity of using functional updates for objects. The paragraph also discusses the use of the spread operator for object manipulation and the importance of understanding these concepts to avoid common pitfalls when transitioning from JavaScript.

15:04

📐 Building a React Project with State Management

The speaker provides a walkthrough of creating a React project using 'create-react-app' and setting up state management. They demonstrate how to import state hooks, initialize state variables, and modify them within a component. The paragraph includes a practical example of rendering a list based on state data and the importance of using keys in React components for list rendering.

20:06

🎨 Dynamic Styling in React Components

This paragraph discusses how to dynamically change styles in React components. The speaker explains that direct manipulation of elements, as done in JavaScript, is not the React way. Instead, they show how to use state to change styles and how to bind event handlers to elements. The paragraph includes an example of changing an element's color upon a user action, emphasizing the use of functional components and hooks.

25:09

🔧 Practical Example of Conditional Styling in React

The speaker provides a detailed example of applying conditional styling in React. They demonstrate how to create a function that changes the color of an element based on user interaction. The explanation includes the use of arrow functions, event handling, and state updates to reflect changes in the UI. The paragraph also touches on the importance of passing the correct ID to the function to apply changes to the right element.

30:11

📝 Reflecting on the Live Coding Session and React Learning Curve

In this reflective paragraph, the speaker contemplates the effectiveness of live coding sessions compared to pre-recorded videos. They acknowledge the importance of practice in learning React and the value of making mistakes to understand the framework better. The speaker also hints at future topics they might cover, such as Redux, and expresses gratitude for the audience's engagement during the live session.

35:12

🗑️ Implementing Deletion Functionality in React

The speaker walks through the process of implementing a deletion feature in a React application. They explain how to create a button that, when clicked, triggers a function to remove an item from the state array. The paragraph details the use of the 'filter' function to create a new array without the item to be deleted, emphasizing the immutability of state in React and the correct way to update it.

40:13

🚀 Wrapping Up the Live Session and Looking Forward

In the concluding paragraph, the speaker wraps up the live coding session, expressing their intention to possibly create a follow-up video if the live session's audio was not clear enough. They thank the audience for their participation and discuss the possibility of providing a guide on deploying a React project. The speaker also reflects on their experience on YouTube and looks forward to reaching 10,000 subscribers.

Keywords

💡React

React is a popular JavaScript library used for building user interfaces, particularly single-page applications. It is central to the video's theme as the speaker discusses common issues developers face when transitioning from JavaScript to React. For instance, the script mentions 'trabajar con react' and 'enfoque que le damos es un enfoque que lo haríamos que sería como si lo hiciéramos con react', highlighting the learning curve and the shift in mindset required for effective React development.

💡JavaScript

JavaScript is a programming language that is essential for web development, and it's the basis for React. The video script frequently contrasts JavaScript with React, pointing out the differences in approach and mindset. For example, the speaker talks about 'la gente que viene desde javascript' and how their JavaScript experience can sometimes lead to confusion when starting with React.

💡State

In React, 'state' is an object that represents the part of the component that can change. The video emphasizes the importance of state in React, as it's more significant than in vanilla JavaScript. The script states 'para los que empezamos es el valor de las variables que con javascript es muy importante pero con ría lo es mucho más', indicating that managing state is crucial for dynamic UI updates in React.

💡JSX

JSX is a syntax extension for JavaScript that allows HTML-like structures to be used within JavaScript code, which is used in React for describing the UI. The script mentions 'lo que sería el html en react, se llama jsx', showing that JSX is a key concept for anyone learning React, as it's how developers describe what the UI should look like.

💡Map

The 'map' function in JavaScript is used to create a new array by transforming each item in the original array. In the context of the video, 'map' is highlighted as a crucial method in React for rendering lists or iterating over data. The script says 'un map porque un map nos permite recorrer un array', demonstrating its use in React for creating dynamic UI elements based on data.

💡Conditional Rendering

Conditional rendering in React allows components to render differently based on the state or props. The video script refers to this concept when discussing 'los condicionales pasa lo mismo con javascript', explaining that in React, conditional logic cannot be implemented using traditional JavaScript 'if' or 'switch' statements within JSX, but rather through ternary operators or other React-specific approaches.

💡Event Handling

Event handling in React involves setting up functions to respond to user interactions like clicks. The script touches on this with 'cuando queremos crear un evento con un clic por ejemplo lo ponemos directamente dentro de la propia caja', indicating that event handlers in React are attached directly to the elements that will trigger them, unlike in traditional HTML where they might be attached separately.

💡Direct Manipulation

Direct manipulation refers to modifying the DOM or elements directly using JavaScript. The video script mentions 'no podemos modificar directamente algún elemento alguna propiedad o algún contenido de un elemento del DOM', contrasting this approach with React's declarative paradigm where updates are made through state changes rather than direct manipulation.

💡Spread Operator

The spread operator in JavaScript is used to expand elements in arrays or properties in objects. In the context of the video, it's mentioned in relation to state updates in React, where 'el operador de propagación' is used to create copies of objects or arrays without modifying the original state directly.

💡Practice

The importance of practice in learning React is emphasized in the video, with the speaker stating 'pero para cambiar el enfoque tenemos que hacer mucha práctica'. The script suggests that understanding React comes from doing and making mistakes, which is a common theme in learning any new skill or framework.

Highlights

Discussing the common issues faced by developers transitioning from JavaScript to React, emphasizing the need to adjust one's approach.

React operates differently from traditional JavaScript, requiring developers to unlearn certain practices and adapt to a new paradigm.

Highlighting the importance of not using traditional JavaScript selectors in React, as React has its own methods for selecting elements.

Explaining that direct DOM manipulation is not allowed in React; instead, state management should be used for changes in the UI.

The significance of state in React is underscored, as it is more crucial than in JavaScript for managing UI changes.

Discussing the best practices for event handling in React, such as attaching event handlers directly within JSX elements.

Clarifying the misconceptions about using loops in React; instead of traditional loops, mapping over arrays is recommended.

The importance of conditional rendering in React is emphasized, with a focus on using ternary operators instead of traditional if-else statements.

Providing insights on how to modify arrays and objects in React state, noting that direct mutation is not allowed.

Introducing the concept of the spread operator in React for copying arrays and objects without mutating the original state.

Demonstrating the use of React's `filter` function to dynamically modify arrays within the state, as an alternative to traditional JavaScript methods.

The presenter shares personal experiences and learnings from their initial days with React, illustrating common pitfalls and how to overcome them.

A live coding session is initiated to demonstrate React concepts, providing a practical example of the discussed principles.

The process of creating a React project from scratch is shown, including setting up the environment and initial configurations.

An in-depth explanation of how to handle state changes in response to user interactions, such as clicks, in a React component.

The presenter addresses the importance of practice in learning React, emphasizing that making mistakes is a part of the learning process.

Concluding thoughts on the importance of adapting one's mindset when transitioning from JavaScript to React, and the value of persistence.

The presenter expresses intentions to cover advanced topics such as Redux in future sessions, based on audience interest.

A Q&A session is opened for the audience to ask questions related to the content covered in the live session.

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