CursosWorkshop IAEmpresasPreciosBlogNewsletter
  • Cursos
  • Workshop IA
  • Empresas
  • Precios
  • Blog
  • Newsletter
Suscríbete
  • Cursos
  • Empresas
  • Comunidades
  • Blog
  • Tarjeta regalo
  • Newsletter
  • Soporte
  • Tienda
  • ConfAiBot
  • Contacta
  • Aviso legal
  • Condiciones generales
  • Política de privacidad
  • Política de cookies

Curso de Crea tu librería en React: Carousel

Standard
Núria SorianoJavier Ferrer

Por Núria Soriano y Javier Ferrer – Frontend

Aprende cómo desarrollar tu propia librería JavaScript para React acompañándonos en la creación del Carousel de nuestra web siguiendo buenas prácticas.

Ir al curso

💸 Primera lección disponible sin registro 💸

Seguramente alguna vez te has hecho estas preguntas a la hora de usar una librería para el frontend de tu web:

  • ¿Qué librería puedo usar?
  • ¿Merece la pena acoplarme a esta librería? ¿Es extensible? ¿Puedo confiar en que la librería se mantenga?
  • ¿Uso la librería o implemento mi propia solución?

Nosotros nos hemos hecho estas preguntas para decidir qué Carousel usar en nuestra web. Aunque no queremos reinventar la rueda… ¡Hemos decidido desarrollar nuestra propia librería en React!

Te contamos por qué hemos tomado esta decisión y cómo hemos desarrollado nuestro paquete npm. En este curso aprenderás a:

  • 👀 Qué tener en cuenta a la hora de elegir una librería externa
  • 🚀 Crear una librería en React con TypeScript
  • 🧪 Desarrollar un componente usando TDD con Jest y/o Cypress
  • 🎨 Desarrollo en local usando Storybook para ver avances y documentar tus componentes
  • ✨ Dotar de features a nuestro Carousel
    • Soporta diferentes tipos de contenido
    • Scroll nativo mobile-first
    • Permitir personalizarlo con CSS
    • UX y accesibilidad
    • Publicación automática de nuevas versiones en npm con Github Actions

Todo esto con un caso real que usamos en nuestra web a partir del template de Vite para librerías que hemos desarrollado y podrás usar para acelerar la creación de tu componente.

Cursos relacionados

  • React de 0 aplicando buenas prácticas
  • Buenas practicas con CSS: Selectores
  • Maquetando la web de Codely desde 0
  • CSS Flex a fondo
  • Testing en frontend

Vídeos del curso

  • 🤔 Más allá de tu Carousel: El impacto de las librerías externas
  • 🙅‍♀️ Problemas con los carousel
  • 🐣 Empezar una librería en React

  • 💊 Soporta distintos tipos de contenido: imágenes, vídeo, texto…
  • ↔️ Scroll nativo mobile first… ¡y sin barra de desplazamiento!
  • 🎨 Espaciado entre slides: al CSS lo que es del CSS

  • ✅ Cómo paginar slides de distinto tamaño
  • 🔘 Botones personalizables y accesibles
  • 👀 Determina si una slide es visible: Separación de responsabilidades entre React y Vanilla JS

  • ➡️ Scroll Next: nos desplazamos hasta la primera slide no visible
  • ⚠️ Funcionalidades que no habíamos contemplado
  • ⬅️ Scroll Previous: iterar slides para determinar hasta dónde nos desplazamos

  • 👶 Ancho de slides aleatorio con object mother
  • 🎁 Simplifica la interacción con el componente gracias a page object

  • 📙 Storybook: documentación visual
  • 📄 Readme: el punto de entrada a tu librería
  • 🚀 Automatiza la publicación en npm: Continuous Deployment

  • 🤟 Conclusiones y siguientes pasos
Ir al curso

Cursos relacionados

Standard
Tailwind CSS: Arquitectura y buenas prácticas

🚤 Tailwind CSS: Arquitectura y buenas prácticas

Paco CastellóRafa Gómez

Aprende a estructurar tus proyectos con Tailwind CSS siguiendo buenas prácticas.

Ver curso
Standard
Ofertas de empleo

📄 Ofertas de empleo

Javier FerrerRafa Gómez

Ofertas de empleo verificadas por Codely

Ver curso
Standard
Next.js: Open Graph Images

🖼️ Next.js: Open Graph Images

Javier FerrerRafa Gómez

Genera imágenes dinámicas en tus proyectos Next.js para compartir en redes sociales.

Ver curso
Ver catálogo completo

Paga según tus necesidades

lite (sólo mensual)

19 €
al mes
  • Cursos esenciales de programación para construir una base sólida
Popular

standard

24,92 €
Descuento vs mensual de 49 €
Pago anual de 299 €
al mes
  • Catálogo principal para dominar cómo escribir un código mantenible, escalable y testable
  • Recibir ofertas de empleo verificadas por Codely
  • Factura de empresa
  • Acumular descuentos al renovar

premium

41,58 €
Descuento vs mensual de 89 €
Pago anual de 499 €
al mes
  • Cursos exclusivos de IA para mantenerte siempre actualizado
  • Acceso anticipado a nuevos cursos
  • Descuento en workshops
  • Recibir ofertas de empleo verificadas por Codely
  • Factura de empresa
  • Acumular descuentos al renovar

No subiremos el precio mientras mantengas tu suscripción activa

SuscríbeteInicia sesión