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

PWA: generando el manifest

47/50
Recursos

Usaremos webpack-pwa-manifest para crear nuestro manifest.json y que nuestra aplicación pueda ser compatible con todos los requerimientos de una PWA.

Aportes 15

Preguntas 1

Ordenar por:

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

Ahora en dev tools audits se llama lighthouse

Hola! 👋
A día de hoy, hay un par de bullets que nos pide Lighthouse que se resuelven fácil siguiendo la documentación de los links

Añade en index.html en el <head> :

  <link rel="apple-touch-icon" href="/src/assets/icon.png">

En weback.config.js dentro de new WebpackPwaManifestPlugin :

      icons: [
        {
          src: path.resolve('src/assets/icon.png'),
          sizes: [96, 128, 192, 256, 384, 512],
          purpose: 'maskable' // <-- Añade esta línea
        }

Me generó un error el instalar la versión actual de webpack-pwa-manifest, por lo cual instalé esta y trabajó sin problemas:

npm install webpack-pwa-manifest@4.0.0 -D

Tip: En Chrome la pestaña “Audits” ahora se encuentra como “Lighthouse”

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebpackPwaManifestPlugin = require('webpack-pwa-manifest');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new WebpackPwaManifestPlugin({
      name: 'Petgram - Your pet photos app',
      shortname: 'Petgram -🐱',
      description: 'Find pet photos and use it as wallpaper',
      background_color: '#fff',
      theme_color: '#8d00ff',
      icons: [
        {
          src: path.resolve('src/Assets/icon.png'),
          sizes: [96, 128, 192, 256, 384, 512],
          purpose: 'maskable'
        }
      ]
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }
      }
    ]
  },
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Petgram</title>
    <link rel="apple-touch-icon" href="/src/assets/icon.png">
</head>
<body>
    <div id='app'></div>
    <noscript>
        <h3>This app needs JavaScript to work well</h3>
    </noscript>
</body>
</html>

como a una web de react que cree con el CRA y le hice eject la puedo volver PWA

Por que en la carpeta dist tengo 8 diferentes archivos “app.bundle.js”?, tengo claro que lo creo el comando npm run serve:dev , pero que 8 archivos?, pense que era uno por cada vez que corria el comando, pero los elimine todos, corri el comando nuevamente y volvi a tener 8 de una sola vez

Estoy trabajando mi proyecto con Nextjs, y tuve varios inconvenientes para hacerla PWA. En resumen, lo que hice fue:

  1. Instalar next-pwa con el comando yarn add next-pwa
  2. revisé el repositorio de next-pwa y copié el método render() del archivo _document.js del ejemplo next-9 en mi propio _document.js
  3. Tuve que copiar los íconos del ejemplo next-9.
  4. Tuve que agregar “purpose”: “any maskable” a los íconos

Les dejo el repositorio del ejemplo next-9:
https://github.com/shadowwalker/next-pwa/tree/master/examples/next-9

Les dejo mi repositorio:
https://github.com/danyel117/petgram-platzi/tree/pwa

Hola Devs:
-Por si tienen algun problema pueden checar la documentacion para implementarlo correctamente: Click Aqui

A que se puede deber estos errores?

Usaremos webpack-pwa-manifest para crear nuestro manifest.json y que nuestra aplicación pueda ser compatible con todos los requerimientos de una PWA.

No entiendo porque dentro de webpack.config.js se importan las dependencias con “require” y no con “import”.

¿Que diferencia hay?

** Algo para tener en cuenta **
**If you are using inject on your configuration, ensure that HtmlWebpackPlugin appears before WebpackPwaManifest in the plugins array!
**

mas info: https://github.com/arthurbergmz/webpack-pwa-manifest#readme v

No me aparece la pestaña Audits en las herramientas de desarrollo

Genial!!!