隆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 PayPal

33/45

Lectura

Para utilizar la API de PayPal para integrar pagos es necesario darse de alta en PayPal Developer. En este sitio podr谩s encontrar todos los recursos necesarios para empezar a integrar pagos en tus p谩ginas web y en nuestro proyecto Platzi Conf Merch.

Una vez que te has registrado es necesario seguir los siguientes pasos para crear tu token de desarrollo y poderlo integrar en este proyecto.

Crear 鈥淪andbox Access Token鈥:

Dentro de tu cuenta como desarrollador debes dirigirte al apartado 鈥淢y Apps & Credentials鈥 y en la parte inferior encontrar谩s el apartado 鈥淓xpress Checkout via Braintree SDK - Sandbox Accounts鈥 donde crearemos nuestro token para la aplicaci贸n.

paypal-1.PNG

Elegimos el tipo de cuenta que vamos a utilizar (Personal/Business).

paypal-2.PNG

Ahora que tenemos nuestro token generado debemos de revisar a detalle la expiraci贸n, as铆 como el manejo de divisas que vamos a utilizar.

Si no encuentras tu divisa, selecciona 鈥淯nited States Dollar鈥 que ser铆a la divisa por defecto.

Si queremos revisar, actualizar el token o hacer alg煤n cambio podemos regresar a la secci贸n 鈥淢y Apps & Credentials鈥 para ver los detalles de tu cuenta.

paypal-3.PNG

IMPORTANTE: para efectos de pruebas es necesario tener tu token v谩lido en modo 鈥淪andbox鈥. Si quieres habilitar tu token para tu proyecto en producci贸n solo debes de seguir los mismos pasos pero eligiendo la opci贸n de 鈥淟ive鈥 y creando una nueva App.

Crear una app en PayPal para recibir pagos:

Para habilitar PayPal como un m茅todo de pago v谩lido y recibir transacciones en tu proyecto en producci贸n debemos crear una aplicaci贸n a la cual estar谩 ligado nuestro token.

paypal-4.PNG

Una vez creado este token ligado a tu cuenta principal podr谩s elegir las caracter铆sticas a las cuales podemos acceder, seleccionamos todas y le damos 鈥渟ave鈥.

Es necesario especificar una URL de retorno cuando la transacci贸n ha sido exitosa, es parte de los requerimientos para este proyecto. Ahora que tienes todos los requisitos tienes tu API token listo para producci贸n.

Ver mis traslaciones:

En el apartado de 鈥淪andbox鈥 podr谩s ver las cuentas creadas, notificaciones, los llamados a la API, el simulador entre otras herramientas que te ayudar谩n a darle seguimiento a tus pruebas de integraci贸n con PayPal.

Para revisar tus llamados y eventos en tu API de producci贸n solo debes de dirigirte al apartado 鈥淟ive鈥 donde encontrar谩s la informaci贸n que est谩s solicitando para ver qu茅 est谩 pasando con cada evento ocurrido.

Recomendaci贸n

No olvides pasarte por la documentaci贸n para que puedas entender cada particularidad que te ofrece PayPal. Solo estamos utilizando uno de los recursos que nos provee, pero te invito a explorar a detalle la documentaci贸n y encontrar nuevas herramientas que se puedan incluir en este proyecto.

Cu茅ntame en la secci贸n de comentarios si tienes ideas y qu茅 mejoras podr铆an suponer en Platzi Conf Merch.

Aportes 28

Preguntas 2

Ordenar por:

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

Bueno, esto deb铆o ser un video ._. 鈥

Recuerden que hay un curso de pagos con paypal https://platzi.com/clases/pagos-online/

Estar铆a cool agregar tres tipos de subscripciones:

  • Conf: Una subscripci贸n para recibir un kit cada que haya una Platzi conf
  • Christmas: Una subscripci贸n para recibir un kit en navidad
  • Birthday: Una subscripci贸n para recibir un kit en tu cumplea帽os

PD: Esta muy so帽ador pero ojala Platzi lo implemente de verdad 馃挌

Logr茅 todos los pasos, pero hubiera sido mejor un video mostrando los pasos a seguir.

un paso tan importante y lo va a poner por escrito? 馃槖

Ac谩 entran con sus cuentas de Paypal o crean una y hacen el paso a paso: https://developer.paypal.com/ 馃槃

Para quienes no les permite crear las credenciales de Braintree SDK Credentials, no se desanimen, m谩s arriba de Braintree, en REST API apps pueden crear una app la cual les entregar谩 un client id que pueden usar para el curso.

Para crearla deben haber generado previamente una cuenta de sandbox, en el men煤 Sandbox -> Account.

Si alguno no sabe como poner la URL de retorno, esta me funciono a mi: localhost:3005/checkout/success pero en vez de usar localhost como tal, usa 127.0.0.1

Buenas!
Comparto un video donde explican con bastante claridad y simplicidad lo que para m铆 茅sta clase no lo logra:
https://www.youtube.com/watch?v=tJgBeaG5Z1s
Saludos!!!

No entend铆 ni medio

Si siguen este tutorial van a encontrar el clientId que les solicita el componente PayPalButton: https://developer.paypal.com/docs/get-started/

no tengo la opcion de crear el token de sanbox, creo que es porque estoy en bolivia

Quise integrar Mercado Pago en lugar de PayPal porque hay m谩s personas que lo usan donde estoy, pero resulta que, por ahora, s铆 o s铆 necesito un back node Express 馃槮馃槮馃槮 鈥 as铆 que curso de Express ah铆 voyyyy

Si, no me importa lo que digan, esto debi贸 ser un video explicativo, o mejor no usarlo. Ver el curso, 2 a 3 h, configurar paypal, 1 semana. Literal, si a alguien le fue mejor solo con esas dos im谩genes pues felicidades, a mi no.

Creo que esta clase debio de ser un video explicativo ciertamente, con la documentacion que nos da esta clase y con la documentacion que nos da el mismo paypal pude completar lo que dice esta clase pero aun no se si funciona ni como funciona. En la parte que me pide un linmk de retorno para terminar de configurar mi cuenta puse mi github pero entiendo que deberia ser el link del negocio que estemos haciendo. Aqui esta el link de paypal developer con los pasos a seguir: https://developer.paypal.com/developer/applications

Empez贸 lo bueno

Un video donde lo explican mejor https://www.youtube.com/watch?v=tJgBeaG5Z1s

Recuerden que hay un curso de pagos con paypal https://platzi.com/clases/pagos-online/

Confirmo, debio ser un video para un paso a paso m谩s rapido.

Lo logre con la documentaci贸n
https://developer.paypal.com/docs/get-started/#1-create-a-paypal-account

no es que si diga que bruto que bien que le entend铆 pero ah铆 se va.

no en todos los paises de latino america esta habilitado paypal, seria interesante si tienen algun curso para integrar una mas global

Para entender mejor esta clase, recomiendo hacer el Curso de Pagos Online con Paypal es muy corto y es pr谩ctico.

Ojal谩 saquen un curso intengrando pagos con Visa o Mastercar que es lo m谩s com煤n鈥

Aqui encuentran Express Checkout via Braintree SDK - Sandbox Accounts

C煤al es la URL de retorno que debo registrar ?

a