midudev
CSS en JS y Styled Components con Emotion y React
¡UPS! Para ver vídeos en la web debes estar registrado, es totalmente gratuito.
1.422 visualizaciones
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
-~-~~-~~~-~~-~-
▶ 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
-~-~~-~~~-~~-~-