🚀 TODO lo que me hubiera gustado que me hubieran EXPLICADO cuando EMPECÉ con REACT
Summary
TLDRThe 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
😕 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.
🛠️ 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.
🔄 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.
📐 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.
🎨 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.
🔧 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.
📝 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.
🗑️ 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.
🚀 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.
Mindmap
Keywords
💡React
💡JavaScript
💡State
💡JSX
💡Map
💡Conditional Rendering
💡Event Handling
💡Direct Manipulation
💡Spread Operator
💡Practice
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
Weitere ähnliche Videos ansehen
How much JavaScript do you need to learn React?
Learn Redux Toolkit in under 1 hour
Components, Instances, and Elements | Lecture 121 | React.JS 🔥
Course Introduction | Mastering React: An In-Depth Zero to Hero Video Series
State Update Batching in Practice | Lecture 133 | React.JS 🔥
How to render lists | Mastering React: An In-Depth Zero to Hero Video Series
5.0 / 5 (0 votes)