Instalacion de ReactJS

Pasos previos

Si ya estuviste trabajando con Angular estos pasos no son necesarios, pero conviene verificar que ya estén instalados.

• Si estás en entorno Windows te recomendamos instalarte Git Bash
• Seguimos con NodeJS, preferentemente la última versión (tiene que ser 20.x).
• Luego NPM (Node Package Manager), con el que vamos a hacer los builds de nuestras aplicaciones.
• El editor de texto que vamos a soportar en la cursada es Visual Studio Code (hay una versión portable si estás en una máquina sin privilegios de administrador).

Específicos de React

Plugins Visual Studio Code

Dentro de Visual Studio Code, te recomendamos que crees un perfil vacío y lo asocies a tus nuevos proyectos React (podés ver cómo se trabaja con perfiles en VSCode en este video, la recomendación es partir con un profile totalmente vacío. También te dejamos este tutorial muy piola - en inglés y la documentación oficial). Las extensiones que recomendamos para trabajar son:

• ESLint - Microsoft: integra las reglas definidas en el linter con el IDE
• Prettier - ESLint - Rebecca Vest: formatea el código según la configuración de Prettier
• npm intellisense - de Christian Kohler: te permite autocompletar dependencias buscándolas en npm
• VSCode React Refactor: agrega refactors de los componentes de React
• Vitest - Vitest: para ejecutar los tests de frontend desde el VSC
• y por supuesto Git Lens - Git supercharged para manejarte con git

Opcionalmente podés instalarte

• Import Cost - Wix: te dice cuánto pesan (en KB) los imports de cada archivo que hacés en tus componentes

Crear un proyecto React de cero

Para crear un proyecto React desde la consola Git Bash o bien desde una terminal Linux escribimos:

      npm create vite@latest nombre-del-proyecto

    

Y luego

• ✔ Select a framework: › React: seleccionar React como framework de UI
• ✔ Select a variant: › Typescript + SWC: elegir la variante Typescript con SWC (herramienta de reemplazo de Babel)

También podés usar el template directo React + Typescript + SWC (eso evita que tengas que seleccionar el tipo de proyecto):

      npm create vite@latest nombre-de-proyecto -- --template react-swc-ts

    

Por defecto la aplicación cliente levantará en el puerto 5173. Como suele quedarse levantada aun cuando canceles la línea de comando y el navegador, te dejamos este link que te dice cómo bajar el proceso del sistema operativo para correr otro ejemplo.

Configuraciones adicionales para Algoritmos III

Una vez creado el proyecto, te recomendamos que agregues estas configuraciones.

Versión de Typescript

Lamentablemente, versiones de Typescript 5.4 ó posterior tienen problemas con la extensión JS/TS de VSCode así que nuestra recomendación es que fijes la versión de Typescript en 5.3, cambiando la versión en el archivo package.json a

        "typescript": "~5.3.1",

    

Este paso hay que hacerlo antes de ejecutar npm install o de lo contrario te conviene borrar la carpeta node_modules y el archivo package-lock.json y volver a ejecutar el comando

Agregar dependencias

Agregamos estas dependencias de Prettier y Vitest (el framework de testing)

      npm i @testing-library/react @testing-library/jest-dom @testing-library/user-event @vitest/coverage-v8 @vitejs/plugin-react-swc jsdom prettier vitest -D

    

Archivo .nvmrc

Tener un archivo .nvmrc es conveniente si todo el equipo trabaja con NVM (el versionador de Node). El contenido especifica qué versión de Node vamos a utilizar:

      20.4.0

    

Para la cursada 2024 vamos a trabajar con Node 20, que será la versión activa al menos hasta mediados de Octubre. Para el 2025 migraremos a la versión 22.

Archivos útiles

En la carpeta raíz creá los siguientes archivos

• .markdownlint.json (configuración del Linter para archivos con extensión .md), con el siguiente contenido

      {
  "MD013": false,
  "MD024": false,
  "MD025": false
}

    

• .prettierrc (configuración de Prettier para eliminar puntos y coma, definir tab de 2 espacios, utilizar single quote, etc.) Es importante que tod@s tengan esta configuración para que no haya un montón de conflictos en git a la hora de pushear.

      {
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

    

Linter para javascript

El archivo .eslintrc.cjs debe tener la siguiente configuración:

      module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

    

Configuración del proyecto

Al archivo package.json le modificamos el script lint y le agregamos test y coverage (borrale los comentarios porque no están permitidos en json):

        "scripts": {
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix", // agregarle --fix
    ...
    // agregar
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },

    

.gitignore

Al archivo .gitignore se le pueden incorporar estas líneas:

      # VSC - Git Lens
.history

    

Archivo de configuración para Visual Studio Code

Te recomendamos que dentro del proyecto crees una carpeta .vscode y dentro un archivo settings.json que tenga este contenido:

      {
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
    "editor.formatOnSave": true, 
    "files.autoSave": "onFocusChange" 
}

    

Configuración para el testeo unitario de frontend

El archivo vite.config.ts contiene la configuración que necesitamos para ejecutar los tests, es importante tener un reporter que sea válido para la herramienta de cobertura que utilices (puede ser json-summary o lcov):

      /// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      src: '/src',
      components: '/src/components',
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      reporter: ['lcov', 'json', 'html', 'json-summary'],
    },
  }
})

    

Por otra parte, los imports conviene hacerlos en forma absoluta, desde src para las definiciones de dominio, services, etc. y src/components para los componentes de React.

Ejemplo de un archivo para Github Actions

Te dejamos este archivo de ejemplo que tenés que guardar en .github/workflows/build.yml. No hay que hacer ningún cambio.

Cómo configurar los badges en tu README

• Para agregar el badge del build de Github Actions, seguí estas instrucciones

• Para agregar el badge del porcentaje de cobertura, tenés que agregar la imagen que genera el mismo build de Github Actions (tal cual está escrito):

      ![coverage](./badges/coverage/coverage.svg)

    

Links relacionados

• Temario Algoritmos III