Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
CSS en JS y Styled Components con Emotion y React
Play lesson

Curso React.js ⚛️ desde cero - Crea una aplicación paso a paso - CSS en JS y Styled Components con Emotion y React

5.0 (1)
36 learners

What you'll learn

This course includes

  • 18.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

Aprende a usar Emotion con React. Aprende a cómo usar CSS en JS con React y cómo usar Styled Components. ▶ Suscríbete para no perderte los próximos vídeos: https://www.youtube.com/c/midudev?sub_confirmation=1 Segmentos 📹: 00:00 - Presentación de la clase 04:03 - Presentando Emotion 06:08 - npm install @emotion/core 06:47 - Pasar página 404 a Emotion con CSS en JS 10:34 - Usando la nueva prop css 12:00 - Cambiando el pragma para entender la prop css de Emotion 15:40 - Nombre de clases con hash y sin colisiones 18:45 - Preguntas y respuestas I 22:25 - Emotion tiene los dos sabores: CSS en JS y Styled Components 24:26 - Usando objetos para escribir CSS en JS 25:02 - ¿Cómo escribir propiedades con guiones al usar objetos en CSS en JS? 26:00 - ¿Cómo añadir pseudo clases en CSS en JS? 30:00 - Preguntas y respuestas II 33:08 - Migrando el botón a Styled Components 39:40 - Estilando un componente que no es un elemento HTML 42:35 - Buenas prácticas. Separar en archivo styles.js los estilos. 44:42 - ¿Por qué no uso React en mi blog? 47:15 - Migrando el botón de búsqueda para que use el componente Button 49:53 - Cómo reutilizar estilos con Styled Components 52:55 - Preguntas y respuestas III 54:10 - Usando Styled Components con el componente Category 57:56 - Creando estilos dinámicos con Styled Components con props y Javascript 01:06:40 - Extrayendo a funciones los estilos dinámicos por props 01:08:40 - ¡Gracias Sergio Serrano, todas las semanas donando! 01:09:40 - ¿Cómo extender estilos con Styled Components? 01:11:10 - Preguntas y respuestas IV 01:13:30 - Media Queries con Styled Components 01:18:20 - Preguntas y respuestas V 01:19:39 - ¿Cómo sabe qué props usa la función que usamos dentro de Styled Components? 01:22:35 - Usando props para estilar nuestros componentes dinámicamente 01:26:28 - Haciendo props resilientes a errores con valores por defecto 01:28:33 - Preguntas y respuestas VI 01:32:00 - Theming con React Emotion 01:38:33 - Preguntas y respuestas VII 01:50:57 - Ejercicio práctico para valientes de los Styled Components con Emotion 01:52:57 - Agradecimientos y despedida Tags 🏷: #emotion #cssEnJS #reactjs -~-~~-~~~-~~-~- ¡No te pierdas mi último vídeo! "Variables de entorno con archivos ENV y actualizaciones en tiempo real con Firestore" https://www.youtube.com/watch?v=8ZA2p1SBssk -~-~~-~~~-~~-~-

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere