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

    

yarn

Yarn es un manejador de paquetes similar a npm, se instala globalmente desde la consola:

      npm install --global yarn

    

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
cd nombre-de-tu-app
yarn start

    

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 una dependencia

      yarn add 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:

      {
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "ignorePatterns": ["/build/**"],
  "plugins": ["react"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "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"]
  }
}

    

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

      yarn 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