隆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

Git Hooks con Husky

16

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

17

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

18

Configuraci贸n de Webpack 5 con loaders y estilos

19

Loaders de Webpack para Preprocesadores CSS

20

Flujo de desarrollo seguro y consistente con ESLint y Prettier

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
13H
21M
54S

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:

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 21

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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茅?

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">

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鈥

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

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

Aqu铆 est谩 el 铆cono de platzi pero con la extensi贸n jpeg, s贸lo tienen que convertirlo a png y listo.

Enlace al 铆cono de platzi.

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

Buenis铆mo pense que iba a ser m谩s dificil

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!