Channel Avatar

Picando Código @UCE77VqlsJLphQXTIwB55dGw@youtube.com

9.7K subscribers - no pronouns :c

Bienvenidos a Picando Código! 🚀 En Picando Código, estamos


Welcoem to posts!!

in the future - u will be able to do some more stuff here,,,!! like pat catgirl- i mean um yeah... for now u can only see others's posts :c

Picando Código
Posted 21 hours ago

🚀 ¡Descubre el secreto para trabajar referencias en React como un PRO!

¿Sabías que las referencias son una herramienta clave para gestionar componentes en React? En nuestro último video, te enseñamos cómo usar forwardRef, una técnica esencial para pasar referencias de un componente padre a un hijo de manera correcta y profesional. Pero, ¡cuidado! También te mostramos por qué cambiar el nombre de la prop "ref" puede funcionar, pero no es la mejor práctica.

💡 Si alguna vez te has preguntado cómo mejorar la comunicación entre componentes personalizados o cómo mantener un código limpio y eficiente, este video es para ti. Te explicamos paso a paso cómo optimizar tus proyectos con esta técnica y evitar errores comunes que pueden complicar tu desarrollo.

👉 ¿Ya has usado referencias en tus proyectos de React? ¿Conocías la técnica de forwardRef? Comparte tu experiencia en los comentarios y cuéntanos cómo este video te ayuda a mejorar tus habilidades. ¡Dale clic al enlace y lleva tu conocimiento de React al siguiente nivel!

🎥 Mira el video aquí => https://www.youtube.com/watch?v=Q-wtc...

No olvides suscribirte a nuestro canal para seguir aprendiendo sobre React cada semana. ¡Te esperamos en los comentarios para debatir y aprender juntos! 🌟

0 - 0

Picando Código
Posted 6 days ago

¡Descubre por qué React es el futuro del desarrollo web! 🚀

Si estás iniciando en el mundo del desarrollo web o ya tienes experiencia con JavaScript, probablemente te hayas preguntado: ¿Es React realmente necesario? 🤔

📎https://youtu.be/ZWHJSS4ZtIk?si=byQMq...

En nuestro primer video del tutorial de React, hacemos una introducción completa a esta biblioteca tan poderosa y respondemos a esa gran pregunta. Aquí exploramos:

1️⃣ ¿Qué es React y por qué ha transformado la forma en que construimos aplicaciones web?

2️⃣ La diferencia entre webs populares que utilizan React (como Instagram, Netflix y Airbnb) y aquellas que no lo hacen, para ver en vivo las ventajas competitivas que ofrece React en rendimiento y experiencia de usuario.

3️⃣ ¿Es hora de dar el salto de JavaScript Vanilla a React? Analizamos casos en los que React es la mejor opción para optimizar y escalar tu proyecto, y los momentos en que quedarte con JavaScript puede limitarte.

Y esto es solo el comienzo. 🔥 Actualmente, nuestra lista de reproducción de React en YouTube tiene más de 70 videos, desde conceptos básicos hasta temas avanzados, ¡y se actualiza cada semana! 🎉 No importa si eres principiante o quieres profundizar más, hay contenido nuevo esperando por ti.

👀 Si aún no has dado el salto a React, ¡este video te abrirá los ojos a lo que podrías lograr!

👉 ¿Qué estás esperando? Mira el video y cuéntanos en los comentarios: ¿Qué te parece React? ¿Ya lo estás usando o estás en ese proceso de decidir si aprenderlo?

5 - 0

Picando Código
Posted 3 weeks ago

⚔️ ¡Maquetamos un componente Dialog para nuestro nuevo juego! ⏳

¿Alguna vez has pensado en crear un componente interactivo para un juego en el que el tiempo es tu enemigo? 🕰️ En nuestro último video, damos un paso adelante en la construcción de nuestro juego "Lucha Contra el Reloj", donde exploramos a fondo cómo maquetar un componente clave usando React y la etiqueta Dialog para una experiencia de usuario envolvente y dinámica. 🎮

Vente a picar un poco de código: https://youtu.be/ZLxjPoC6E-k?si=rbgsh...

En este tutorial, te muestro cómo integrar Dialog de manera eficiente en React, creando una ventana emergente que guiará a los jugadores en cada fase del juego. Te enseño trucos para manejar estados de manera óptima, capturar eventos y controlar el flujo del juego sin interrupciones. ¡Una excelente oportunidad para mejorar la estructura de tus componentes y añadir interactividad! ⚙️✨

