Piedra, papel o tijeras

Curso Práctico de React JS 2019

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

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.

Existen las ramas 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.
El deploy se hizo en Vercel.
Se siguió medianamente la guía de estilos dados por la pagina.

<h1>Aprendizaje Técnico</h1>

Herramientas y hacks que se aprendieron a usar en este proyecto

Style-components

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.

React

Mediante children, puedes decidir donde va a estar el contenido y los componentes que enviaras dentro de otro componente.
Se puede crear un contexto, pero a diferencia de redux este se guarda en una variable y pueden haber muchos, siendo que no hay uno único.

Después lo importas donde lo necesites para comparar el contexto, como ves en este ejemplo damos valor al score.

Y en este ejemplo mostramos el valor del score, que es en otro componente diferente.
Traspasar funciones de un componente a otro. Esto ya lo había visto pero es un poco confuso.

La lógica es la siguiente: tienes un componente padre que es donde tienes la función que funciona, pero quieres que esa función corra a travez de la interacción con un componente diferente. De nuevo: quieres que el click del componente botón haga que cambie el componente tablero.

Para esto, en tablero esta la función que necesitamos, lo único que vas a hacer es enviar esa función al componente botón. En este caso la función se llama onClick pero se la mandamos con el prop olo.

Cuando vas al componente hijo, recibes el prop olo que contiene toda la lógica del componente de arriba. Es como si están conectados olo de aquí y onClick del padre, lo que hagas aquí con él tendrá las consecuencias arriba. por lo que solo corre la función y tendrás el cometido.