Por aca pueden entrar directamente https://console.cloud.google.com/
¡Bienvenida! Este es un curso especial de React Hooks
¿Qué aprenderás en el Curso Profesional de React Hooks?
¿Qué son los React Hooks y cómo cambian el desarrollo con React?
Introducción a React Hooks
useState: estado en componentes creados como funciones
useEffect: olvida el ciclo de vida, ahora piensa en efectos
useContext: la fusión de React Hooks y React Context
useReducer: como useState, pero más escalable
¿Qué es memoization? Programación funcional en JavaScript
useMemo: evita cálculos innecesarios en componentes
useRef: manejo profesional de inputs y formularios
useCallback: evita cálculos innecesarios en funciones
Optimización de componentes en React con React.memo
Custom hooks: abstracción en la lógica de tus componentes
Third Party Custom Hooks de Redux y React Router
Configura un entorno de desarrollo profesional
Proyecto: análisis y retos de Platzi Conf Store
Instalación de Webpack y Babel: presets, plugins y loaders
Configuración de Webpack 5 y webpack-dev-server
Configuración de Webpack 5 con loaders y estilos
Loaders de Webpack para Preprocesadores CSS
Flujo de desarrollo seguro y consistente con ESLint y Prettier
Git Hooks con Husky
Estructura y creación de componentes para Platzi Conf Store
Arquitectura de vistas y componentes con React Router DOM
Maquetación y estilos del home
Maquetación y estilos de la lista de productos
Maquetación y estilos del formulario de checkout
Maquetación y estilos de la información del usuario
Maquetación y estilos del flujo de pago
Integración de íconos y conexión con React Router
Integración de React Hooks en Platzi Conf Merch
Creando nuestro primer custom hook
Implementando useContext en Platzi Conf Merch
useContext en la página de checkout
useRef en la página de checkout
Integrando third party custom hooks en Platzi Conf Merch
Configura mapas y pagos con PayPal y Google Maps
Paso a paso para conectar tu aplicación con la API de PayPal
Integración de pagos con la API de PayPal
Completando la integración de pagos con la API de PayPal
Paso a paso para conectar tu aplicación con la API de Google Maps
Integración de Google Maps en el mapa de checkout
Creando un Custom Hook para Google Maps
Estrategias de deployment profesional
Continuous integration y continuous delivery con GitHub Actions
Compra del dominio y despliega con Cloudflare
Optimización de aplicaciones web con React
Integración de React Helmet para mejorar el SEO con meta etiquetas
Análisis de performance con Google Lighthouse
Convierte tu aplicación de React en PWA
Bonus: trabaja con Strapi CMS para crear tu propia API
Crea una API con Strapi CMS y consúmela con React.js
¿Qué sigue en tu carrera profesional?
Próximos pasos para especializarte en frontend
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.
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.
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.
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:
Una vez creado el proyecto nos movemos a la sección de “APIS & Services” y elegimos la opción de “Enable APIS and Services”.
En esta sección te encontrarás todas las API que Google dispone para habilitar. Utilizaremos el buscador para encontrar la API “Maps JavaScript API”.
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.
Seleccionamos “Enable” este proceso puede tardar un poco en lo que se habilitan los servicios disponibles para el uso de la API.
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 “Credentials”. Seleccionamos “Create credentials” y elegimos la opción de “API Key”.
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.
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.
Aportes 8
Preguntas 3
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.