Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¿Qué es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¿Qué son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports dinámicos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Parámetros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¿Qué es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la página

28

Creando la página Detail

29

Agregando un NavBar a nuestra app

30

Estilando las páginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores prácticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¡Felicidades!

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

Midiendo el performance de nuestra app y usando React.memo()

44/50
Recursos

¡Los componentes solo harán render si sus props han cambiado! Normalmente, todos los componentes de React en nuestro árbol pasarán por un render cuando se realicen cambios. Con PureComponent y React.memo(), podemos tener solo algunos componentes renderizados.

Ejemplo:

// mi-archivo.js
{/*...*/}

export default Home = React.memo(HomePage)

Aportes 19

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Para no tener que copiar la url y abrirla en el navegador colocar “–open” este comando abre automaticamente la app en el navegador por defecto

"serve:dev": "webpack --mode 'development' && npx serve dist -s --open"

Generé unos scripts adicionales que les pueden servir para poder controlar el iniciar el servidor (sin tener que hacer el build) y poder hacer el build en modo de producción.

Acá mi repositorio utilizando create-react app

"scripts": {
    "build": "webpack --mode 'development", // Genera un build en modo de producción
    "start:dev": "npx serve build -s", // Inicia un servidor de pruebas para el build generado
    "serve:dev": "npm run build && npm run start:dev" // Corre el build y el serve para no tener que correr más de un comando
}

Windows 10. A mí me funcionó con este script: (el -open me da error, como que no lo reconoce asi que no se lo puse)


"serve:dev": "webpack --mode=development && npx serve dist -s",

Usar React.memo es similar a lo que son PureComponents? Qué diferencia tienen?
Saludos! 😃

Por si les marca el siguiente error al ejecutar npm run server:dev:

[webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.mode should be one of these:
   "development" | "production" | "none"
   -> Enable production optimizations or development hints.

Se corrige quitando las comillas simples de la palabra development:

"serve:dev": "webpack --mode development && npx serve dist -s"

Para aquellos (como yo) que estén usando React v17 o superior, se removió la opción de ver los tiempos de renderizado de los componentes tal como se muestra en el video en el apartado de Timings de la pestaña Performance en Dev Tools, principalmente porque con aplicaciones grandes estas llamadas para definir los tiempos de carga podían desmejorar el rendimiento de la aplicación al sobrecargarla. Aquí pueden ver la nota.

Amigos, esta clase vale ORO
Cada segundo, desarrollar no es tan complejo, pero en el mundo real pensar en performance es INDISPENSABLE, y es algo de lo que suelen carecer los cursos allá afuera, no solo en Platzi, sino en cualquier otra plataforma.

GRANDE MIDUDEV

Muy bueno el uso de React.memo()
Sin embargo puede llegar a ser un arma de doble filo. Cuidao

Tengo un error al ejecutar ./node_modules/.bin/webpack --mode “development” en consola:
’.’ is not recognized as an internal or external command,
operable program or batch file.

Busque en stackoverflow pero hasta el momento no logro conseguir una respuesta, alguien sabe como solucionar?

Vengo del futuro
Si por alguna razon no pueden usar el React profilel de las dev tools

Aqui pueden consutlar la documentacion
Tienen que:

  1. Instalar scheduler > a 0.10.0 y asegurarse tener [email protected]^16.6.0 como mínimo
npm i scheduler -D	
  1. Agregar esto a su webpack.config.js
module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      // ...
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    },
    // ...
  },
  // ...
};
  1. Tienen que agregar –profile a su script de devlopment
    Ejemplo:
"serve:dev": "webpack --profile --mode development && npx serve dist -s",

no se reproduce el video, ni el siguiente 😦

Dejo un script de npm para desplegar la build de produccion en modo desarrollador, levantar el servidor en local y desplegarla como app statica, todo en un comando (npm run start) igual que nos ha enseñado el profe.

  • instalar concurrently desde npm (es para lanzar a la vez el servidor y cliente)
  • agregar como scripts de package.json
