隆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

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

16

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

17

Configuraci贸n de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

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

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Integraci贸n de React Helmet para mejorar el SEO con meta etiquetas

41/45
Recursos

Aportes 13

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Meta tags del componente Helmet:

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@TU_USER"/>
<meta name="twitter:creator" content="@TU_USER"/>
<meta name="twitter:title" content="Platzi Conf Store"/>
<meta name="twitter:description" content="Platzi Conf Store"/>
<meta
  name="twitter:image"
  content="https://s3.amazonaws.com/gndx.dev/gndxdev.png"
/>
<meta property="og:title" content="Platzi Conf Store"/>
<meta property="og:description" content="Platzi Conf Store"/>
<meta
  property="og:image"
  content="https://s3.amazonaws.com/gndx.dev/gndxdev.png"
/>
<meta property="og:url" content="platzistore.xyz" />
<meta property="og:site_name" content="Platzi Conf Store" />
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="ID_APP_FACEBOOK" />

En NextJS no es necesario instalar Helmet. Para mejorar el SEO, podemos usar el componente Head que viene por defecto en la instalaci贸n de Next.

https://nextjs.org/docs/api-reference/next/head

As铆 quedo mi c贸digo, cree un componente para los meta datos.

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

const MetaHead = ({ title, description, image, url }) => (
  <Helmet>
    <title>{`MocaFood - ${title}`}</title>
    <meta name="description" content={description} />
    <meta
      name="robots"
      content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"
    />
    <link rel="canonical" href={url} />
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content={`MocaFood - ${title}`} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={url} />
    <meta property="og:site_name" content="MocaFood" />
    <meta property="og:image" content={image} />
    <meta property="og:image:secure_url" content={image} />
    <meta property="og:image:width" content="1280" />
    <meta property="og:image:height" content="720" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@davecast_" />
    <meta name="twitter:creator" content="@davecast_" />
    <meta name="twitter:title" content={`MocaFood ${title}`} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={image} />
  </Helmet>
);

export default MetaHead;

Y luego lo uso donde quiera pasando los datos que se requieran

import React from 'react';
import initialState from '../initialState';

import Products from '../components/Products';
import MetaHead from '../components/MetaHead';

const meta = (
  <MetaHead
    title="Productos"
    description="Encuentra todos tus productos favoritos"
    image="https://davecast.s3.amazonaws.com/avatarnegativo.jpg"
    url="https://mocafood.xyz/"
  />
);

const Home = () => (
  <>
    {meta}
    <Products products={initialState.products} />
  </>
);

export default Home;

Les sugiero que tambien agreguen estas etiquetas

  • <meta name=鈥渄escription鈥 content=鈥淒escripcion de la pagina en la que esta el usuario鈥 />
  • <meta name=鈥渒eywords鈥 content=鈥淓-commerce,HTML, CSS, JavaScript, React鈥 />
  • <meta name=鈥渁uthor鈥 content=鈥淪u nombre鈥 />

Comando del video

npm install react-helmet --save

si quieren aprender seo vayan a blogger3cero y teamplatino

Me gusta hacerlo de esta manera:

import React from "react";
import Seo from "../seo/Seo";
import Products from "../components/Products";

const Home = () => {
  return (
    <>
      <Seo
        title="Shop"
        twitter_card="summary_large_image"
        twitter_site="@TU_USER"
        twitter_creator="@TU_USER"
        twitter_title="Shop"
        twitter_description="Shop - see all products"
        twitter_image="s3.amazonaws.com/gndx.dev/gndxdev.png"
        og_title="Shop"
        og_description="Shop - see all products"
        og_image="s3.amazonaws.com/gndx.dev/gndxdev.png"
        og_url="shop.example.com"
        og_site_name="Shop"
        og_locale="es_ES"
        og_type="article"
        fb_app_id="ID_APP_FACEBOOK"
      />
      <Products />
    </>
  );
};

export default Home;

import React from "react";
import { Helmet } from "react-helmet";

const Seo = ({
  title,
  twitter_card,
  twitter_site,
  twitter_creator,
  twitter_title,
  twitter_description,
  twitter_image,
  og_title,
  og_description,
  og_image,
  og_url,
  og_site_name,
  og_locale,
  og_type,
  fb_app_id,
}) => {
  return (
    <Helmet>
      <title>{title}</title>
      {/* Twitter */}
      <meta name="twitter:card" content={twitter_card} />
      <meta name="twitter:site" content={twitter_site} />
      <meta name="twitter:creator" content={twitter_creator} />
      <meta name="twitter:title" content={twitter_title} />
      <meta name="twitter:description" content={twitter_description} />
      <meta name="twitter:image" content={twitter_image} />
      {/* Web */}
      <meta property="og:title" content={og_title} />
      <meta property="og:description" content={og_description} />
      <meta property="og:image" content={og_image} />
      <meta property="og:url" content={og_url} />
      <meta property="og:site_name" content={og_site_name} />
      <meta property="og:locale" content={og_locale} />
      <meta property="og:type" content={og_type} />
      {/* Faccebook */}
      <meta property="fb:app_id" content={fb_app_id} />
    </Helmet>
  );
};

export default Seo;

B谩sicamente hacer una carpeta llamada seo con un archivo Seo.jsx y pasar por props la informaci贸n.

Buenas, falto subir el archivo, saludos

Un poco tedioso el configurar el Seo en React 鈥

Tal vez por no ser tema directo de este curso no lo mencionan pero es importante saber que las apps en react al ser SPA no son muy SEO friendly, por lo que para funciones como compartir link creo que es necesario usar herramientas como next mas aun cuando se quiere implementar metadata din谩mica, por ejemplo un link del tipo:

/product/:product-slug

para poder poder compartir por redes y que la metadata se cargue de forma dinamica dependiendo del link del producto hay que implementar cosas como SSR, igual yo mismo sigo intentando comprender bien este tema y me gustar铆a escuchar la opini贸n de alguien mas

驴algun alma buena tiene el link del repositorio de platzi-conf-merch ?

Excelente, ya creo saber c贸mo se hace para mostrar cosas en la pesta帽a a cuerdo a la inetracci贸n del User

m