Contents |
Si ya estuviste trabajando con Angular estos pasos no son necesarios, pero conviene verificar que ya estén instalados.
Dentro de Visual Studio Code, las extensiones que recomendamos para trabajar con React deberían ser las mismas con las que trabajaste en Angular y además revisar que tengas:
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: › Javascript + SWC
: elegir la variante Javascript con SWC (herramienta de reemplazo de Babel)También podés usar el template directo React + Javascript + SWC (eso evita que tengas que seleccionar el tipo de proyecto):
npm create vite@latest nombre-de-proyecto -- --template react-swc
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.
Una vez creado el proyecto, te recomendamos que agregues estas configuraciones.
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 jsdom prettier vitest -D
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
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.cjs
debe tener la siguiente configuración:
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
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',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
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 --cache --fix .", // modificar
...
// agregar
"test": "vitest",
"coverage": "vitest run --coverage"
},
Al archivo .gitignore se le pueden incorporar estas líneas:
# VSC - Git Lens
.history
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"
}
Hay que definir un archivo setupTests.js
en el raíz de nuestro proyecto, que tenga el siguiente contenido:
import "@testing-library/jest-dom/vitest"
El archivo vite.config.js
contiene la configuración que necesitamos para ejecutar los tests, es importante agregar un reporter de tipo json-summary
para que el build de Github Actions cree el badge con el % de cobertura automáticamente:
/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
src: '/src',
components: '/src/components',
},
},
test: {
globals: true,
setupFiles: ['./setupTests.js'], // es importante definirlo en un archivo aparte para que se ejecute en otro contexto
environment: 'jsdom',
coverage: {
reporter: ['text', 'json', 'html', 'json-summary'],
},
}
})
Si no configurás el archivo
setupTests.js
te va a aparecer un mensaje de error:Error: Invalid Chai property: toBeInTheDocument
en cada expect.
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.
Incorporemos este archivo que nos ayudará para que el plugin auto-import funcione, así como definiciones extra para el intérprete JS:
{
"compilerOptions"
:
{
"baseUrl"
:
"."
,
"checkJs"
:
false
,
"jsx"
:
"react-jsx"
,
"paths"
:
{
"src/*"
:
[
"./src/*"
],
"components/*"
:
[
"./src/components/*"
]
}
}
}
Nuestra recomendación es que no actives el chequeo de tipos de javascript (para eso es preferible usar typescript). Si lo activás mediante la opción:
...
"checkJs": true,
...
en el archivo jsconfig.json
, tenés que agregar esta configuración al archivo vite.config.js
:
coverage: {
// agregar
provider: 'v8',
//
reporter: ['text', 'json', 'html', 'json-summary'],
},
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):
