05. Curso de REACT 🚀 (REACT JS tutorial, desde 0, todos los niveles): map, filter, find, key a fondo
HTML-код
- Опубликовано: 30 июл 2024
- 👍 Siguiente vídeo (#6) : useEffect | fetch API y spread operator: 👉 bit.ly/33kySX8
👍 Empieza el CURSO de REACT desde el principio : • 01. Curso COMPLETO de ...
👍 Todos los vídeos del Curso de React en: 👉 bit.ly/3uupsmd
🚀 Suscríbete al Canal: 👉 bit.ly/3t63QeN
Si tu JavaScript es limitado y todavía no te atreves a entrar en el mundo de React: éste es tu curso. Desde 0, paso a paso, para personas que nunca han tenido ningún contacto con React, en cristiano, con un lenguaje claro, sin tecnicismos innecesarios, yendo al grano (a lo que interesa en cada momento) y con una actividad práctica para que la resuelvas tú (con solución incluida) en cada vídeo (después del contenido).
En este vídeo trataremos conceptos de JavaScript, pero que son básicos y fundamentales para trabajar con React. En este vídeo puedes trabajar y hacer las actividades únicamente con JavaScript (sin React), o bien desde React, ya que la utilización, sintaxis de estos métodos es siempre el mismo. Lo único que cambia es la manera de "escribir" los elementos en pantalla.
Además, tienes 4 ACTIVIDADES (+ solución) para que puedas APRENDER a través de la PRÁCTICA, ya que de la misma forma que ocurre con aprender a nadar, conducir o ir en bici, es IMPOSIBLE aprender sin PRÁCTICA,. o sin ni choques o torceduras de huesos leves.
🚀 Suscríbete al Canal: 👉 bit.ly/3t63QeN
👍 Vídeo 01 : Instalación | JSX | Uso de imágenes | CSS: 👉 bit.ly/3qXjmIB
👍 Vídeo 02 : Eventos | funciones | target y el hook useRef(): 👉 bit.ly/3rhvl45
👍 Vídeo 03 : Entendiendo el hook useState: 👉 bit.ly/33Srp1s
👍 Vídeo 04 : Los componentes y sus propiedades: 👉 bit.ly/3tZixC7
👍 Vídeo 05 : map, filter, find, includes y key a fondo: 👉 bit.ly/3utQfQJ
👍 Vídeo 06 : useEffect | fetch API y Spread Operator: 👉 bit.ly/33kySX8
👍 Vídeo 07 : El hook useContext | createContext | Provider): 👉 bit.ly/3KGfGnj
👍 Vídeo 08 : Router de React(Creación de aplicaciones SPA): 👉 bit.ly/3wEMKWY
👍 Vídeo 09 : ¿Qué es y cómo funciona el hook useReducer?: 👉 bit.ly/3P5Z9u
👍 Vídeo 10 : Multi-routing | rutas públicas y privadas: 👉 bit.ly/3euV8D7
👍 Vídeo 11 : Dominando react-hook-form e imprimir: 👉 bit.ly/3FLxEFp
👍 Para acceder a todos los vídeos: 👉 bit.ly/3uupsmd
🚀 Conviértete en Miembro del Canal para disfrutar de sus ventajas: 👉 bit.ly/3sYpjGz
🚀 Contenidos :
00:00 - Importancia de entender los métodos de JavaScript map, filter, find, includes (JavaScript)
02:55 - Entendiendo FÁCILMENTE el método map (con JavaScript), inicialmente sin React
11:44 - Entendiendo el método filter (qué es y para qué sirve)
14:39 - Utilización conjunta de map y filter en la misma expresion
15:33 - Traducción del código en JavaScript al entorno de React
17:01 - Utilización del atributo key
18:32 - Qué es y para que sirve el método find
20:20 - Funcionamiento y características del método includes
21:55 - Actividad práctica 1 para ti + su Solución
33:04 - Actividad práctica 2 para ti + su Solución
40:44 - Actividad práctica 3 para ti + su Solución
46:34 - Actividad práctica 4 para ti + su Solución
53:30 - Sustitución de Flex por Grid (en app.css)
57:14 - Consejo personal de JAB
🚀 *Subscríbete* al canal: 👉 ruclips.net/user/HTML6es
👍 *Vídeo 01* : Instalación | JSX | Uso de imágenes | CSS: 👉bit.ly/3qXjmIB
👍 *Vídeo 02* : Eventos | funciones | target y el hook useRef(): 👉 bit.ly/3rhvl45
👍 *Vídeo 03* : Entendiendo el hook useState: 👉 bit.ly/33Srp1s
👍 *Vídeo 04* : Los componentes y sus propiedades: 👉 bit.ly/3tZixC7
👍 *Vídeo 06* : useEffect | fetch API y Spread Operator: 👉 bit.ly/33kySX8
👍 Accede al resto de vídeos del *Curso Completo de REACT* en: 👉 bit.ly/3uupsmd
Buenos días!! Como siempre excelente con los videos y explicaciones... Eres un crack. Un abrazo Javi.
Hace 2 días no podía empezar un proyecto react, solo en tu curso encontré la solución y demas lo explicas todo de la forma más sencilla. El mejor curso React por lejos!👏
¿4 actividades?, no veas, es GENIAL, así podré practicar durante medio año hasta que llegue tu próximo vídeo...
Como en el anterior vídeo hubo una respuesta generalizada a favor de las actividades, en este caso he querido incluir un regalo en formato de 4 actividades, con los contenidos nuevo PERO también donde tendréis que utilizar el contenido de vídeos anteriores. Así, se practican los nuevos contenidos y se refuerzan los anteriores.
Kilian, ya ha pasado 1 año te este comentario. solo quería a saber si se ha cumplido tu pronóstico que hiciste el año pasado
Hola JAB. Después de ver todo el vídeo concluyo :
Que mejor...IMPOSIBLE!
Excelencia en su máxima expresión.
Tenga su calificación buen hombre
👍👍👍👍👍👍
Gracias por tu máxima calificación Carlos
las actividades ayudan mucho, uno cree haber entendido, hasta que te quedas solo con el problema jeje.. Muchas gracias .
Calidad tu contenido ⭐⭐⭐⭐⭐
Muchas gracias William, y sobre todo por las estrellitas y por ser el primer comentario. Felicidades...
Me divertí muchisimo en el cap anterior, vamos a más
Gracias Óscar por tus comentarios
Estuvo sabrosito como para practicarlo las veces que sean necesarios. Esto me motiva a seguir hasta ser el duro de React. Muchas gracias.
Genial, pronto proseguiré la serie de REACT, seguramente con el hook useContext, super importante...
Excelente.
Waoooo pensaba que nunca aprenderia React pero gracias a usted poco a poco ya estoy en buen camino.
Muchas Gracias!
Gracias a ti por alegrarme el día
Te descubrí hace poco, incredible, que tesoro de conocimiento más grande. Explicas muy bien, de forma sencilla y muy comprensible. Ejercicios divertidos y que enseñan bastante. Oro puro, muchas gracias por compartir tus conocimientos!
Muchas gracias, ojalá RUclips pensara igual que tú y no al revés como ha demostrado.
Wow q bien explicas, muchas gracias por tus videos
Querido JAB,
Quiero expresar mi sincero agradecimiento por tus increíbles videos de programación. Tu enseñanza es clara y concisa, y la calidad de tus videos es excelente. Además, tu personalidad amigable y predispuesta hace que aprender sea aún más agradable.
Gracias a ti, finalmente estoy empezando a entender React y estoy muy agradecido por ello. Además, creo que mereces muchos más suscriptores de lo que tienes actualmente, así que te recomendaré a todas las personas que conozca que estén aprendiendo programación.
Realmente aprecio tu dedicación y esfuerzo por ayudar a otros a comprender y dominar la programación. Tus videos han sido de gran ayuda para mí en mi camino de aprendizaje y estoy muy agradecido por ello.
Te felicito por tu valioso trabajo y por compartir tu conocimiento con los demás. Eres un verdadero maestro y estoy muy agradecido por tu ayuda.
Espero que andes muy bien
Saludos cordiales
MUCHAS muchas muCHas MUChas gracias Darío por tus muy positivas e increíbles palabras. Sobre todo coincido con lo de los suscriptores, en realidad sois LOS MEJORES, pero unos cuantos más no iría nada mal.
Suscribo las palabras de Darío al 100%. Los videos son una delicia y JAB no puede hacerlo mejor.
Excelente, gracias 💪👍👍👍👍👍
Gracias señor JAB. Muy buenos videos.
JAB sos un crack , te mereces todo el exito por cambiarnos la vida!!!!
gracias!!!!!! vamos entendiendo de a poco! que buen canal! suscrito desde hace ya varios días
Genial, pronto proseguiré la serie de REACT, seguramente con el hook useContext, super importante...
increible curso, a ver si asi consigo tener las bases para empezar con mis proyectos y conseguir empleo. un abrazote.
JAB gracias por ese talento de explicar sin dolor de cabeza react la verdad me ha sido una excelente opción de aprendizaje dinámico y super fácil. Tu contenido si sigues así será el rey para aprender codigo y nuevas tecnologías. 💪🖐👊🤜👏
Muchas gracias, ya me has alegrado el día y lo que queda de semana
Buen vídeo y buena solución para atender las peticiones de los suscriptores.
Gracias por los contenidos y las PRÁCTICAS
Gracias a ti Pablo por estar siempre ahí
Continuando con el curso... Muy buenos los ejercicios
Hoy subo el siguiente... Gracias
Muy genial la clase eres de los mejores, aún espero seguir aprendiendo por lo que tengo la intención de culminar todo tu curso, a decir verdad me cuesta hacer las actividades sin tener que verlas, pero hay vamos.
exelente videos ya si no aprenden asi con esto ..... estoy aprendiendo empiricamente con su ayuda y pues voy bien
Me alegra oír que los vídeos cumplen el objetivo que siguen
Muy buenas actividades, gracias JAB.
Gracias, pues la que viene estoy haciendo y subiré en unos días ya es de impacto mortal
Excelente explicación, muchas gracias.
En la Actividad 1 había resuelto la diagramación mediante grid, pero usando media queries para lograr el comportamiento responsive. Tu solución es mucho más sencilla y práctica (e incluso elegante). Por otra parte, en la Actividad 3 me desafié a realizar una modificación: agregué un para que el método find se aplique dinámicamente a partir de la letra que introduzca el usuario. Me llevó algo de tiempo, porque estoy partiendo de cero con React, pero repasando tus videos anteriores pude lograrlo. Valoro y agradezco mucho este curso. Saludos desde Buenos Aires.
Buenas tardes Sr.Jab.
Nos encantaría un video de Testing. Un saludo 😊
Me parece my bueno el tema maquetación porque uno termina integrando librerias y aveces no hacen falta, estaría bueno ver el tema de grillas, cards, autocomplete, que son elementos que se usan siempre.
Además como se integran otras librerias java. que se instalan a través de npm o yarn
El tema de maquetación siempre lo escondo o hago LO MÍNIMO para no aburrir, pero te tomo la palabra
Excelente video
Gracias Douglas por tu comentario
Hola JAB, ya no se que decirte.......excelente. Un abrazo.
Muchas gracias Miguel Angel, te lo agradezco...
👏👏🙏 JAB👍 y sigo disfrutando Amigooooooo.
Gracias a ti, por estar siempre ahí...
Excelente clase JAB! Muy completa y muy claras todas la explicaciones.
La combinación de contenido teoríco y práctico, así como el trabajo sobre CSS resultan sumamente útiles para integrar conocimientos.
El índice de contenidos en la descripción es el complemento ideal para acceder a los temas puntuales que quieran repasarse.
Nuevamente felicitaciones y muchas gracias por estas clases.
Me alegra que la parte (muy básica) de CSS que integro también resulte útil, ya que a veces me he planteado la idea de no añadir CSS o simplemente de añadirlo sin comentarlo ni mostrarlo en absoluto. Gracias por tener esa nueva visión del tema...
excelente video
Gracias por tu comentario, me alegro de que te haya gustado
gracias JAB
excelente gracias JAB
Gracias por tu apoyo. pronto volveré a subir vídeos
genial javier, eres lo maximo. saludos hermano.
Muchas gracias por tu apoyo incondicional, Miguel, que Dios te bendiga
@@soyjab Amén hermano, bendiciones para ti y gracias por ser la excelente persona que eres. 😀👌
exelente videos
Gracias! 😊
¡Genial!!! Ya lo estaba esperando, pude entender todo y realizar cada ejercicio y corroborarlo con la solución, muchas gracias por tan excelente trabajo, seguiré pendiente del curso React. Una pregunta ¿Cada cuando subirás video de este curso?, Saludos desde Xalapa, Veracruz, México
Buena pregunta esa. La respuesta es cuando puedo, ya que me lo tomo como un hobbie , ya que ganando 20€ AL MÉS hay que tener un trabajo real. Lo normal era 1 por semana, pero ahora mismo, el siguiente igual tarda un poco más. Depende del momento.
Sos un capasooooo !!! (y) !
tampoco entendi xq en el ejericio 4 (min aprox 51:50) puedo hacer los clics sin usar useState 🤔, el curso es lejos el mejor que encontre de react , super didactico👏👏
Hola brother, mis imagenes son de sitios diferentes. Ya añadi la url de la imagen a cada uno de los diferentes elementos del array pero no se que escribir en el archivo jsx para que cada una de ellas aparezca en pantalla. Me puedes explicar por favor
Siguiendo con el curso! .... JAB pregunta... hay algun discord del canal?. La actividad 2 la termine resolviendo solo, de manera diferente (mismo resultado) pero no se si hay malas practicas o cosas para corregir
Hola!, Me gustaría una serie de actividades para practicar HTML y CSS.
Pd: excelentes videos, felicidades!!
Hola Daniel. Pues casualmente es lo que me están pidiendo desde un centro y al final tendré que hacerlo como un encargo, que -por supuesto- subiré a youtube, pero creo que será de aquí a varios meses... todavía no
Como haces para tener la ventana de navegar y poder visualizar el contenido de lo que vas creando?
Que en el apartado del Map no me aparece el contenido en la pagina.
Saludos
cuando quiero hacer eso mismo solicitando datos via fetch o axios me da error, especificamente
Uncaught TypeError: Cannot read properties of undefined (reading 'timer')
ese porque seria? 😭😭😭
en 46:30 que trae al rey Atanagildo con la A, no trae tambien al rey Ataúlfo??
Me adelanté y no usé remove(), usé states para eliminar el elemento :'v y en el componente creado fue algo así:
state(e =>
e.map(e => e)
.filter(val =>
val.nombre !== data.nombre
)
)
acabo de terminar los videos de react, muy bien explicados gracias por el contenido, a modo de sugerencia estaria bueno si pudieras poner los links de los objetos o imagenes que usemos en la descripcion
No sé a qué vídeo te refieres pero todos los objetos y todas las imágenes cuando explico lo que hay que hacer siempre aparecen sobre escritos en pantalla para que podáis acceder a ellos y utilizarlos
Los objetos que se utilizan normalmente los subo como ficheros.txt para que podáis seleccionarlo copiar y pegar en vuestro proyecto y las imágenes siempre son las mismas y te las puedes bajar desde el fichero www.html6.es/curso/reyes.zip
Excelente contenido y he tenido una duda porque no usaste aca en vez de onClick el addEventListener y insertAdjacentHTML en vez del innerHTML es que vi los videos de javascript moderno de tu canal y observe que usabas estos 2
Porque era para también para otros alumnos presenciales que tienen menos nivel
Muchas gracias por tu comentario gráfico Victoria...
Es normal que al principio cueste hacer los ejercicios?
En este ejemplo borras el registro de pantalla pero sigue estando en el array, si borras del array se renderiza sin ese registro? o tenes que borrar en pantalla y luego borrar en el array ?
Si el array está definido con un useState, al eliminarlo del array se eliminaría de la pantalla si estuviera visualizándose tal cual, pero al estar montado sobre una estructura HTML -por decirlo así- prefabricada, para borrarlo enteramente, con el resto de elementos HTML, lo conveniente es borrarlo de los 2 sitios.
Excelente video JAB, puedes recomendar algún libro??
Te refieres a esas cosas rectangulares que tienen láminas blancas enmedio, llamadas hojas y, que funcionan sin batería ni USB? Perdona la broma. la verdad es que no conozco el tema de los libros, porque realmente se hacen viejos rápidamente
@@soyjab 🤦♂️🤦♂️🤦♂️🤦♂️
Alguien sabe por qué no me funciona un if adentro del return de un componente? :(
Porque -en algunos casos- solo se pueden utilizar expresiones, utiliza ternarios mejor...
Hola buenas, estoy practicando react, el problema es que se me van olvidando lo que voy aprendiedno, es importante siempre practicando lo mismo cada tanto??? para que se te vaya grabando lo aprendido?? que me recomendas
Tienes razón, todo se olvida. Sería bueno que hicieras un proyecto personal que incluya todo aquello que se te está olvidando
@@soyjab A ti también te pasa?? osea que tu nunca dejas de practicar?
@@SamiR-bo1oy yo como en la vida real soy profesor lo voy tocando todo el rato
@@soyjabEntiendo, y luego de react, que otra tecnologia me recomiendas estudiar para encontrar trabajo??
@@SamiR-bo1oy si te gusta el backend puedes irte hacia nodeJS, si te parece muy difícil, puedes ir hacia PHP y MySQL
Lo que no entiendo que pasa mucho en este curso es por ejemplo min 6:40 funcion escritura, en react no se usa pero lo metes en el video... No es liarnos mas y meter cosas del curso de javascript aqui q deberia ser centrado todo en react? saludos y gracias en general xq explicas muy bien y los ejercicios estan bien para q se te quede todo. Te animo a crear otro video de soluciones a preguntas tipicas de entrevista en react. Tipo esto ruclips.net/video/XBTJDpT2XaI/видео.html pero bien xq este da dolor de cabeza :-)
Tienes razón aquí mezclé el contenido para ser usado tanto en JavaScript con React para que tuviera una mayor utilidad, pero me di cuenta después. Tendría que haber hecho un vídeo diferente para JavaScript
¿Alquien sabe que significa "To ignore, add // eslint-disable-next-line to the line before."? Me deja en blanco la pantalla, pero no indica error en la consola VSC. Actualización: surge al incluir una condición doble, hacia el minuto 20.
Me parece que das muchas vueltas para explicar el método map.
45:48 esta mal mi codigo si en lugar de usar el metodo "substring" uso el "incudes" tal que asi: ___const resultado = reyes.find(e => e.nombre.includes("E") || e.nombre.includes("e"));;___ ??? llegue al mismo resultado pero nose si esta mal en algo...