隆Bienvenida! Este es un curso especial de React Hooks

1

驴Qu茅 aprender谩s en el Curso Profesional de React Hooks?

2

驴Qu茅 son los React Hooks y c贸mo cambian el desarrollo con React?

Introducci贸n a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusi贸n de React Hooks y React Context

6

useReducer: como useState, pero m谩s escalable

7

驴Qu茅 es memoization? Programaci贸n funcional en JavaScript

8

useMemo: evita c谩lculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita c谩lculos innecesarios en funciones

11

Optimizaci贸n de componentes en React con React.memo

12

Custom hooks: abstracci贸n en la l贸gica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: an谩lisis y retos de Platzi Conf Store

15

Instalaci贸n de Webpack y Babel: presets, plugins y loaders

16

Configuraci贸n de Webpack 5 y webpack-dev-server

17

Configuraci贸n de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creaci贸n de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetaci贸n y estilos del home

23

Maquetaci贸n y estilos de la lista de productos

24

Maquetaci贸n y estilos del formulario de checkout

25

Maquetaci贸n y estilos de la informaci贸n del usuario

26

Maquetaci贸n y estilos del flujo de pago

27

Integraci贸n de 铆conos y conexi贸n con React Router

Integraci贸n de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la p谩gina de checkout

31

useRef en la p谩gina de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicaci贸n con la API de PayPal

34

Integraci贸n de pagos con la API de PayPal

35

Completando la integraci贸n de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicaci贸n con la API de Google Maps

37

Integraci贸n de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimizaci贸n de aplicaciones web con React

41

Integraci贸n de React Helmet para mejorar el SEO con meta etiquetas

42

An谩lisis de performance con Google Lighthouse

43

Convierte tu aplicaci贸n de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y cons煤mela con React.js

驴Qu茅 sigue en tu carrera profesional?

45

Pr贸ximos pasos para especializarte en frontend

Convierte tu aplicaci贸n de React en PWA

43/45

Lectura

Preparemos nuestra aplicaci贸n para convertirla en una PWA


Lo primero que tenemos que crear es nuestro service-worker.js dentro de la carpeta /public:

const doCache = false;
const CACHE_NAME = 'pwa-cache';
鈥
self.addEventListener("activate", event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys()
      .then(keyList =>
        Promise.all(keyList.map(key => {
          if (!cacheWhitelist.includes(key)) {
            console.log(`Deleting cache: ${key}`)
            return caches.delete(key);
          }
        }))
      )
  );
});
鈥
self.addEventListener('install', function (event) {
  if (doCache) {
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then(function (cache) {
          fetch("manifest.json")
            .then(response => {
              response.json()
            })
            .then(assets => {
              const urlsToCache = [
                "/",
                assets["bundle.js"]
              ]
              cache.addAll(urlsToCache)
              console.log('cached');
            })
        })
    );
  }
});
鈥
self.addEventListener('fetch', function (event) {
  if (doCache) {
    event.respondWith(
      caches.match(event.request).then(function (response) {
        return response || fetch(event.request);
      })
    );
  }
});


La configuraci贸n previa nos permite registrar nuestra aplicaci贸n debidamente. Ahora vamos a crear el archivo de configuraci贸n donde podremos agregar el nombre de nuestra aplicaci贸n, 铆cono entre otras caracter铆sticas importantes que describen la aplicaci贸n.

Crear el archivo manifest.json en la carpeta /public:

