¡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 pagos con la API de PayPal

34/45
Recursos

Aportes 22

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Botón paypal 2021 react 17.x.x

npm i react-paypal-button-v2

Para que se les abra en el navegador la documentación de cualquier paquete:

npm docs <nombre-paquete>

npm docs react-paypal-button

Archivo nuevo src/utils/index.js

export const handleSumTotal = (cart) => {
  const reducer = (acc, cur) => acc + cur.price;
  const sum = cart.reduce(reducer, 0);
  return sum;
}

Los tipos para typescript:

type PayPalButtonProps = {
  paypalOptions: PaypalOptions;
  buttonStyles: ButtonStylingOptions;
  amount: number;
  subscriptionPlanId?: string;
  onApprove?: (data, authId) => void;
  onPaymentStart?: () => void;
  onPaymentSuccess?: (response: OnCaptureData) => void;
  onPaymentError?: (msg: string) => void;
  onPaymentCancel?: (data: OnCancelData) => void;
  onShippingChange?: (data: OnShippingChangeData) => 
    Promise<void | string | number> |
    string |
    number |
    void;
}

Wow alguien más siente que el video fue un poco largo 😛 Necesario pero largo

Comando

npm i react-paypal-button-v2 

archivo Payment.jsx

import React, { useContext } from 'react';
import { PayPalButton } from 'react-paypal-button-v2';
import AppContext from '../context/AppContext';
import '../styles/components/Payment.css';

const Payment = ({ history }) => {
  const { state, addNewOrder } = useContext(AppContext);
  const { cart, buyer } = state;

  const paypalOptions = {
    clientId: 'ATN4MgsCVKSXinkSTL1YqlANTikW5fXyo5C7TkyVUG7JB0DTr1G2aabkWFF9Uz6kKo61tL48cfWpomc4',
    intent: 'capture',
    currency: 'USD',
  };

  const buttonStyles = {
    layout: 'vertical',
    shape: 'rect',
  };

  const handlePaymentSuccess = (data) => {
    console.log(data);
    if (data.status === 'COMPLETED') {
      const newOrder = {
        buyer,
        product: cart,
        payment: data,
      };
      addNewOrder(newOrder);
      history.push('/checkout/success');
    }
  };

  const handleSumTotal = () => {
    const reducer = (accumulator, currentValue) => accumulator + currentValue.price;
    const sum = cart.reduce(reducer, 0);
    return sum;
  };

  return (
    <div className='Payment'>
      <div className='Payment-content'>
        <h3>Resument del pedido:</h3>
        {cart.map((item) => (
          <div className='Payment-item' key={item.title}>
            <div className='Payment-element'>
              <h4>{item.title}</h4>
              <span>
                $
                {' '}
                {item.price}
              </span>
            </div>
          </div>
        ))}
        <div className='Payment-button'>
          <PayPalButton
            paypalOptions={paypalOptions}
            buttonStyles={buttonStyles}
            amount={handleSumTotal()}
            onPaymentStart={() => console.log('Start Payment')}
            onPaymentSuccess={(data) => handlePaymentSuccess(data)}
            onPaymentError={(error) => console.log(error)}
            onPaymentCancel={(data) => console.log(data)}
          />
        </div>
      </div>
      <div />
    </div>
  );
};

export default Payment;

Me sale este error de dependencia y no encuentro como solucionarlo sin instalar otra versión de react:

Despues de mucho renegar llegué a la misma solución que Hector:

const handleSumTotal = (cart) => {
  const reducer = (accumulator, currentValue) =>
    accumulator + currentValue.price;
  const sum = cart.reduce(reducer, 0);

  return sum;
};

export default handleSumTotal;

Y la invoco en Checkout, Information y Payment pasándole cart como parámetro:

<h3>{`Total Price: $${handleSumTotal(cart)}`}</h3>

Recordemos que (si no me equivoco) cart viene del estado, que viene del contexto. Así está en Checkout.jsx:

  const { state, removeFromCart } = useContext(AppContext);
  const { cart } = state;

Ojalá les sirva!

Intenté tambien usar dotenv para generar variables de entorno para las paypalOptions (sobre todo para que no quede hardcodeado el clientId) pero no conseguí que compile.

Si alguien lo hizo o implementó algo similar, sería buenisimo que lo comparta!

Les comparto algunos problemas que me ocurrieron. Primero no podía instalar react-paypal-button, lo solucioné con este comando: npm i react-paypal-button-v2

Segundo, el reto para hacer un outil la función de handleSumTotal lo resolví así:

