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:

5D
2H
33M
1S
Curso de React Avanzado

Curso de React Avanzado

Miguel 脕ngel Dur谩n

Miguel 脕ngel Dur谩n

React Helmet

43/50
Recursos

Aportes 23

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Por si lo requieren, aqu铆 los estilos del Layout.

import styled from 'styled-components'

export const Div = styled.div`
    padding: 16px;
`
export const Title = styled.h1`
    font-size: 24px;
    font-weight: 600;
    color: #222;
    padding-bottom: 8px;
`
export const Subtitle = styled.h2`
    font-size: 16px;
    font-weight: 400;
    color: #333;
    padding-bottom: 4px;
`

para los que quiere sacar los emojin desde windows 10(no se si los en los otras versiones es lo mismo) tecla windows+.(punto)

Y si quisiera adicionalmente agregar Favicons personalizados por vista, como podr铆a hacerlo?

Hola profesor me sale este error en la navegaci贸n del usuario sin estar logeado cuando cambio entre las paginas y no he podido identificar el porque

para no mostrar el title o el description, pongan otras dos propiedades de tipo boolean para que se pueda usar ese componente siempre!

import React, { Fragment } from 'react'
import { Helmet } from 'react-helmet'
import { Div, Title, Description } from './styles'

export const SeoBehaviour = ({ children, title, description, showTitle = false, showDescription = false }) => {
  return (
    <Fragment>
      <Helmet>
        {title && <title>Pettagram 馃惗| {title}</title>}
        {description && <meta name='description' content={description} />}
      </Helmet>
      <Div>
        {(title && showTitle) && <Title>{title}</Title>}
        {(description && showDescription) && <Description>{description}</Description>}
        {children}
      </Div>
    </Fragment>
  )
}

A la descripcion le falta una parte me parece :S 鈥 "React Helmet nos va a ayudar a manejar el SEO de nuestra aplicaci贸n para poder cambiar el texto del " 鈥

Tengo una duda, Layout no deber铆a de ser un 鈥楥ontainer鈥 en vez de un 鈥楥omponent鈥? O cuando es l贸gico que sea un 鈥楥ontainer鈥?

Qu茅 no est茅 tan negro? Oye bro eso es racismo鈥 XD

Hola Devs:
-Aqui les comparto una little lectura y tambien puedan implementarlo para NextJS.
Click Aqui

Me acabo de dar cuenta al ver el inicio de este v铆deo que el archivo App.js no lo tengo como el profesor 馃槰

En este v铆deo el componente App aparece as铆:

export const App = () => {
  const { isAuth } = useContext(Context)

  return (
    <div>
      <GlobalStyle />
      <Logo />
      <Router>
        <NotFound default />
        <Home path='/' />
        <Home path='/pet/:categoryId' />
        <Detail path='/detail/:detailId' />
        {!isAuth && <NotRegisteredUser path='/login' />}
        {!isAuth && <Redirect from='/favs' to='/login' />}
        {!isAuth && <Redirect from='/user' to='/login' />}
        {isAuth && <Redirect from='/login' to='/' />}
        <Favs path='/favs' />
        <User path='/user' />
      </Router>

      <NavBar />
    </div>
  )
}

Y el que yo tengo est谩 de esta manera:

export const App = () => {
  return (
    <div>
      <GlobalStyle />
      <Logo />
      <Router>
        <Home path='/' />
        <Home path='/pet/:categoryId' />
        <Detail path='/detail/:detailId' />
      </Router>
      <Context.Consumer>
        {
          ({ isAuth }) =>
            isAuth
              ? <Router>
                <Favs path='/favs' />
                <User path='/user' />
              </Router>
              : <Router>
                <NotRegisteredUser path='/favs' />
                <NotRegisteredUser path='/user' />
              </Router>
        }
      </Context.Consumer>
      <NavBar />
    </div>
  )
}

He estado mirando los apartados a ver si me salt茅 alg煤n v铆deo en el que se encuentre lo de Redirect pero no lo he encontrado鈥

