Este proyecto es sobre el juego de piedra, papel o tijeras. Algunas cosas a destacar es que intenté realizarlo con buenas practicas de manejo de equipos.
master
, develop
y ramas hijas para hacer tareas: styles
y desktop
. develop
hace merge de sus ramas hijas y en Github hace pullRequest hacia master
.Herramientas y hacks que se aprendieron a usar en este proyecto
Al parecer style-components aun no soporta cualquier sintaxis en producción, en mi caso no me permitió agregar una fuente.
Existe babel-plugin-styled-components
que nos ayuda a renderizar nuestros estilos, aunque según la documentación, no es necesario pero sí recomendado. Este se agrega en las opciones del babel loader.
Hay una manera de establecer estilos globales en un archivo js:
Este archivo lo tienes que importar en tu aplicación
De esta manera vas creando tus componentes con styled-components
Poner lógica en tu estilos
En styled-components puedes usar variables como si estuvieras en js, solo que las variables se declaran en las propiedades que le mandas al tag. En la siguiente imagen se ve como al tag hecho con styled-components se le envian 3 props por lo que ahora tenemos 3 variables que podemos usar en la lógica del componente: color
, onClick
y isShadowAnimated
son nuestras variables.
Ejemplo de uso de variables para dar estilos. La sintaxis en si es: si existe esta propiedad entonces corre la siguiente lógica: si color.icon es 'default' entonces has esto, si no has esto otro.
Este es otro ejemplo, solo que en este tomamos tanto la propiedad como el valor, solo hay que tomar en cuenta que esto no se va a poder hacer con todas las propiedades, por ejemplo con animaciones no se puede.
Estilos heredados a otro componente: se tienen los estilos de tu botón y de repente quieres uno igual pero blanco, pues creas uno heredado y le das el color blanco.