-Crée la carpeta outils en src y dentro el archivo index.js.
-Copié y pegé la funcion de handleSumTotal pero le agregué unos cambios para que funcione:

En sí solo hay que agregar “cart” como parametro y cada vez que quieras usar la funcion en un componente la importas así:

import { handleSumTotal } from ‘…/utils/index’;

Y para usarlo así:

<h2>{`Total: $${handleSumTotal(cart)}`}</h2>
amount={handleSumTotal(cart)}

En pleno 2022 me funciona de esta manera:

instalando dependencia

nom i react-paypal-button-v2

En el componente

import { PayPalButton } from 'react-paypal-button-v2'
...
      <PayPalButton
                        paypalOptions={paypalOptions}
                        buttonStyles={buttonStyles}
                        amount={sumTotalAmount(cart)}
                        onPaymentStart={() => console.log("event paypal")}
                        onPaymentSuccess={data => handlePaymentSuccess(data)}
                        onPaymentError={error => console.log("error ", error)}
                        onPaymentCancel={data => console.log("data cancel ", data)}
                    />

En mi caso, como estoy usando NextJS, usé el router de Next en vez de useHistory:

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

Les dejo mi repositorio:

https://github.com/danyel117/platzi-conf-store

Parece que el paquete react-paypal-button requiere tener una versión menor de la 17 de react si no da un error al instalarla, así que instalen una 16.8.x

El boton de react paypal me da el sgte error, el clientId esta correcto y el resto de configuracion tal cual la tiene Oscar.

React-paypal-button loading script error:

Make sure that that your clientID is correct and that you are passing valid values to the paypalOptions prop and the buttonStyles prop.

For a list of valid properties for paypalOptions see https://developer.paypal.com/docs/checkout/reference/customize-sdk/#query-parameters
For a list of valid properties for buttonStyles see https://developer.paypal.com/docs/checkout/integration-features/customize-button/#color

In react-router-dom v6 useHistory() is replaced by useNavigate().

You can use:

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

Stackoverflow

A mi me sirvió con el siguiente comando en la terminal:

npm install react-paypal-button --save

ya se puede usar useHistory quedaria algo asi

import { useHistory } from 'react-router-dom';

const history = useHistory();


  const handlePaymentSuccess = (data) => {
    console.log(data);
    if (data.status === 'COMPLETED') {
      const newOrder = {
        buyer,
        product: cart,
        payment: data,
      };
      addNewOrder(newOrder);
      history.push('/checkout/success');
    }
  };```

Para las personas que tienen problemas con el btn de Paypal aqui les dejo una solución:

npm i @paypal/react-paypal-js

<code> 

import React from 'react'
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

const PaypalPay = () => {
  return (
    <PayPalScriptProvider
      options={{
        "client-id": process.env.REACT_APP_PAYPAL_ID,
        currency: "USD",
      }}>

<PayPalButtons
        style={{ layout: "vertical" }}
        disabled={false}
        createOrder={(data, actions) =>
          actions.order
            .create({
              purchase_units: [
                {
                  amount: {
                    value: Number.parseFloat(handleSumTotal()).toFixed(2),
                  },
                },
              ],
            })
            .then((orderId) => {
              return orderId;
            })
        }
        onApprove={(data, actions) => {
          return actions.order
            .capture()
            .then((data) => {
              // Your code here after capture the
              paymentHandleSuccess(data);
            })
            .catch((error) => console.log(error));
        }}
      />
    </PayPalScriptProvider>

  )
}

export default PaypalPay


 


Llevando totalizador a un utilitario

const sumTotal = (arr, field) => {
    const reducer = (accumulator, currentValue) =>
      accumulator + currentValue[field];
    const sum = arr.reduce(reducer, 0);
    return sum;
  };

export {
    sumTotal
}

Hola! para los que le sale el error cuando quieren instalar la dependencia de react-paypal-button-v2
AQUI UNA POSIBLE SOLUCION!!!

npm install react-paypal-button-v2 --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]1.0.0
npm ERR! Found: [email protected]18.0.0
npm ERR! node_modules/react
npm ERR!   [email protected]"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer [email protected]"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from [email protected]2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR!   [email protected]"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Raycris\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Raycris\AppData\Local\npm-cache\_logs\2022-04-05T23_37_11_773Z-debug-0.log

SOLAMENTE DEBEMOS DE PONER EL SIGUIENTE COMANDO npm i react-paypal-button-v2 --force, NO ES LO MAS RECOMENDABLE PERO FUNCIONA

¿Por qué oculta el clientId en el video y en los archivos adjuntos lo muestra? ¿Lo cambió en los archivos u olvidó ocultarlo?

b