Skip to main content

Estructura Clase

En esta sesión vamos a detallar los pasos que hemos seguido en clase para preparar el proyecto con la estructura final que hemos usado para nuestro ejemplo. Los pasos son los siguientes

  1. Creamos el proyecto con Vite
mkdir workshop \
&& cd workshop \
&& npm create vite@latest personal-portfolio -- --template react-ts
  1. Instalamos las dependencias del proyecto mediante npm
cd personal-portfolio \
&& npm install react-router@6.8.2 react-router-dom@6.8.2 i18next@19.9.2 i18next-browser-languagedetector@6.0.1 react-i18next@12.2.0  jwt-decode@3.1.2 react-helmet-async@1.3.0 lottie-react@2.3.1 styled-components@5.2.1
  1. Instalación las dependencias de desarrollo
npm install --save-dev @types/react-router-dom@5.1.7 @types/styled-components@5.1.7 @types/node@18.14.6
  1. Vamos ahora a instalar las dependencias para el linter, veremos este concepto en la última sesión de CI/CD, pero dejaremos instalado el linter desde un inicio.
npm install --save-dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-prettier eslint-plugin-import eslint-plugin-react

Y por último añadiremos el plugin the airbnb y todas sus dependencias mediante la herramienta install-peerdeps.

npx install-peerdeps --dev eslint-config-airbnb

  1. A partir de ahora, vamos a aplicar los cambios para añadir la estructura del proyecto.

  2. Reemplazamos los ficheros de la carpeta public.

  3. Añadimos la carpeta models con los modelos de la aplicación.

  4. Modificamos el archivo main.tsx e main.css para añadir la lógica global y los estilos globales.

  5. Añadir la carpeta de styles para añadir los estilos.

  6. Modificamos la estructura de app.tsx, movemos a la carpeta components y añadimos la navegación.

Clase -> Aquí vemos como aplicar Styled components en el Landing page y como funciona Lottie.

  1. Añadimos la carpeta constant con las constantes del proyecto.

  2. Añadimos la carpeta utils con la lógica de autenticación y los data mocks.

  3. Añadir el archivo .env para las variables de entorno.

  4. Añadimos la carpeta context con los contextos de autenticación y aplicación.

  5. Añadimos la carpeta hooks con la lógica de los hooks.

  6. Añadimos la carpeta locales y el fichero i18n.ts para la internacionalización.

  7. Dentro de la carpeta components implementamos el resto de componentes.