Además, exploramos cómo un diseño intuitivo y bien maquetado puede hacer que la experiencia de usuario sea aún más fluida y divertida. Desde la gestión de tiempos hasta el diseño visual, el video cubre todos los detalles. No solo aprenderás a trabajar con Dialog, sino que entenderás cómo puedes aplicarlo en distintos proyectos de React. 🌐💡

¿Te animas a probarlo? 🚀 No te pierdas este nuevo episodio, y cuéntame en los comentarios cómo integrarías este tipo de componentes en tus proyectos. 👇 ¡Suscríbete, deja tu like y compártelo con quien creas que lo necesita!

#ReactJS #DesarrolloWeb #ComponentesReact #FrontendDev

7 - 0

Picando Código
Posted 3 weeks ago

🚀 ¡Nuevo vídeo en mi canal! 🚀

Esta vez, nos metemos de lleno en la práctica con React Hooks y useRef 🔄. En este nuevo caso de uso, trabajamos en una aplicación de videojuegos donde tendrás que luchar contra el reloj ⏰. Pero eso no es todo: también aprenderemos a gestionar el Scope de los componentes y cómo manejar las variables de manera eficiente en cada renderizado.

¿Te gustaría optimizar tu código y entender mejor cómo funciona React bajo el capó? ¡Este vídeo es para ti! 🔥

🔗 https://youtu.be/LfGuQEgSpa0?si=PTSAs...

👉 Cuéntame en los comentarios si ya has usado useRef o si te ha resultado útil este contenido. ¡Nos leemos! 👇

#React #Hooks #useRef #JavaScript #DesarrolloWeb #Programación #Frontend #Desarrolladores #Código #ReactTips #Optimización

4 - 0

Picando Código
Posted 1 month ago

🌟 ¡La tecnología está transformando vidas, y KeepCoding está liderando esta revolución
en la España rural y de los pequeños pueblos! 🚀

En Picando Código, creemos que la educación tecnológica debe llegar a cualquier lugar, a
cualquier persona. Por eso, nos hemos unido a la primera edición del proyecto de Becas
Sociales "España en Revitalización" de KeepCoding para ayudar a todas aquellas personas
de pequeños pueblos de España a acceder a formación tecnológica de alta calidad, sin
tener que abandonar sus comunidades. ¡Diamantes en bruto listos para transformar sus
vidas! 🌿💻

La España rural y de los pequeños rurales tiene un potencial inmenso, pero las
oportunidades laborales son limitadas. KeepCoding está aquí para cambiar eso, ofreciendo
becas parciales del 50% en sus bootcamps especializados que inician el 4 de noviembre de
2024. Podrás formarte en áreas como Desarrollo Web, Inteligencia Artificial, Big Data, y
más, desde casa y sin alejarte de tus raíces. Se trata de un proyecto ambicioso en el que
pretendemos formar hasta 1.000 personas a lo largo de 2 años, ejecutadas en varias
ediciones. ¿Te apuntas?

¿Qué incluye la beca de esta 1a edición?
✔️ Formación intensiva en áreas tech clave.
✔️ Solo pagas el 50% del bootcamp.
✔️ Aprender desde tu pueblo, en remoto.
✔️ Apoyo continuo durante y después de la formación.

Si vives en un pueblo de España con menos de 10,000 habitantes y quieres transformar tu
carrera, esta es tu oportunidad.

¡Aplica ya! Juntos, a por una #EspañaEnRevitalización 📍hubs.li/Q02TdGCB0


#Revitalizatufuturo! #BecaSocial #Transformación #Desarrollo #CrecimientoProfesional
#ImpactoSocial #KeepCoding

4 - 0

Picando Código
Posted 1 month ago

🚀 ¿Sabías que puedes hacer debugging en React de manera más eficiente con una sola herramienta?

En el nuevo video, te muestro cómo aprovechar React Developer Tools, una extensión imprescindible para desarrollar en React. Con esta herramienta, puedes inspeccionar el árbol de componentes, revisar los estados y props en tiempo real, e identificar cambios en la UI de forma precisa. A lo largo del video, usaremos un proyecto práctico de Tic Tac Toe para enseñarte paso a paso cómo utilizarla y cómo puede mejorar tu flujo de trabajo al depurar tus aplicaciones React.

🔧 Te explico cómo instalar la extensión, navegar entre sus pestañas, y entender qué pasa “bajo el capó” de tu app con cada interacción.

🔗 ¡Mira el video completo y lleva tu desarrollo en React al siguiente nivel!

https://youtu.be/HJDv4ItUkN8?si=JcOz3...