{
  "short_name": "Platzi Conf Store",
  "name": "A simple Store",
  "icons": [
    {
      "src": "assets/icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "background_color": "#222",
  "theme_color": "#222",
  "display": "standalone"
}


Descarga el 铆cono de React de la secci贸n de recursos y agr茅galo a la carpeta /public.

Configurando Webpack para copiar los archivos necesarios al compilar el proyecto:


Para continuar con el proceso de la construcci贸n de la PWA es necesario instalar un plugin para webpack que nos ayudar谩 a copiar los archivos de la carpeta /public a la carpeta de nuestro proyecto compilado.

npm install copy-webpack-plugin --save-dev


Una vez instalado, es necesario agregar la configuraci贸n necesaria en el archivo wepack.config.js

Primero importamos copy-webpack-plugin en la parte superior del archivo

const CopyPlugin = require('copy-webpack-plugin');


Agregamos la configuraci贸n necesaria en la secci贸n de plugins:

    new CopyPlugin({
      patterns: [
        { from: 'public/manifest.json', to: '' },
        { from: 'public/service-worker.js', to: '' },
        { from: 'public/icon.png', to: 'assets' },
      ],
    }),


En este caso estamos agregando 3 elementos a la carpeta dist, el primero es nuestro archivo manifest, luego agrega el archivo service-worker.js y al final el archivo icon.png, de esta forma al compilar el proyecto podemos disponer de estos archivos dentro del compilado final.

Agregar service worker a index.html


Una de las tareas que tenemos que realizar antes de probar nuestra aplicaci贸n es agregar el soporte del service worker al proyecto creando la l贸gica siguiente dentro de index.html.

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('service-worker.js').then(function (registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, function (err) {
        console.log('ServiceWorker registration failed: ', err);
      }).catch(function (err) {
        console.log(err)
      });
    });
  } else {
    console.log('service worker is not supported');
  }
</script>


Ahora demos de agregar la referencia al archivo manifest.json dentro de la etiqueta <head>:

<link rel="manifest" href="/manifest.json">


Una vez agregado el script y la referencia al manifest dentro del archivo index.html procedemos a compilar el proyecto:

npm run build


Cuando termina el proceso podemos revisar la carpeta /dist que ha generado Webpack y revisar que tenemos dentro el archivo manifest.json as铆 como el archivo service-worker.js y dentro de assets el 铆cono que vamos a utilizar.

Ahora podemos correr el proyecto y comprobar que tenemos el registro del service worker y la informaci贸n de nuestra aplicaci贸n:

npm run start


Service worker registrado correctamente:

pwa-1.PNG

Registro del manifest dentro de la aplicaci贸n:

pwa-2.PNG

Ahora puedes instalar Platzi Conf Store en tu computadora y aprovechar las ventajas de utilizar una PWA:

pwa-3.png

Si quieres aprender m谩s acerca de convertir tus aplicaciones de React en r谩pidas aplicaciones te recomiendo el curso Curso de Progressive Web Apps con React.js.

Aportes 19

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

esto deber铆a tener un video !!!

Ac谩 les dejo el service-worker.js corregido por ESLint:

const doCache = false;
const CACHE_NAME = 'pwa-cache';

self.addEventListener("activate", event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys()
      .then(keyList =>
        Promise.all(keyList.map(key => {
          if (!cacheWhitelist.includes(key)) {
            console.log(`Deleting cache: ${key}`)
            return caches.delete(key);
          }
        }))
      )
  );
});

self.addEventListener('install', (event) => {
  if (doCache) {
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then((cache) => {
          fetch("manifest.json")
            .then(response => {
              response.json()
            })
            .then(assets => {
              const urlsToCache = [
                "/",
                assets["bundle.js"]
              ]
              cache.addAll(urlsToCache)
              console.log('cached');
            })
        })
    );
  }
});

self.addEventListener('fetch', (event) => {
  if (doCache) {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request);
      })
    );
  }
});

En mi caso me generaba error al compilar, y lo que me funciono fue cambiar <link rel=鈥渕anifest鈥 href="/manifest.json"> por <link rel=鈥渕anifest鈥 href="./manifest.json"> . De esa manera si me funciono.Ademas el icono lo tenia de 50x50 y tuve que cambiarlo por 512x512.

En Nextjs se pueden usar complementos para generar la configuraci贸n de la PWA, tales como next-pwa o next-offline. Sin embargo, si uno quisiera hacer la configuraci贸n desde 0, desde la versi贸n 9.1 de NextJS tenemos la carpeta 鈥減ublic鈥, en donde podemos agregar sin problema el service-worker.js y el manifest.json.

Lo 煤nico diferente que tuve que hacer, fue en el archivo _app.js, agregu茅 un useEffect para cargar el eventlistener y lel componente Head para la referencia al manifest:

function MyApp({ Component, pageProps }) {
  const initialState = useInitialState();
  useEffect(() => {
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker
          .register('/service-worker.js')
          .then(
            (registration)=> {
              console.log(
                'ServiceWorker registration successful with scope: ',
                registration.scope
              );
            },
            (err) =>{
              console.log('ServiceWorker registration failed: ', err);
            }
          )
          .catch((err) =>{
            console.log(err);
          });
      });
    } else {
      console.log('service worker is not supported');
    }
  }, []);
  return (
    <>
      <Head>
        <link rel="manifest" href="/manifest.json" />
      </Head>
      <AppContext.Provider value={initialState}>
        <Component {...pageProps} />
      </AppContext.Provider>
    </>
  );
}

