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!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

2D
3H
39M
59S
Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

React.lazy() y componente Suspense

45/50
Recursos

Suspense es un componente de React que nos va a permitir suspender algo cuando está en modo lazy(); y lazy(). El cual nos va a permitir importar un componente que no será cargado hasta que este sea llamado. De esta forma mejoraremos el tiempo de carga de nuestra aplicación enormemente.

Aportes 19

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Una acotación importante es que React.lazy y Suspense solo funcionan en Client Side Rendering. Si su aplicación usa Server Side Rendering deberán usar loadable-components https://reactjs.org/docs/code-splitting.html#reactlazy

Por si quieren utilizar React.lazy() en el resto de páginas:

const Home = React.lazy(() => import('./pages/Home'))
const Detail = React.lazy(() => import('./pages/Detail'))
const Favs = React.lazy(() => import('./pages/Favs'))
const User = React.lazy(() => import('./pages/User'))
const NotRegisteredUser = React.lazy(() => import('./pages/NotRegisteredUser'))
const NotFound = React.lazy(() => import('./pages/NotFound'))

Recuerden poner export default en los archivos de las páginas para que funcione!

En Suspense el fallback lo podemos utilizar como el componente que vamos a renderizar envés del componente deseado mientras hacemos la carga, para ésto podemos crear un componente, digamos <Spinner />
.
El Suspense quedaría así:

import React, {Suspense} from 'react'

import Spinner from './components/Spinner';

export const App = () => (
return <Suspense fallback={<Spinner />}>
	// Code
</Suspense>)

.
Si quieren ver el ejemplo completo acá

Un pequeño aporte, para importar un componente de manera nombrada en React.lazy, se puede hacer de estar forma.

const Favs = React.lazy(() => import('./pages/Favs').then(module => ({ default: module.Favs })))

Asi ya no tendras que cambiar la page Favs

En el fallback acepta cualquier componente de react y este aparecerá hasta que el componente en suspenso sea cargado.

Podríamos hacer que mientras este componente cargue sea mostrado el Loader animation que fue hecho en clases pasadas de esta forma y asi aumentar el UX:

import { Loader } from './styles/animations'

