Instalacion de ReactJS

Pasos previos

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

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:

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

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

    
      {
  "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

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

    

Links relacionados