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 -~-~~-~~~-~~-~-