💬 ¿Conocías React DevTools? ¿Tienes alguna otra herramienta favorita para depurar? ¡Comparte tu experiencia en los comentarios!

6 - 0

Picando Código
Posted 1 month ago

🚀 ¡Descubre los secretos del debugging en React con las herramientas de Google Chrome! 🛠️

En el desarrollo de aplicaciones, encontrar errores es inevitable, pero saber cómo solucionarlos es clave. En este nuevo video te muestro cómo usar la consola de Chrome, analizar el DOM virtual, y aprovechar pestañas como Elements, Network y Performance para depurar como un profesional. 🔥 No te lo pierdas!

➡️ Mira el video completo y aprende a mejorar el rendimiento, la seguridad y la memoria de tus apps React mientras dominas las herramientas de desarrollo.

👀 Te cuento más aquí:

https://youtu.be/B5YA6Zbs-qE?si=ivFxv...

¿Qué herramientas usas tú para depurar tus aplicaciones? ¿Ya conocías todas las funcionalidades de Chrome DevTools? 🤔 ¡Déjame tu opinión y hablemos de nuestras experiencias! 👇

4 - 0

Picando Código
Posted 1 month ago

🔍¿Quieres ser un profesional del DEBUGGING en REACT?

Comenzamos la cuarta fase de nuestro tutorial de Reacr desde cero, aprenderemos a identificar, entender y resolver errores que puedan surgir durante el desarrollo. En este primer video, te mostraré qué es el debugging, por qué es fundamental y cómo abordarlo para no desesperarnos cuando la consola nos marca un error en rojo.

⬇️ Te mostramos cómo hacerlo:

https://youtu.be/B7BupaPRRIw?si=sU4nG...

💻 El debugging no es solo encontrar un error, es un proceso clave que nos permite entender mejor el código y mejorar nuestras habilidades. En este video explicamos cómo leer esos mensajes de error que parecen interminables, cómo buscar la raíz del problema y cómo React facilita este proceso mostrándonos el archivo y la línea exacta donde algo salió mal.

🎯 ¡Ahora es tu turno! ¿Alguna vez has tenido que enfrentarte a errores difíciles en React? Cuéntame en los comentarios cómo los resolviste o qué dudas tienes sobre el proceso de debugging. Vamos a aprender juntos y hacer que esta etapa sea lo más interactiva posible.

5 - 0

Picando Código
Posted 2 months ago

🚀 ¡Domina las directivas clave de Tailwind CSS en nuestro nuevo video!

Hemos llegado al final de nuestra tercera etapa del curso de React, y lo hacemos con un video repleto de contenido práctico y avanzado. En este episodio, aprenderás a manejar directivas poderosas como `@layer` y `@apply`, además de cómo implementar plugins y media queries personalizadas para darle a tus aplicaciones un estilo dinámico y completamente adaptable. ¡No te lo puedes perder!

📎 https://youtu.be/kmMZTex27Bc?si=A_jXC...

Este video no solo es la clave para llevar tus habilidades con Tailwind CSS al siguiente nivel, sino también una herramienta fundamental para que entiendas cómo organizar tu código de manera más eficiente. Te mostramos cómo aprovechar estas directivas y hacer que tus componentes reaccionen a diferentes pantallas y dispositivos, ¡todo sin esfuerzo!

Y esto no es todo, porque mientras cerramos esta etapa, ¡ya estamos preparando la siguiente! Esta semana comenzamos con nuevos temas sobre React, que te ayudarán a seguir profundizando en tu camino como desarrollador frontend.

¡Dale al play y sigue aprendiendo con nosotros! 🎬

5 - 0

Picando Código
Posted 2 months ago

🎥 ¡Dinamiza tus estilos con Tailwind CSS!

En el video de hoy te muestro cómo usar media queries y estilos dinámicos para que tu aplicación responda de manera perfecta en cualquier dispositivo, ¡todo sin escribir una sola línea de CSS tradicional!

https://youtu.be/fsXfyMA2dPM?si=JF-pG...

👉 ¿Y si pudieras cambiar los estilos de tus componentes según la interacción del usuario? Con los pseudoselectores y las media queries personalizadas, ¡todo es posible!

En este tutorial llevamos nuestro login de Wonka al siguiente nivel y te enseño paso a paso cómo lograrlo.

Domina Tailwind CSS y conviértete en un maestro del diseño responsive y dinámico. Si quieres que tus proyectos luzcan tan bien como funcionan, ¡este video es para ti! 🔥

💬 Cuéntame, ¿ya has probado Tailwind CSS? ¿Qué es lo que más te gusta de este increíble framework?

5 - 0