React Helmet

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 ‘Container’ en vez de un ‘Component’? O cuando es lógico que sea un ‘Container’?

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 “Introducción a React.Context” aparece el archivo App.js como yo lo tenía hasta ahora y en el siguiente apartado “Creació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’t 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!!