"build": "webpack ./src/index.js --mode='development'",
"serve": "npm run build && npx serve dist -s",
"dev:server": "node ./api",
"start": "concurrently --kill-others \"npm run dev:server\" \"npm run serve\"",

Al ejecutar npx serve dist -s me tira este error

Error: EPERM: operation not permitted, mkdir 'C:\Users\Marino'
TypeError: Cannot read property 'get' of undefined
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:228:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:266:24
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:83:7
    at Array.forEach (<anonymous>)
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:82:13
    at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:25)
    at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:173:20)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\mkdirp\index.js:47:53
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205
  if (npm.config.get('json')) {
                 ^

TypeError: Cannot read property 'get' of undefined
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at process.emit (events.js:189:13)
    at process._fatalException (internal/bootstrap/node.js:494:27)
La instalación de [email protected] fracasó con código 7

Ejemplo:

// mi-archivo.js
{/…/}

export default Home = React.memo(HomePage)

no me esta cambiando las categorias… y mi código está bien; que será?
Mi codigo:

import React from 'react'
import { ListOfCategories } from '../components/ListOfCategories'
import { ListOfPhotoCards } from '../container/ListOfPhotoCards'
import { Layout } from '../components/Layout'

const HomePage = ({ categoryId }) => {
  return (
    <Layout title='Tu app de fotos de mascotas' subtitle='Con Petgram puedes encontrar fotos de animales domésticos muy bonitos'>
      <ListOfCategories />
      <ListOfPhotoCards categoryId={categoryId} />
    </Layout>
  )
}

export const Home = React.memo(HomePage, (prevProps, props) => {
  return prevProps.categoryId === props.categoryId
})

Mi consola:

evTools failed to parse SourceMap: webpack:///node_modules/apollo-boost/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-client/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-utilities/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/ts-invariant/lib/invariant.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@wry/equality/lib/equality.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-link/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/zen-observable-ts/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-cache-inmemory/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-cache/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/optimism/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@wry/context/lib/context.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-link-http/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-link-http-common/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/apollo-link-error/lib/bundle.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-hooks/lib/react-hooks.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-common/lib/react-common.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/styled-components/dist/styled-components.browser.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/stylis/stylis.min.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/react-apollo/lib/react-apollo.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-components/lib/react-components.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-hoc/lib/react-hoc.esm.js.map
DevTools failed to parse SourceMap: webpack:///node_modules/@apollo/react-ssr/lib/react-ssr.esm.js.map
react-dom.development.js:12357 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: SideEffect(NullComponent)
printWarning @ react-dom.development.js:12357
lowPriorityWarningWithoutStack @ react-dom.development.js:12378
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12542
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:25689
commitRootImpl @ react-dom.development.js:24937
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
commitRoot @ react-dom.development.js:24922
finishSyncRender @ react-dom.development.js:24329
performSyncWorkOnRoot @ react-dom.development.js:24307
scheduleUpdateOnFiber @ react-dom.development.js:23698
updateContainer @ react-dom.development.js:27103
eval @ react-dom.development.js:27528
unbatchedUpdates @ react-dom.development.js:24433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
render @ react-dom.development.js:27608
eval @ index.js:36
./src/index.js @ app.bundle.js:1736
__webpack_require__ @ app.bundle.js:64
(anonymous) @ app.bundle.js:199
(anonymous) @ app.bundle.js:202
jquery-migrate-3.0.0.min.js:2 JQMIGRATE: Migrate is installed, version 3.0.0
2localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.
Launcher.js:3 *** *** *** request_settings
3Launcher.js:20 launching FocusManager.parse_for_input on DOM mutation event

¡Los componentes solo harán render si sus props han cambiado! Normalmente, todos los componentes de React en nuestro árbol pasarán por un render cuando se realicen cambios. Con PureComponent y React.memo(), podemos tener solo algunos componentes renderizados.

,

Excelentee gracias!!