Con esta configuraci贸n a煤n no llego al 100% en PWA, pero el resultado es bastante bueno:
https://imgur.com/sWpuBkQ
![](url https://imgur.com/sWpuBkQ)

Les dejo los links de next-offline y next-pwa:
https://www.npmjs.com/package/next-offline
https://www.npmjs.com/package/next-pwa?activeTab=readme

Adicionalmente, pueden ver mi proyecto del curso de React avanzado, que lo hice con Nextjs y lo convert铆 en una PWA usando ambas herramientas. Les dejo el link del repositorio:
https://github.com/danyel117/petgram-platzi

Les dejo el enlace al 铆cono de Platzi

Me sale este error, alguien sabe porqu茅?

Tuve un error al generar el service-worker que hac铆a que el registro fallara porque el js era incorrecto, lo solucion茅 reemplazando los saltos de l铆nea del archivo service-worker.js por saltos de l铆nea de mi teclado. Esto se debe a que al hacer copy&paste de ese c贸digo se ingresan unos caracteres inv谩lidos para el navegador.

Donde esta el icono de react? Dice que en la secci贸n de recursos pero donde est谩 esa secci贸n en un art铆culo como este? Ya tambien busque en otras clases y no lo encuentro鈥

No me reconoc铆a el service-worker.js y me daba error, lo que pas贸 es que cuando copi茅 y pegu茅 la configuracion del archivo de service-worker.js tenia un formato raro o invalido en los saltos de l铆nea, lo que hice fue borrar cada salto de l铆nea y hacer el salto de l铆nea yo mismo con 鈥渆nter鈥 y me funcion贸, que alivio鈥

Excelente claro que mirare el curso e PWA pronto

Actualicen el texto donde mencionan descargar el icono de react, porque confunde.

Excelente, esta clase ademas se complementa con el curso de webpack

Deber铆a ser un video o al menos explicar que es una PWA y porque es importante convertir la aplicaci贸n a una. La verdad este curso me ha parecido muy deficiente a comparaci贸n de otros. Y est谩 desactualizado al 2022

No se si a alguien m谩s le pas贸, pero me saltaba un error por que no encontraba el archivo manifest.json


ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve '/manifest.json'

Solo tienen que cambiar en el index.html el link del manifest, agregen un punto atras del /:

<link rel="manifest" href="./manifest.json">

Excelente claro, Si funciono este curso de PWA

en el Curso de React Avanzado se explica una forma m谩s sencilla de convertir a PWA, mediante plugins de Webpack podemos hacer estas configuraciones m谩s f谩cilmente (el manifest y el service worker). Les recomiendo el curso entero porque es genial pero de una vez dejo las clases sobre PWA:

  1. https://platzi.com/clases/1601-react-avanzado/21298-pwa-generando-el-manifest/
  2. https://platzi.com/clases/1601-react-avanzado/21299-pwa-soporte-offline/

Que raro en Firefox no me sale el icon pero si en google. Puede ser por las dimensiones del icono?

Ac谩 les dejo el service-worker.js corregido por ESLint:

麓麓麓
const doCache = false;
const CACHE_NAME = 鈥榩wa-cache鈥;

self.addEventListener(鈥渁ctivate鈥, event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys()
.then(keyList =>
Promise.all(keyList.map(key => {
if (!cacheWhitelist.includes(key)) {
console.log(Deleting cache: ${key})
return caches.delete(key);
}
}))
)
);
});

self.addEventListener(鈥榠nstall鈥, (event) => {
if (doCache) {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
fetch(鈥渕anifest.json鈥)
.then(response => {
response.json()
})
.then(assets => {
const urlsToCache = [
"/",
assets[鈥渂undle.js鈥漖
]
cache.addAll(urlsToCache)
console.log(鈥榗ached鈥);
})
})
);
}
});

self.addEventListener(鈥榝etch鈥, (event) => {
if (doCache) {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
}
});
麓麓麓

Super, gracias!