Contenidos
React styled components v5 (edición 2021)
¡Olvídese de las hojas de estilo CSS! Aprenda CSS en JS para diseñar componentes de React de forma rápida y limpia con la biblioteca de componentes con estilo
Lo que aprenderás
React styled components v5 (edición 2021)
- Aumente su valor como desarrollador de React.
- Convierta o cree nuevas aplicaciones React usando la biblioteca de componentes con estilo CSS-in-JS.
- Style React aplicaciones usando un método más nuevo, más limpio y más eficiente con Styled Components.
- Usar animaciones con componentes con estilo
- Cree variaciones de componentes utilizando accesorios (por ejemplo, botón grande / pequeño / primario / secundario)
- Cree diferentes temas con un componente de alternancia de tema para aplicar un tema claro y oscuro
- Implementar fuentes de terceros con fuentes de Google
- Descubra cómo los componentes con estilo pueden interactuar con los componentes React ordinarios y los ganchos de React
- Cree un diseño receptivo para dispositivos móviles
Requisitos
- Ya debería conocer alguna sintaxis simple de ES6 y ya ha trabajado con el marco de React.
Descripción
** Componentes con estilo React - ACTUALIZACIÓN DEL CURSO MARZO 2020 **:
- ** Curso actualizado a la versión 5 de React styled-components. **
Este curso de componentes con estilo es el siguiente paso para los desarrolladores de React que desean aumentar su valor como desarrolladores front-end al deshacerse de estructuras y nombres de clases de CSS inusuales, importaciones de CSS desordenadas y conflictos de nomenclatura de clases de CSS con sus aplicaciones de React y, en su lugar, quieren adoptar los mejor forma de diseñar las aplicaciones React, con el Biblioteca de componentes con estilo CSS-in-JS!
El marco de componentes con estilo le permite escribe CSS real en tu JavaScript. Esto significa puede usar todas las funciones de CSS que usa y ama con componentes con estilo, que incluyen (pero de lejos no se limitan a) consultas de medios, todos los pseudo-selectores, anidamiento, etc.
En este curso de componentes con estilo, crearemos un contenido muy básico de 2 páginas. móvil primero aplicación usando create-react-app. Usaremos componentes con estilo para diseñar toda nuestra aplicación, incluida la aplicación de estilos globales, la implementación de fuentes de terceros con fuentes de Google, la creación de un diseño receptivo y basado en dispositivos móviles común, la creación de variaciones para componentes a través de accesorios (por ejemplo, un botón grande o pequeño ), implementando un componente de alternancia de tema y cambiando nuestra aplicación entre el modo 'claro' y 'oscuro', así como implementando animaciones con componentes con estilo.
React adoptó el enfoque tradicional de vista / ViewModel para el desarrollo web y los combinó en uno, sin dejar de mantener el código modular y de responsabilidad única. Los componentes con estilo se pueden ver como una extensión de eso, trayendo el estilo al archivo JS también. Todos tienen relaciones uno a uno, por lo que tiene sentido combinarlos siempre que se mantengan modulares. Este curso de componentes con estilo React lo ayudará a comprender el poder de este enfoque y le mostrará cómo construir dichos componentes.
Qué dicen otros estudiantes sobre este curso de React Styled Components:
5/5 estrellas - "Buen curso, mejoró mi comprensión de los componentes con estilo". - Osborne Tunde
5/5 estrellas - “Me encantó el curso que fue extremadamente útil para mí y me ayudó a comprender finalmente cómo funcionan los componentes con estilo. Sin duda alguna, recomiendo este curso y volveré a los futuros cursos de Tom que es un excelente instructor. ¡Gracias!" - Alex Pavlov
5/5 estrellas - “Me encanta este curso, Tom responde muy bien a la pregunta del estudiante. No hay código de copiar y pegar, que sabemos que a todos los estudiantes no les gusta. Hay tanta información nueva y una forma moderna de escribir componentes, me gusta mucho y la implementaré en mis proyectos 🙂 ¡Gracias Tom por ayudarnos! ” - Kadek Pradnyana
5/5 estrellas - “Una gran introducción a los componentes con estilo en React. Pasa por cada uno de los escenarios más comunes para ayudarlo a comenzar a construir. ¡Excelente curso! " - Memo Ramirez
5/5 estrellas - "Una gran introducción a la forma de diseñar componentes de React con estilo". - Ian Taite
5/5 estrellas - “No sabía que esto era posible. Increíble" (traducido) - Alex