隆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

Git Hooks con Husky

16

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

17

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

18

Configuraci贸n de Webpack 5 con loaders y estilos

19

Loaders de Webpack para Preprocesadores CSS

20

Flujo de desarrollo seguro y consistente con ESLint y Prettier

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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Integraci贸n de Google Maps en el mapa de checkout

37/45
Recursos

Aportes 17

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

2022

##馃挕 Alternativa: LEAFLET https://react-leaflet.js.org/docs/start-installation/

npm install react-leaflet

src/components/Map.jsx

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import Icon from '../assets/marker.png'
// import { Icon } from 'leaflet'
import '../styles/Map.css';

const position = [51.505, -0.09]

const ChartMap = () => {
    return (
        <MapContainer center={position} zoom={13}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={position} >
                <Popup icon={Icon}>
                    A pretty CSS3 popup. <br /> Easily customizable.
                </Popup>

            </Marker>
        </MapContainer>

    );
};
export default ChartMap;

src/styles/Map.css

.leaflet-container {
    width: 100%;
    height: 500px;
  }

src/public/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">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin="" />
    <title>Document</title>
</head>
<div id="app"></div>

<body>

</body>

</html>

Si todav铆a no est谩n usando variables de entorno, en este comentario de un par de clases atr谩s explico como hacerlo:

https://platzi.com/comentario/2065862/

No es para nada dificil, y es una buena pr谩ctica ocultar estos datos aunque sean solo de sandbox.

npm install @react-google-maps/api --save```

Implementacion con react-leaflet
Espero que les sea de ayuda 馃槃

Map.jsx

import React from 'react';
import { MapContainer, Marker, TileLayer } from 'react-leaflet';
import '../styles/components/Map.css';


const Map = () => {
  const defaultCenter = [19.4267261, -99.1718706]

  return (
    <MapContainer center={defaultCenter} zoom={17} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={defaultCenter} />
    </MapContainer>
  );
}

export default Map; 

Map.css

.leaflet-container {
    width: 100%;
    height: 400px;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Platzi Conf Merch</title>
  <link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""
  />
  <script src="https://kit.fontawesome.com/473d269aa9.js" crossorigin="anonymous"></script>

</head>

<body>
  <div id="app"></div>
</body>

</html>

leaflet Alternativa gratuita

https://react-leaflet.js.org/docs/start-installation

Para integrarlo a su proyecto sigan el siguiente paso a paso.

  1. Instalaci贸n de dependencias
npm i -D leaflet react-leaflet
  1. Crear un componente Map para nuestro componente.
import React from 'react;

const Map = ()=>{

}
 export default Map;
  1. Incluir los componentes desde la libreria leaflet
import React from 'react';
import { MapContainer, TileLayer, Marker } from 'react-leaflet';

const Map = () => {
  return (
    <div className='leaflet-container'>
      <link
        rel="stylesheet"
        href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""
      />

      <MapContainer center={[51.505, -0.09]} zoom={16} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <i className="fa-solid fa-location-dot"></i>
        </Marker>
      </MapContainer> 
    </div>
  );
}
export default Map;
  1. Requiere que su contenedor tenga definida la altura del objeto en este caso usamos la clase leaglet-container puedes definir una hoja de estilos propia para tu componente mapa o definir铆a en el estilo de la ventana Success.css. En mi caso cree una hoja de estilos Map.css
//Map.css
.leaflet-container {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  margin: 0 auto;
}
  1. La librer铆a requiere importar su hoja de estilos propia lo puedes hacer mediante un link sin embargo en mi caso provoco fallas. Tambien lo puedes hacer llamando la hoja de estilos directamente en tu componente.
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""
/>
  1. <MapContainer > Este componente es el contenedor del mapa. Requiere algunos Props:
  • center={[51.505, -0.09]} Establece el punto donde queremos ver el mapa
  • zoom={16} Es el acercamiento inicial del mapa
  • scrollWheelZoom={false} Habilita o des habilita la posibilidad de hacer zoom mediante el mouse.
  1. <TileLayer> Esta libreria se basa en imagenes mediante este componente podemos traer dichas imagenes y damos los derechos de autor a los creadores.

  2. <Marker> Nos permite crear un icono por facilidad le pase como children un icono tomado desde fontawesome. Si lo vas a usar recuerda llamar la libreria de fontawesome en tu documento html.

    • position={[51.505, -0.09]} Tambien requiere la posici贸n del marcador intenta que coincida con la posici贸n central del mapa para evitar confusiones.
    <Marker position={[51.505, -0.09]}>
      <i className="fa-solid fa-location-dot"></i>
    </Marker>
    

Han modificado el componente 鈥淍react-google-maps/api鈥

Ahora trabaja as铆:

<code>
const Map = (props: Props) => {
    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: "---"
      })
    const mapStyles={
        height:"50vh",
        with:"100%",    
    }
    const defaultCenter={
lat:19.4268,
lng:-99.17
    }
    const [map, setMap] = React.useState(null)

    const onLoad = React.useCallback(function callback(map) {
      const bounds = new window.google.maps.LatLngBounds();
      map.fitBounds(bounds);
      setMap(map)
    }, [])
    const onUnmount = React.useCallback(function callback(map) {
        setMap(null)
      }, [])
      return isLoaded ? (
        <GoogleMap
          mapContainerStyle={mapStyles}
          center={defaultCenter}
          zoom={10}
          onLoad={onLoad}
          onUnmount={onUnmount}
        >
          { /* Child components, such as markers, info windows, etc. */ }
          <></>
        </GoogleMap>
    ) : <></>
}
</code>

Confirmo que a la fecha de este comentario sigue funcionando tal como dijo el profesor sin ninguna modificaci贸n extra. Salu2

Si todav铆a no est谩n usando variables de entorno, en este comentario de un par de clases atr谩s explico como hacerlo:

No es para nada dificil, y es una buena pr谩ctica ocultar estos datos aunque sean solo de sandbox.

Muy buena la clase, aunque creo que hubiera sido mejor si desde el principio usabamos la informacion que necesitabamos directamente desde la documentacion y la usabamos en el proyecto y no solo seguir las instrucciones del profe.
.
Igual manera se entendi贸, pero creo que se puede mejorar

Si tienen problemas para instalar el paquete de @react-google-maps api:

npm i -S @react-google-maps/api

prueben el comando as铆:

npm install @react-google-maps/api --save --legacy-peer-deps

Y con esto corre sin problemas

Para que les salga el nombre del comprador en la p谩gina de success:

{`${buyer[0].name}, gracias por tu compra`}

Si hacer solo eso no funciona, tienen que arreglar el objeto que se guarda en como buyer en la pagina de payment:

const newOrder = {
				buyer: buyer,
				product: cart,
				payment: data,
			}

En 2022 la dependencia recomendada en la documentaci贸n de google maps es @googlemaps/react-wrapper

npm i @googlemaps/react-wrapper

No funciona con la versi贸n de react 2022 al momento.

{name}, Gracias por tu compra
No necesitamos encapsular todo en el template literal. Con las llaves, en JSX podemos integrar un valores din谩micos con est谩ticos.

Me encanta cuando pasan errores, as铆 se aprende a debuggear, la soluci贸n no es tan importante sino la forma de encontrarla

Me funcion贸 sin problemas! Lo 煤nico que tuve un problema al querer instalar el paquete pero me funcion贸 con el comando:

https://www.npmjs.com/package/@react-google-maps/api

m