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 14 ó superior).
• 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

npx

npx permite ejecutar paquetes binarios de npm mediante un command-line interface, y se instala con npm

      npm install -g npx

    

Plugins Visual Studio Code

Dentro de Visual Studio Code, las extensiones que recomendamos para trabajar con React deberían ser:

• compartidas con el entorno de Angular
  • ESLint - Dirk Baeumer
  • Prettier - Code formatter - Prettier
  • Prettier - ESLint - Rebecca Vest
• compartidas con el entorno de Typescript
  • JEST: que permite integrar en VSC los test unitarios que vamos a ejecutar con Jest.
  • Jest Runner: para ejecutar o debuggear tests unitarios contra la terminal (cuando tengamos muchos tests y el primer plugin resulte engorroso).

Opcionalmente podés instalar la extensión ES7 React/Redux/GraphQL/React-Native snippets de dsznajder.

Crear un proyecto React de cero

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

      npx create-react-app nombre-de-tu-app

    

Si en la instalación te aparece un mensaje de error: Error while creating new React app ("You are running create-react-app 4.0.3, which is behind the latest release (5.0.0)"), la solución es ejecutar

      npx clear-npx-cache

    

y probar nuevamente crear la aplicación React mediante el comando npx create-react-app ....

Por defecto la aplicación cliente levantará en el puerto 3000. 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.

Agregar dependencias

Agregamos estas dependencias

      npm i eslint-plugin-react -D

    

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.json debe tener la siguiente configuración:

      {
  "parserOptions": {
    "ecmaVersion": 2021,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },

  "settings": {
    "react": {
      "version": "detect"
    }
  },

  "plugins": [
    "react"
  ],

  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "ignorePatterns": ["/build/**"],

  "rules": {
    "semi": ["error", "never"],
    "prefer-const": [
      "warn",
      {
        "destructuring": "any",
        "ignoreReadBeforeAssign": false
      }
    ],
    "getter-return": ["error"],
    "no-async-promise-executor": ["warn"],
    "no-cond-assign": ["warn", "except-parens"],
    "no-dupe-keys": ["error"],
    "no-empty": ["warn"],
    "no-ex-assign": ["error"],
    "no-extra-boolean-cast": [
      "error",
      {
        "enforceForLogicalOperands": true
      }
    ],
    "no-extra-parens": ["warn", "all"],
    "no-func-assign": ["error"],
    "no-import-assign": ["error"],
    "no-inner-declarations": ["error", "both"],
    "no-obj-calls": ["error"],
    "no-promise-executor-return": ["error"],
    "no-sparse-arrays": ["error"],
    "no-template-curly-in-string": ["error"],
    "no-unreachable": ["error"],
    "no-unreachable-loop": ["error"],
    "no-unsafe-optional-chaining": ["error"],
    "require-atomic-updates": ["error"],
    "use-isnan": ["error"],
    "block-scoped-var": ["error"],
    "consistent-return": ["error"],
    "default-param-last": ["warn"],
    "no-alert": ["error"],
    "no-caller": ["error"],
    "no-constructor-return": ["error"],
    "no-global-assign": ["error"],
    "no-lone-blocks": ["warn"],
    "no-multi-spaces": ["warn"],
    "no-new": ["warn"],
    "no-param-reassign": ["error"],
    "no-proto": ["warn"],
    "no-redeclare": ["error"],
    "no-return-assign": ["error"],
    "no-return-await": ["warn"],
    "no-self-assign": ["error"],
    "no-sequences": ["warn"],
    "no-useless-catch": ["warn"],
    "no-useless-return": ["error"],
    "no-void": ["error"],
    "no-with": ["error"],
    "no-undef": ["off"],
    "react/display-name": ["off"],
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

    

Configuración del proyecto

Al archivo package.json le vamos a configurar JEST (el framework de testeo unitario) para tener un coverage más exacto (borrale los comentarios porque no están permitidos en json):

        "scripts": {
    ...,
    "eject": "react-scripts eject", // se agrega una coma
    "lint": "eslint .",             // línea a agregar para ejecutar el linter
    "lint:fix": "eslint . --fix"    // línea a agregar para ejecutar el fix del linter
  },
  "eslintConfig": {
    // dejar la configuración de eslintConfig tal cual está
  },
  "jest": {
    "coverageReporters": [ "html", "text-summary", "json-summary"],
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/reportWebVitals.js",
      "!**/index.js",
      "!**/setupTests.js",
      "!**/node_modules/**",
      "!**/vendor/**"
    ]
  },

    

Luego ejecutá por la línea de comando

      npm run lint:fix

    

para que el linter corrija los errores y advertencias automáticamente.

.gitignore

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

      # VSC - Git Lens
.history

    

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