隆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

Paso a paso para conectar tu aplicaci贸n con la API de Google Maps

36/45

Lectura

Para nuestro proyecto es importante que tengamos acceso a la API de JavaScript de Google Maps, por lo tanto en este recurso seguir谩s paso a paso para obtener las credenciales necesarias para integrar dicha API a nuestro proyecto.

C贸mo obtener la API de JavaScript de Google Maps:

Lo primero que debes tener en cuenta es que debemos de utilizar una cuenta de Google para poder utilizar el uso de estos recursos. Tambi茅n es posible que te pida validar tu cuenta de facturaci贸n para hacer uso de este recurso en tus proyectos.

Crear cuenta en Google Developers:

Para poder hacer uso de las API de Google debemos de registrarnos en https://developers.google.com/ para poder tener acceso a la consola administrativa que nos permitir谩 registrar los servicios que vamos a utilizar.

Crear las llaves para utilizar la API de JavaScript para Google Maps:

Las llaves que utilizaremos es un identificador 煤nico que nos permite autenticarnos con los servicios de Google para poderlos utilizar en nuestros proyectos.

En la consola de Google debemos de crear un nuevo proyecto:

image-1.PNG

Una vez creado el proyecto nos movemos a la secci贸n de 鈥淎PIS & Services鈥 y elegimos la opci贸n de 鈥淓nable APIS and Services鈥.

IMAGE-2.PNG

En esta secci贸n te encontrar谩s todas las API que Google dispone para habilitar. Utilizaremos el buscador para encontrar la API 鈥淢aps JavaScript API鈥.

image-3.PNG

Seleccionamos la API y nos llevar谩 a la pantalla donde habilitaremos el servicio, te invito a leer la documentaci贸n, la informaci贸n proporcionada y lo que implica el uso de esta API.

image-4.PNG

Seleccionamos 鈥淓nable鈥 este proceso puede tardar un poco en lo que se habilitan los servicios disponibles para el uso de la API.

image-5.PNG

Ahora podemos ver la secci贸n de m茅tricas del uso de la API.

Habilitar las credenciales para el uso de la API de JavaScript para Google Maps:

Una vez habilitada la API podemos ver el men煤 lateral donde encontraremos la secci贸n 鈥淐redentials鈥. Seleccionamos 鈥淐reate credentials鈥 y elegimos la opci贸n de 鈥淎PI Key鈥.

image-6.PNG

Esta opci贸n nos crear谩 la API Key que utilizaremos dentro de nuestro proyecto en la pr贸xima clase, guarda de forma segura esta llave y no la compartas.

image-7.PNG

Ahora ya tienes la API Key que utilizaremos en nuestro proyecto y cuando agreguemos la integraci贸n vamos a ver el c贸digo un poco similar a esta forma:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

Te recomiendo leer la documentaci贸n de Google Maps para que puedas ver las opciones que tienes para implementar, as铆 como todas las API que dispone y c贸mo puedes integrarlas entre s铆.


NOTA: recuerda que el uso de las API de Google pueden generar un costo, te invito a que pases por la secci贸n de precios y puedas revisar a detalle el alcance que tiene el uso de la capa que provee la API y en qu茅 momento empieza a generar un costo para tu servicio.

https://cloud.google.com/maps-platform/pricing/

Aportes 8

Preguntas 3

Ordenar por:

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

Por aca pueden entrar directamente https://console.cloud.google.com/

Pueden usar una alternativa totalmente gratuita que es leaflet con open street view y con esta libreria que nos lo deja usar en React de manera muy sencilla:
https://react-leaflet.js.org/docs/start-installation

En primer momento me aparece que tengo que crearme una cuenta billing para vincularla a un proyecto. Dicen que te dan un trial de 300dolares pero si te pasas de costos of se acaba el trial, te cobran 200 dolares.
Asique gente, investigar bien los usos y tal en el link que se proporciona. Saludos 馃崗

Parece que se puede usar perfectamente con Typescript, cool 馃槂

se ve genial!! nunca antes trabaje con las apis de google!!

Gracias por el tutorial, super bueno!

Recomiendo myappi para peticiones a mapas, es mucho mas barato que google maps.

n