Contents |
Si ya estuviste trabajando con Angular estos pasos no son necesarios, pero conviene verificar que ya estén instalados.
npx permite ejecutar paquetes binarios de npm mediante un command-line interface, y se instala con npm
npm install -g npx
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.
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.
Una vez creado el proyecto, te recomendamos que agregues estas configuraciones.
Agregamos estas dependencias
npm i eslint-plugin-react -D
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
}
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"
}
}
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.
Al archivo .gitignore se le pueden incorporar estas líneas:
# VSC - Git Lens
.history
Te dejamos este archivo de ejemplo que tenés que guardar en .github/workflows/build.yml
. No hay que hacer ningún cambio.
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):