<Suspense fallback={<Loader />}>```

Aconsejo correr lighthouse para medir la performance de la app. Esta herramienta de dice cuales son los mayores pains y como solucionarlos.
.
Para medir realmente la performance de la web se tiene que hacer en el entorno de produccion porq react agrega muchas alertas y demas cosas que ayudan en desarrollo pero que no aportan en prod 😅
.
Hice un test de performance en dev y dio 28 de 100, y en prod dio 89 de 100.
.
Para correr el ambiente de prod solo agregue un script mmas en el package.json

"serve:prod": "webpack --mode 'production' && npx serve dist -s",

Tambien dejo la doc oficial de react sobre el tema que esta super completa!
.
Espero que les sirva 😄

App.js

import React, {useContext, Suspense} from "react";
import { BrowserRouter, Routes, Route, Navigate} from "react-router-dom";

import { AppContext } from "./Context/AppContext";

//styles
import { GlobalStyle } from "./Styles/GlobalStyles";

//PAGES
import { Home } from './Pages/Home';
import { Detail } from "./Pages/Detail";
// import { Favs } from "./Pages/Favs";
import { User } from "./Pages/User";
import { NotRegisteredUser } from "./Pages/NotRegisteredUser";
import { NotFound } from "./Pages/NotFound";

//COMPONENTS
import { Logo } from './Components/Logo';
import { NavBar } from './Components/NavBar';

const Favs = React.lazy(() => import ('./Pages/Favs'))

export const App = () =>{
    // const  urlParams = new window.URLSearchParams(window.location.search)
    // const detailId = urlParams.get('detail')
    // console.log(detailId)
    const { isAuth } = useContext(AppContext)
    return (
        <Suspense fallback={<div />}>
        <BrowserRouter>
        <GlobalStyle />
        <Logo />
        <Routes>
            <Route exact path='/' element={<Home />} />
            <Route exact path='/pet/:id' element={<Home />} />
            <Route exact path='/detail/:id' element={<Detail />} />
            <Route exact path='/favs' element={isAuth ? <Favs /> : <Navigate replace to='/login' />}/>
            <Route exact path='/user'  element={isAuth ? <User /> : <Navigate replace to='/login' />} />
            <Route exact path='/login' element={!isAuth ? <NotRegisteredUser /> : <Navigate replace to='/' />} />
            <Route path='*' element={<NotFound />} />

        </Routes>
        <NavBar />
        </BrowserRouter>
        </Suspense>
    )
} 

Favs.js

import React from 'react';
import { Layout } from '../Components/Layout';
import { FavsWithQuery } from '../Container/GetFavorites';

export default () => {
    return ( 
        <Layout title= 'Your favorites' subtitle='Your favorites images'>
            <FavsWithQuery />
        </Layout>
    )
}

Si en algun momento react lazy les da error, prueben a ver si tienen la version 17 de react, si es asi hagan el downgrade con npm i [email protected] , al parecer aun de momento no funciona en esa version, al menos a mi.

Alguien sabe por qué de esto?
)

Dejo mis apuntes de esta clase por si alguien mas le sirven (los hice en notion), los pueden duplicar como un template

Como dato para algunos, tal vez un poco obvio… Pero tengan en cuenta que si crearon como en mi caso un skeleton… y quieren usar el lazy, esto cambiaria la funcionalidad por lo que tendrian que crear un super skeleton de toda la app (Pagina)… para mostrar mientras se carga

Muy buena esta practica ademas que podemos mejorar UX pasandole un componente en fallback aqui mis apuntes 😃

Suspense es un componente de React que nos va a permitir suspender algo cuando está en modo lazy(); y lazy(). El cual nos va a permitir importar un componente que no será cargado hasta que este sea llamado. De esta forma mejoraremos el tiempo de carga de nuestra aplicación enormemente.

Paso 1: implementar el lazy para que se importe solo ese componente cuando se va a renderizar
const Favs = React.lazy(() => import(’./pages/Favs’))

Paso 2: Exportar el componente como export default

Paso 3: Importar suspense de React y envolver a toda la app pasandole un fallback que acepta cualquier componente de react y este aparecerá hasta que el componente en suspenso sea cargado.
Suspense fallback={<div />}

Suspense es un componente de React que nos va a permitir suspender algo cuando está en modo lazy(); y lazy(). El cual nos va a permitir importar un componente que no será cargado hasta que este sea llamado. De esta forma mejoraremos el tiempo de carga de nuestra aplicación enormemente.

Según tengo entendido Suspense sigue en beta, o ¿ya fue lanzado de manera oficial?

Supongo que una aplicación de React no puede estar completa si no se usa Lazy, podríamos decir que es algo esencial o hay quienes prefieren no usarlo?

Porqué mi app.bundle pesa 3 MB y el del profe 181B ??
algo tengo que mover en webpack?

App.js con algunas páginas extra importadas dinámicamente:

import React, { Fragment, useContext, Suspense } from 'react'
import { GlobalStyle } from './styles/GlobalStyles'
import {Logo} from './components/Logo'
import {Home} from './pages/Home'
import {Redirect, Router} from '@reach/router'
// import {Detail} from './pages/Detail'
// import {Favs} from './pages/Favs'
// import {User} from './pages/User'
// import {NotRegisteredUser} from './pages/NotRegisteredUser'
import {NavBar} from './components/NavBar'
import {Context} from './Context'
// import {NotFound} from './pages/NotFound'

const Favs = React.lazy(() => import ('./pages/Favs'))
const Detail = React.lazy(() => import ('./pages/Detail'))
const User = React.lazy(() => import ('./pages/User'))
const NotRegisteredUser = React.lazy(() => import ('./pages/NotRegisteredUser'))
const NotFound = React.lazy(() => import ('./pages/NotFound'))

export const App = () => {
    const {isAuth} = useContext(Context)
    return (
        <Suspense fallback={<div/>}>
            <Logo />
            <GlobalStyle />
            <Router>
                <NotFound default />
                <Home path="/" />
                <Home path="/pet/:categoryId" />
                <Detail path="/detail/:detailId" />
                {!isAuth && <NotRegisteredUser path='/login' />}
                {!isAuth && <Redirect noThrow  from='/favs' to='/login' />}
                {!isAuth && <Redirect noThrow  from='/user' to='/login' />}
                {isAuth && <Redirect noThrow from='/login' to='/'/>}
                <Favs path="/favs" />
                <User path="/user" />                
            </Router>
            <NavBar />
        </Suspense>
    )
    
}

y en todas esas páginas se cambia por export default () => {
…

como se exporta defult la pagina de Home?

Wuuaooo, muy interesante, Gracias!!