2023 migration

.eslintrc.cjs

@@ -0,0 +1,78 @@
+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 },
+    ],
+  },
+}

.github/workflows/build.yml

@@ -1,6 +1,3 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build React App
 
 on: [push, pull_request]
@@ -9,13 +6,13 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js 15.x
-      uses: actions/setup-node@v1
+    - uses: actions/checkout@v3
+    - name: Use Node.js 20.x
+      uses: actions/setup-node@v3
       with:
-        node-version: 15.x
+        node-version: 20.x
     - name: Cache node modules
-      uses: actions/cache@v1
+      uses: actions/cache@v3
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.nvmrc

@@ -1 +1 @@
-18.4.0
+20.4.0

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
+    "editor.formatOnSave": true, 
+    "files.autoSave": "onFocusChange" 
+}

README.md

@@ -7,18 +7,16 @@
 
 ## Variante con hooks
 
-Anteriormente dijimos que un componente podía definirse
+Para tener el conversor necesitamos definir:
 
-- como una función
-- o como una clase
-
-y que la variante de clase era necesaria para poder definir estado. En este branch vamos a definir el conversor como un componente funcional:
+- el estado: lo que queremos modificar (las millas)
+- vs. lo que se puede calcular (los kilómetros en este caso, pero también el color del badge si hay un error en la conversión)
 
 ```jsx
 const App = () => {
   const [millas, setMillas] = useState(INITIAL_VALUE)
 
-  const kilometros = millas === INITIAL_VALUE ? '<Ingrese millas>' : (isNaN(millas) ? '<Ingrese un valor numérico>' : convertirMillasAKms(millas))
+  const kilometros = millas === INITIAL_VALUE ? '<Ingrese millas>' : isNaN(millas) ? '<Ingrese un valor numérico>' : convertirMillasAKms(millas)
   const colorConversion = millas === INITIAL_VALUE || isNaN(millas) ? 'warning' : 'success'
 
   return (
@@ -59,8 +57,6 @@ Como bien explica [la documentación oficial de React](https://es.reactjs.org/do
 Esto significa que dentro de la función App, podemos obtener el valor de las millas con la referencia `millas` para convertirlo a kilómetros. Y cuando el usuario escriba un valor nuevo en el input, eso debe actualizar el estado mediante la invocación a la función `setMillas`. Como consecuencia,
 
 - nos concentramos solo en la parte del estado que queremos cambiar
-- nuestro componente puede seguir siendo funcional, por lo tanto se concentra solo en la parte **presentacional** (cómo muestra la información al usuario), 
-- es más declarativo (dice menos cómo lo implementa y lo delega en un motor, en este caso el que mantiene el estado utilizando React Hooks), esto es tanto una ventaja como una contra, si necesitamos tomar el control de ciertas cosas que ocurran, pueden ver el ejemplo de la heladería
-- puede tener una curva de aprendizaje más elevada para los desarrolladores que estén acostumbrados a trabajar con clases, aunque en general hay que reconocer que la variante funcional + hooks suele ser más simple que la misma resolución con clases.
+- nuestro componente puede seguir siendo funcional, por lo tanto se concentra solo en la parte **presentacional** (cómo muestra la información al usuario)
 
-En la cursada dejaremos que uds. elijan su variante predilecta.
+En definitiva, un componente React puede ser visto como una función, como en este ejemplo, o como una clase. Si te interesa ver el segundo approach, podés ver [este ejemplo](https://legacy.reactjs.org/docs/react-component.html) o bien [la documentación oficial de React](https://react.dev/reference/react/Component).

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>