/devtalles-react

Mis notas personales del Curso de React: De cero a experto (Hooks y MERN) brindado por Fernando Herrera.

Primary LanguageJavaScript

devTalles - Curso de React: De cero a experto (Hooks y MERN)

https://cursos.devtalles.com/courses/take/react-cero-experto

Examples (deploy)

Descripción

Mis notas personales del Curso de React: De cero a experto (Hooks y MERN) brindado por Fernando Herrera.

Tabla de contenidos

Secciones

Sección 1: Introducción

Sección 2: Introducción a React y conceptos generales

Sección 3: Introducción a JavaScript moderno

Recursos

Sección 4: Primeros pasos en React

Instalar React usando yarn + vite:

brew install yarn
yarn create vite
cd <app-name>
yarn install
yarn dev

Instalar React usando create-react-app (CRA):

npx create-react-app <app-name>
cd <app-name>
npm install
npm run dev

Para cambiar de npm a yarn o viceversa, es suficiente con borrar la carpeta jarn.lock o package-lock.json y ejecutar nuevamente npm install o yarn install, pero esto no se recomienda.

El archivo package-lock.json solo se crea con cra, es decir, con una aplicación creada con vite no aparece este archivo.

Single Page Application (SPA): Tipo de aplicación que se crea por defecto con create-react-app en React. Más información.

Vite fue creado por Evan You, el mismo creador de vueJS.

Subsecciones

Tarea
  1. Crear un nuevo componente dentro de la carpeta SRC llamado CounterApp
  2. El CounterApp debe de ser un Functional Component
  3. El contenido del CounterApp debe de ser: 
        <h1>CounterApp</h1>
    <h2> { value } </h2>
  4. Donde "value" es una propiedad enviada desde el padre hacia el componente CounterApp (Debe ser númerica validada con PropTypes)
  5. Reemplazar en el index.js ó main.jsx el componente de <PrimeraApp /> por el componente <CounterApp /> (no se olviden del value que debe de ser un número)
  6. Asegúrense de no tener errores ni warnings (Cualquier warning no usado, comentar el código)

Recursos

Sección 5: Pruebas unitarias y de integración - Probando las secciones anteriores

_AAA_: Arrange - arreglar, Act - Actuar , Assert - Afirmar
_Partes de las pruebas_: 1. Inicialización, 2. Estímulo (lo que se aplica al sujeto de las pruebas), 3. Las aserciones (observar el comportamiento esperado)
_en caso de ver el error "You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.": Cambiar extensión de los archivos jest.config.js y babel.config.js a .cjs_
  • Mi primera prueba y configuraciones iniciales con yarn:
yarn add --dev jest
yarn add -D @types/jest
yarn add --dev babel-jest @babel/core @babel/preset-env
yarn add -D whatwg-fetch
yarn add --dev @testing-library/react
yarn add -D jest-environment-jsdom
yarn add -D @babel/preset-react

Con npm sería:

npm install -save-dev jest
npm install -D @types/jest
npm install --save-dev babel-jest @babel/core @babel/preset-env
npm install -D whatwg-fetch
npm install --dev @testing-library/react
npm install -D jest-environment-jsdom
npm install -D @babel/preset-react

Agregar al archivo package.json: "test": "jest --watch All" en la sección de scripts:

"scripts": {
    "test": "jest --watch All"
  }

Archivos de configuración babel.config.cjs, jest.config.js y jest.setup.js. Con esto ya debe de estar bien configurado vite para hacer testing usando jest y testing-library.

React Testing Library es muy bueno para trabajar con el Dom, simular clics... y es mejor para ello que Jest (que está más orientada a las aserciones, mocks... ). Ambas pueden funcionar juntas para los tests.

  - Sí Error: ReferenceError: module is not defined in ES module scope
  This file is being treated as an ES module because it has a '.js' file extension and '...' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
  Cambiar contenido de `jest.config.js`

  ```
  module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  setupFiles: ['./jest.setup.js']
  }
  ```

  por

  ```
  export default {
  testEnvironment: 'jest-environment-jsdom',
  setupFiles: ['./jest.setup.js']
  }
  ```
  - Sí aparece `describe` y/o `test` como no definidos en vscode, agregar las siguiente línea en el archivo .`eslintrc` :
  "env": {
     "jest": true
  }

Recursos

Sección 6: GifExpertApp - Aplicación

Deploy de GifExpertApp en GitHub Pages y netlify.

brew install http-server
yarn build
cd dist
http-server -o

Recursos

Sección 7: Generando el build de producción y despliegues

  • Comandos útiles de git
// Crear respositorio
git init

// Agregar todos los archivos al repo para actualización
git add .

// Realizar commit
git commit -m "First commit"

// Restaurar repo a como estaba en el último commit
git checkout -- .

// Agregar un repositorio externo a donde actualizar en remoto
git remote add origin <git url>