En los archivos que subi贸 el profesor en el tema 7. Gesti贸n del Usuario apartado 鈥淚ntroducci贸n a React.Context鈥 aparece el archivo App.js como yo lo ten铆a hasta ahora y en el siguiente apartado 鈥淐reaci贸n del componente UserForm y Hook useInputValue鈥 aparece con lo del Redirect pero no veo esa explicaci贸n

No s茅 si es que falta alg煤n v铆deo o si me despist茅 馃槄en ese caso agradecer铆a si alguien podr铆a decirme d贸nde ha encontrado el momento en el que se cambia ese componente 馃槂

驴como puedo agregar los tags de sharing para facebook y twitter?, yo los tengo de esta forma, pero la herramienta de sharing debugger sigue sin encontrar los metas que le pase a Helmet

<meta property='og:type' content='website' />
<meta property='og:url' content='myurl.com' />
<meta property='og:title' content='titulo' />
<meta property='og:description' content='descripcion' />
<meta property='og:image' content='urlDemiImagen' />

de antemano gracias 馃槂

Los que estan en linux, hay una extension para Gnome, se llama Emoji Selector y funciona haciendo command + e

React Helmet, justamente lo utilic茅 hace poco. Si se usa react-helmet, te arroja un warning en consola React porque el componente intentar谩 actualizarse antes de montarse. Entonces, us茅 react-melmet-async.

react-helmet esta dando un error en la consola

Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code.

por el momento toco desinstalar react-helmet e instalar react-helmet-async y lo unico diferente es que toca proveer <HelmetProvider> en el main o index

npm install react-helmet

Holsm resulta que hasta aqu铆 todo corre, con la excepcio贸n de que ya no veo las fotografias de los animales pero me sale el tittle y subtitle de favoritos y demas鈥 que podra ser ?

NO tengo errores en consola.

import styled from 'styled-components'

export const Div = styled.div`
    padding: 16px;
`

export const Title = styled.h1`
    font-size: 24px;
    font-weight: 600px;
    color: #222;
    padding-bottom: 8px;
`

export const Subtitle = styled.h2`
    font-size: 16px;
    font-weight: 400px;
    color: #333;
    padding-bottom: 4px;

hola alguien sabe como se pude solucionar este warning, aparece cuando le quito el like a una imagen
react_devtools_backend.js:2273 Warning: Can鈥檛 perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in ListOfCategories (created by Home)
in Home (created by App)

Supongo que con el React Helmet tambi茅n se trata el tema de los Favicon

Yo lo que hice fue dos properties mas

showTitle | showSubtitle
Con eso podria tener tanto para el header como para el body

Hice esta validaci贸n para pasar por props si quiero mostrar el title y el subtitle en la pagina, por ejemplo para que no se vea en la Home, as铆 puedo seguir usando el componente Layout:

Layout.js

import React from 'react'
import { Helmet } from 'react-helmet'

import { Div, Title, Subtitle } from './styles'

export const Layout = ({ children, title, subtitle, verDatos = true }) => {
    return (
        <React.Fragment>
            <Helmet>
                {title && <title>{title} | Petgram 馃惗</title>}
                {subtitle && <meta name='description' content={subtitle} />}
            </Helmet>
            {
                verDatos &&
                <Div>
                    {title && <Title>{title}</Title>}
                    {subtitle && <Subtitle>{subtitle}</Subtitle>}
                </Div>
            }
            {children}
        </React.Fragment>
    )
}

Home.js

import React from 'react'

import { ListaPhotoCard } from '../components/lista_photo_cards'
import { Layout } from '../components/layout'

export const Home = ({ categoryId }) => {
    return (
        <React.Fragment>
            <Layout title='Tu App de fotos de mascotas' subtitle='Con Petgram puedes encontrar fotos de animales muy bonitos' verDatos={false}>
                <ListaPhotoCard categoryId={categoryId} />
            </Layout>
        </React.Fragment>
    )
}

A las demas paginas no le paso esa props y por defecto muestra los datos en la pagina, porque por defecto viene en true esa props

j

Excelente鈥 gracias!!