1

Piedra, papel o tijeras

Adrian
adranuz
26313

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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/26675ea7-432f-4cc1-bcf8-87b4513cfd29/Untitled.png
  • Hay una manera de establecer estilos globales en un archivo js:

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e0920bee-106e-428b-a11c-8e9b1a5aa2cf/Untitled.png

    Este archivo lo tienes que importar en tu aplicación

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/59537e04-7c66-41af-839c-294256f4be8d/Untitled.png
  • De esta manera vas creando tus componentes con styled-components

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/28d2a398-5d16-460d-88a2-c9ad9012631d/Untitled.png
  • 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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/37193c8a-846c-45dd-ad7a-8955fc87a96d/Untitled.png

    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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fd3aefd5-1df4-4e89-9014-1a6c7a439f2a/Untitled.png

    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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f33e0da6-0740-4c84-b0c7-1e2af6e3c2fc/Untitled.png
  • 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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d46fce31-ffa0-40a7-9760-be793534641b/Untitled.png

React

  • Mediante children, puedes decidir donde va a estar el contenido y los componentes que enviaras dentro de otro componente.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f5f6186f-55da-47e2-84cc-911aa03fdeef/Untitled.png
    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/367eec61-fc8e-458d-9b12-db43016c6d71/Untitled.png
  • 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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/03eab82b-afa2-42a5-8a21-e8ec1163f68f/Untitled.png
    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4139e89a-6d5e-47f8-a5ee-931ee3a1dedf/Untitled.png

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

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9527671b-14fa-46f7-9ef1-27fed702b546/Untitled.png
    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/73cdd14d-3d52-45a0-a347-219063095cfb/Untitled.png
    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/808dd9c5-6577-409c-8897-f26bcba579a2/Untitled.png

    Y en este ejemplo mostramos el valor del score, que es en otro componente diferente.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c1ba657e-6c0e-4f27-95a1-de9652822772/Untitled.png
    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/89393627-55ca-4e4e-8d02-a48a375dce78/Untitled.png
  • 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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/aa5556ea-b1fd-4bf0-acb1-3ebc76c15ab5/Untitled.png

    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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1cc27a74-45b1-424c-99fd-f9287b029071/Untitled.png

Creo que eso fue todo…

Me la pase muy bien reforzando todo esto, espero poder aplicarlo de nuevo pronto.

Escribe tu comentario
+ 2