// Cambiar el nombre de la rama y cambiarse a ella
git branch -M main

// Actualizar repositorio remoto
// La primera vez que se hace el push se piden las credenciales de git para acceder
git push -u origin main
  • Actualizar código para ser usado en Github Pages

Cambiar en dist/index.html o docs/index.html la ruta a los archivos .css y .js a relativa para que se despligue bien en github pages, es decir, de src="/..." a src="./...". Ejemplo de cambios en index.html

Recursos

Sección 8: Testing - Probando la aplicación de GifExpert

Un Mock es una simulación de una función y se usa para capturar eventos, parámetros...

export default {
  testEnvironment: 'jest-environment-jsdom',
  setupFiles: ['./jest.setup.js'],
}

Recursos

Sección 9: Profundizando Hooks - Generales

const { a, b } = false // a = undefined, b = undefined
null // null
!null // true
!!null // false
undefined // undefined
!undefined // true
!!undefined // false
!!data && data // true and data (devuelve el valor de data sí data no es undefined o null)
const { a, b, ...rest } = !!data && data // desestructuración para asignar el valor a las variables a partir de data sí tiene un valor

Recursos

Sección 10: Profundizando Hooks - useReducer

Recursos

Sección 11: Profundizando Hooks - useContext

  • Preparación de nuestra aplicación con rutas

Install react-router-dom 6:

yarn add react-router-dom@6

Recursos

Sección 12: Pruebas unitarias y de integración - Hooks

Recursos

Sección 13: Bonus: Repositorio de Custom Hooks

Recursos

Sección 14: HeroesApp - Single Page Application (SPA)

Installation:

//  react router v.6
yarn add react-router-dom@6

// query-string to handle url params
yarn add query-string

Recursos

Sobre el manejo de las imágenes (assets) por parte de Vite Si quieren hacer el build de la app para hacer el deploy, si se fijan verán que los assets con las imágenes no se copian automáticamente a la carpeta dist con el build de producción.

Esto es debido a Vite y como estamos creando las URL's de las imágenes en HeroCard.jsx.

Si importamos directamente una imagen con import imgUrl from '/assets/heroes/marvel-spider.jpg', Vite se encargará de gestionarlo y añadirá el archivo al build de producción, pero nosotros estamos creando la URL con const heroImageUrl = /assets/heroes/${ id }.jpg;, de ahí que Vite no las copie automáticamente.

La solución sería crear una carpeta llamada public en la raíz del proyecto (al mismo nivel que package.json o index.html) y dentro de esta carpeta mover la carpeta heroes que contiene todas las imágenes.

De esta forma ya añadimos la carpeta heroes al build de producción.

Para acceder a "public" tenemos que usar la ruta raíz /, por lo que ahora modificaremos la URL de heroImageUrl en el archivo HeroCard.jsx quedando: const heroImageUrl = /heroes/${ id }.jpg;.

De esta forma ya se copian automáticamente las imágenes, y funciona nuestra app tanto en desarrollo como producción.

Si quieren leer más sobre los assets y cómo manejarlos en Vite: https://vitejs.dev/guide/assets.html.

Sección 15: Protección de rutas

Deploy

Sección 16: Pruebas de nuestra aplicación de Héroes

Recursos

Sección 17: JournalApp - MaterialUI - Estructura y Diseño

Instalación de Material UI:

yarn add @mui/material @emotion/react @emotion/styled
yarn add @mui/icons-material

Recursos

Sección 18: Redux - ¿Qué es y conceptos? + React Redux

Instalar redux toolkit y react-redux:

yarn add @reduxjs/toolkit react-redux

Instalar axios:

yarn add axios

Thunks: acción que es asíncrona que dispara otra acción.

RTK Query: está hecho para optimizar y controlar las peticiónes http (como lo hace sqlquery, axios, fetch) pero usa caché interno que mejora mucho el rendimiento de la aplicación. Viene ya incluído en Redux Toolkit.

Recursos

VSCode plugins

Atajos del teclado (MacOSx) con vscode

  • Cambiar el nombre de una variable en todo el documento: Seleccionar la variable + fn + F2
  • Poner comentario en línea: Cmd + , (después de seleccionar el texto o sobre la línea a comentar)
  • Ordenar líneas ascendentemente (css styles): Cmd + Shift + P > Sort Lines Ascending
  • Crear un functional-component. Snippet: rafc hay que tener instalado ES7 en vscode. Sí no funciona ver esto
  • Para duplicar una línea en vscode, simplemente sin seleccionar nada sobre la línea: Cmd + c, Cmd + v
  • Snippets en vscode. VSCode tiene algunos snippets predefinidos como "clg" o "log" para console.log().
  • Crear un snippets con vscode. cmd + shift + p > configure users snippets > javascript Para marcar todo el texto: cmd + option + flechas