Este es el primer artículo que escribo en esta nueva plataforma. Mi objetivo, como tantas otras veces, es intentar llevar un seguimiento de mis progresos en el mundo del desarrollo.

Para ir calentando motores y, coincidiendo con que precisamente hoy he tenido que completar un pequeño miniproyecto, os voy a contar la forma que tengo de estructurar mis proyectos y os enseñaré un poco el resultado.

Iniciando proyectos con Vite

Aunque inicié mi andadura en el mundo de la programación web de la mano del famoso create-react-app, es cierto que con Vite he descubierto una forma mucho más rápida y cómoda de crear mis proyectos.

Una de las cosas que más me gusta de esta herramienta es su simplicidad.

npm init vite@latest magic-ball -- --template create-vite@latest

Con este sencillo comando podremos crear un proyecto React en la carpeta magic-ball con las dependencias necesarias.

Para iniciar el proyecto, bastará con que accedamos a la carpeta y realicemos la instalación de los paquetes con nuestro gestor.

cd magic-ball
npm install

Finalmente podremos lanzar la versión de desarrollo, la cual incluye plugins tan útiles como Fast Refresh, mediante el archiconocido comando:

npm run dev

Objetivos básicos del proyecto.

El proyecto, en sí, es algo tremendamente simple: crear una versión WebApp de la famosa Magic Ball (la bola 8 del billar que al moverla te responde a la pregunta que le hagas).

Esta primera versión (y posiblemente última) es sencilla en su concepto: un único componente que recibe el mensaje y que lo muestra.

A nivel estructural, mis últimos proyectos siguen el mismo árbol

project
└── src
│   └── components
│    │   └── mainBall
│    │    │  MainBall.jsx     
│    │    │  mainBall.css
│    └─ img

En MainBall.jsx hay una primera línea en la que se importa el CSS local:

import "./magicBall.css";

De esta forma, junto con nombrar las clases CSS con prefijos relacionados con el componente, los estilos quedan localizados a los archivos a los que hacen referencia.

Funcionalidad

El componente MainBall se actualiza una vez se presiona la bola y cuando decidimos restablecer el sistema.

Para ello utilizamos el useEffect vinculado al estado de la variable visible.

// Este useEffect se activa ante un cambio en la variable visible
useEffect(() => {
   if(visible) {
      setVisibleCSS("m-result-visible");
   }else{
      setVisibleCSS("");
    }
}, [visible]);

Al componente también le pasamos el setter del estado Tirada, que, al pasar a TRUE genera un nuevo valor del mensaje.

// Estos son los gestores de los dos eventos onClick
const handleClick = () => {
   setVisible(true);
};

const handleRestart = () => {
   setVisible(false);
   setTirada(true);
 }

Demo

Podéis ver una demo en magic.mdgmedia.es

El repo lo tenéis en https://github.com/mdgdeveloper/magicball