DEV Community: Leonardo Alonso

¿Existe el Desarrollador Senior o Junior?

Leonardo Alonso — Mon, 21 Jun 2021 23:10:07 +0000

En la industria del desarrollo de software existen múltiples perfiles principalmente basados en las tecnologías que se usan y el nivel de experiencia. Sin embardo después de 5 años de experiencia en la industria me parece que esos perfiles "Senior" o "Junior" no son tan simples de definir.

Pero antes de empezar, quiero resaltar que esta es una opinión personal por lo que tal vez mucho no estén de acuerdo con lo que este en este post pero eso es bueno ya que fortalecerá la conversación, ahora si vamos a empezar.

Imagen aquí

En diversos artículos de otros blogs o en ofertas laborales suelen definir a los perfiles junior como profesionales con no mas de 2 años de experiencia y a los senior con mas de 5 o 6 años de experiencia. Pero es ahí donde, para mi, entra lo relativo del termino, es decir experiencia en una tecnología en especifico, o quizá experiencia en el campo laboral.

Desde mi punto de vista un desarrollador senior(basado en los años de experiencia) siempre aporta muchas ideas a un equipo de trabajo, es decir, sabe como mejorar algunos procesos, conoce metodologías de desarrollo pero cuando un desarrollador con ese perfil se incorpora a un equipo de trabajo podría no estar familiarizado quizá con el stack tecnológico, por ejemplo un desarrollador web empieza a hacer desarrollo móvil, este desarrollador aportara mucho en ideas pero seguramente necesitara mentoría en algunas cosas que no conoce de la tecnología usada, entonces es un senior solo por la experiencia, o es un junior por que no conoce la tecnología al 100%.

En este sentido, lo que yo creo es que si es un senior, por que esa experiencia lo llevara a entender mejor y mas rápido otras tecnologías, es decir aun que necesitara de mentoría, ese desarrollador será capaz de resolver muchas cosas por si mismo, y aportara al equipo con ideas y propuestas, lo que es algo que suele dificultarse un poco a los Junior.

Por esta razón para mi el perfil de desarrollador senior y por ende el junior si existe, pero no será un desarrollador que conoce todas las tecnologías o muchas tecnologías si no uno que tendrá todo un set de habilidades blandas y tecnológicas que lo llevaran a tomar muchas mas y mejores decisiones de las que podría tomar un desarrollador junior.

Que es un Cherry Pick

Leonardo Alonso — Mon, 08 Feb 2021 23:58:10 +0000

Como sabemos GIT es uno de los sistemas de control de versiones mas populares en la industria y dispone de muchas funciones como la creación de ramas, commits, merge, rebase etc.

En este post vamos a analizar justo una de sus funciones llamada cherry pick la cual nos podría salvar de algún momento desagradable.

Supongamos el siguiente escenario:

Estamos trabajando para una empresa que está desarrollando en una aplicación web X y tenemos lista la primer versión de nuestro proyecto y siguiendo el flujo normal de git hacemos lo siguiente:

git init #inicializamos el repositorio
git add . #agregamos todos los archivos a nuestro repositorio
git commit -m "Version 1 de la aplicacion X"

Recuerden esto es solo una suposición en un proyecto real probablemente no haremos el primer commit con la versión 1 completa.

Muy bien continuemos...

Ya que tenemos lista esta primer versión nos empezamos a trabajar en los primeros fixes y cambios a la aplicación por lo que empezamos con la creación de ramas por feature o por fix haciendo algo como esto

git branch nuevo-feature
git checkout nuevo-feature

Dentro de este branch se nos pide modificar el color de header de nuestra aplicación y modificar las opciones del menú.

Empezamos cambiando el color del header y hacemos nuestro commit

git add header.js
git add esitlos.css
git commit -m "Cambio de color en el header"

Y continuamos cambiando ahora las opciones del menú y eso lo vamos a hacer en varios commits, entonces hacemos lo siguiente:

git add menu.js
git commit -m "Cambio de la opcion 1 del menu"
git add menu_responsivo.js
git commit -m "Cambio de la opcion 1 del menu responsivo"

Llegamos al lunes y temprano en una junta nuestro jefe nos dice que necesita que el nuevo color del header lo necesitamos ya en producción y hay que pasarlo a la rama main (recuerden que siguiendo el estándar de github master no se usa más como rama principal) y entonces entramos en pánico por que aun que ese cambio ya está listo el resto de cambios en la rama aun no están listos y ahora que hacemos...

Bueno el cherry pick está ahí para salvarnos la vida ya que esta característica de git nos va a permitir traernos commits de un branch a otro sin tener que hacer un merge o un rebase.

¿Y bueno esto como se hace?

Primero en nuestro branch nuevo-feature vamos a hacer un git log para ver todos nuestros commits.

Deberíamos ver algo así:

commit a4d05f9ad128329095074f14255bf24a28c300f7 (HEAD -> nuevo-feature)
Author: Leonardo Alonso <usuario@empresa.com>
Date:   xxxxxxxxxxxxxxxxx
    Cambio de color en el header
commit 12ceg453529095074f14255bf24a2832443dfg3 (HEAD -> nuevo-feature)
Author: Leonardo Alonso <usuario@empresa.com>
Date:   xxxxxxxxxxxxxxxxxxx
    Cambio de la opcion 1 del menu
commit 2343425324ef23432423asd14255bf24a28c553f (HEAD -> nuevo-feature)
Author: Leonardo Alonso <usuario@empresa.com>
Date:   xxxxxxxxxxxxxxxxxxxx
    Cambio de la opcion 1 del menu responsivo

Entonces solo queremos el cambio del color del header no todos los demás así que nos copiamos el hash de ese commit y nos cambiamos de rama a main

git checkout main

Ya con el hash del commit que necesitamos vamos a hacer

git cherry-pick a4d05f9ad128329095074f14255bf24a28c300f7

Cabe mencionar que aquí estamos usando el hash completo sin embargo si usáramos más opciones en nuestro comando git log seguramente el hash seria más corto pero eso lo veremos en otro post.

Continuando, una vez que corremos el comando cherrypick lo que va a pasar es que a nuestra historia del branch main se le sumara el commit que elegimos de esa forma no necesitamos hacer un merge de todo el branch.

¿Está muy bien no? Bueno pues aún con lo practico que esto parece resulta ser que cherry-pick es una mala práctica y debe ser usada únicamente cuando en verdad no vemos otra opción ya que seguramente cuando hagamos el merge de todas las ramas con fixes y nuevos features nos vamos a tomar con muchos conflictos que habrá que resolver.

Pues bueno ahora tienen a su disposición una herramienta más de git que deberán utilizar con mucha responsabilidad.

Meses sin Intereses en Stripe con Python y React parte 4

Leonardo Alonso — Thu, 03 Dec 2020 00:33:13 +0000

En nuestro post anterior al fin terminamos nuestro formulario de pago del lado de React JS, en este post daremos inicio a la creación de nuestra pequeña api para aceptar los pagos utilizando flask.

Instalando los paquetes

Antes de realizar cualquier instalación vamos a activar nuestro entorno virtual.

source env/bin/activate

Ahora si para instalar flask solo debemos de hacer:

pip install flask

Y para instalar la librería de stripe hacemos:

pip install stripe

Creando nuestra api

Esta será una api pequeña por lo que solo necesitaremos un archivo al que llamaremos api.py

Para validar que flask esta correctamente instalado vamos a escribir lo siguiente

import flask

app = flask.Flask(__name__)
app.config["DEBUG"] = True


@app.route('/', methods=["GET"])
def home():
    return "<h1> Flask API </h1>"

app.run()

Ahora hacemos python api.py lo cual iniciara el servidor de DEBUG de flask con el que podremos acceder a nuestro localhost en el puerto 5000 el cual es el puerto por defecto para flask, este puede ser cambiado dentro de los parámetros de la función run().

Entonces si accedemos a 127.0.0.1:5000 veremos el mensaje que hemos colocado dentro de la función home.

Ahora, recordando un poco nuestra aplicacion de React esta apuntando a la siguiente ruta api/acept_payment, por lo que procederemos a crearla.

@app.route('/api/acept_payment', methods=['POST'])
def acept_payment():
    pass

Ahora vamos a iniciar nuestro proyecto de React y a reiniciar nuestro servidor de flask, al hacer la peticion tal cual la tenemos ahora en nuestra aplicación nos toparemos con un error relacionado a CORS, sobre este tema vamos a hablar mas en otro post de momento para solucionarlo haremos la siguiente modificación.

Vamos a instalar la libreria flask-cors haciendo pip install flask-cors y escribimos lo siguiente

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
app.config["DEBUG"] = True
CORS(app)

Vale en principio pensaríamos que esto va a funcionar pero si hacemos la petición al backend nos vamos a topar con el siguiente error:

Y esto que significa? 😕 Bueno pues resulta que no podemos hacer peticiones a un servidor sin https.

Vale y eso como lo solucionamos? pues de inicio nos podemos crear un certificado autofirmado y esto lo vamos a hacer de la siguiente manera

openssl req -x509 -newkey rsa:4096 -nodes -out cert.pem -keyout key.pem -days 365

Completamos toda la información que nos solicita y listo ya solo nos queda agregarlo a nuestro proyecto en python

app.run(ssl_context=('cert.pem', 'key.pem'))

Ahora desde el navegador debemos entrar a nuestro localhost en el puesto 5000 o el que hayan configurado para el servidor de prueba de flask y darle permiso para que utilice nuestro certificado autofirmado.

Esta solución no debe ir NUNCA en producción, para producción o nos compramos los certificados o usamos letsencript o lo que sea pero jamás un autofirmado.

Ok, ahora si nuestra petición ha de funcionar como esperamos

Muy bien ya podemos modificar nuestra api para aceptar el objeto json que enviamos desde react.

@app.route('/api/acept_payment', methods=['POST'])
def acept_payment():
    data = request.get_json()
    print(data)
    return {'ff':'ff'}

Con la función get_json() de request obtenemos todo lo que se envié por método POST en formato json y de momento regresamos un diccionario de prueba.

Con esto estamos listos ahora si para aceptar nuestro pago con Stripe, así que vamos a modificar nuestra api

from flask import Flask, request, jsonify
from flask_cors import CORS

import stripe

stripe.api_key = 'secret'

app = Flask(__name__)
app.config["DEBUG"] = True
CORS(app)


@app.route('/', methods=['GET'])
def home():
    return "<h1> Flask API </h1>"

@app.route('/api/acept_payment', methods=['POST'])
def acept_payment():
    data = request.get_json()
    payment = stripe.PaymentIntent.create(
        amount=2000,
        currency='mxn',
        payment_method=data['payment_method'],
        payment_method_types=["card"],
        off_session=True,
        confirm=True
    )
    print(payment)
    return payment

app.run(ssl_context=('cert.pem', 'key.pem'))

Con esto estamos haciendo uso de el api de stripe y mas en especifico de su api de paymentIntents entre los parámetros que estamos enviando esta el monto a cobrar, el tipo de cambio, el tipo de método de pago.

Mas en especifico el parámetro off_session significa que no estamos enviando un id para customer y confirm significa que queremos confirmar el pago, ahora para que confirm sea True off_session también debe ser True.

No hay que olvidar poner nuestro propia clave secreta en esta linea.

stripe.api_key = 'secret'

de lo contrario nada de esto va a funcionar.

Con esto ya estamos aceptando pagos con stripe solo queda ver si el pago realmente se realizo y eso lo podemos ver desde el dashboard de stripe.

Aquí vemos nuestro pago confirmado pero... en el monto le pusimos que queríamos cobrar 2000 y el cargo que tenemos es solo por 20. Bueno esto se debe a que stripe toma el monto dos ceros antes, pero la solución para eso es que el valor que queremos cobrar los multipliquemos por 100 y listo.

@app.route('/api/acept_payment', methods=['POST'])
def acept_payment():
    data = request.get_json()
    amount = 2000
    payment = stripe.PaymentIntent.create(
        amount=amount*100,
        currency='mxn',
        payment_method=data['payment_method'],
        payment_method_types=["card"],
        off_session=True,
        confirm=True
    )
    print(payment)
    return payment

Ahora si todo esta bien y con eso vamos a concluir este POST que fue un poco mas largo que los anteriores pero con el propósito de mostrar las posibles complicaciones a las que nos vamos a enfrentar cuando trabajemos proyectos de este tipo, si aun así quedan dudas pueden usar los comentarios y tratare de responder a cada uno de ellos. Por ultimo les dejo los repositorios de cada proyecto y nos vemos en el siguiente post.

https://github.com/leonardoAlonso/StripeForm
https://github.com/leonardoAlonso/stripe-flask-api

Happy Codding

Meses sin Intereses en Stripe con Python y React parte 3

Leonardo Alonso — Sun, 22 Nov 2020 23:11:03 +0000

En nuestro post anterior iniciamos la creación de nuestro formulario de pago, en esta sección terminaremos de preparar el formulario para poder aceptar los pagos.

El evento submit

Por ahora tenemos un formulario donde validamos cada cambio en el formulario en el evento onChange pero como dijimos es un formulario por lo que necesitamos subir ese cambio es decir un evento onSubmit y así es como lo escribiremos.

Nos situamos dentro del componente CheckoutForm.js

import React from 'react'
import CardSection from './CardSection'
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

const CheckoutForm = () => {
    const stripe = useStripe();
    const elements = useElements();

    const handleSubmit = async (ev) => {
      ev.preventDefault();

      if (!stripe || !elements) {

        return;

      }

      const cardElement = elements.getElement(CardElement);

      const {error, paymentMethod} = await stripe.createPaymentMethod({
        type: 'card',
        card: cardElement,
      })

      if (error) {
        console.log(['error'], error);
      } else {
        console.log(['PaymentMethod'], paymentMethod);
      }

    }

    return (
        <div className="col-lg-12">
            <form onSubmit={handleSubmit}>
                <h1>Formulario de Pago</h1>
                <div className="form-group">
                    <CardSection/>
                </div>
                <button className="btn btn-primary">Donate</button>
            </form>
        </div>
    )
}

export default CheckoutForm;

Lo primero que estamos haciendo es importar los hooks useStripe y useElements de la librería de stripe. Ahora situándonos en el JSX agregamos el método o prop onSubmit en el formulario.

Ahora la parte mas importante es const cardElement = elements.getElement(CardElement); ya que esta se encargara de buscar el CardElement y con el creara el método de pago.

Para este punto recuerden poner su api key de stripe.

Ahora y para terminar este post tenemos que enviar el método de pago al servidor y esto lo vamos a hacer usando la función fetch de JS, esto se va a hacer dentro del else de la función handleSubmit.

 let response = fetch('http://localhost/api/acept_payment',
          {'payment_method': paymentMethod}).then((response) => {
            console.log(response)
          }).catch((error) => {
            console.log('[error]', error)
          });

y por ahora es todo, en el siguiente post vamos hacer nuestro backend con python y flask donde vamos por fin a aceptar el pago.

Nuevamente les dejo el repo del proyecto de react para que puedan ver todos los cambios. https://github.com/leonardoAlonso/StripeForm

Meses sin Intereses en Stripe con Python y React parte 2

Leonardo Alonso — Sat, 14 Nov 2020 19:12:38 +0000

En el post pasado iniciamos creando nuestra estructura de archivos y directorios para nuestro formulario de pago con stripe usando React y Flask.

Ya con todo eso listo podemos iniciar a crear los componentes de React que necesitaremos para procesar los pagos.

Instalando la librería de react para stripe

Esto es muy simple lo único que debemos hacer es:

npm install --save @stripe/react-stripe-js @stripe/stripe-js

y listo, ya se actualizo nuestro package.json y se instalo la librería.

Agregando Bootstrap (para que no se vea tan feo)

Bootstrap es un framework de frontend con el propósito de estilizar nuestras aplicaciones o sitios web.

Existen muchas maneras de agregarlo a un proyecto en React pero la más simple y la que vamos a utilizar es agregando el CDN a el index de nuestra aplicación.

Pero no lo vamos a agregar al index.js si no que dentro de la carpeta public encontraremos un archivo de nombre index.html y es en este dónde agregaremos el CDN de (bootstrap)[https://getbootstrap.com/docs/4.5/getting-started/introduction/]

Al igual que cualquier archivo css este va dentro de un tag <link> y dentro del <head> de la pagina quedando algo como esto.

Modificando la estructura de archivos

Cuando creamos un nuevo proyecto de react usando create-react-app este nos da una estructura de archivos inicial, para este caso vamos a modificar un poco esta estructura.

Ir a la carpeta src
Dejar únicamente el archivo index.js

Cuando eliminemos estos archivos y tratemos de iniciar el proyecto con npm start seguramente tendremos varios errores y estos serán causados por las importaciones de archivos que ya no existen por lo que vamos a modificar ese archivo index.js de la siguiente manera.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App/>, document.getElementById('root'));

Creando los componentes

Ahora aun tendremos un error de importación por que para este punto aún no existe el componente App por lo que vamos a crearlo al mismo nivel que index.js

Para toda esta serie de tutoriales vamos a utilizar functional componets que es la forma en la que React nos dice que deberíamos trabajar, si alguno de ustedes esta acostumbrado a utilizar ClassComponents es muy fácil migrar de uno a otro.

Ahora si el componente App

// App.js

import React from 'react'
import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'

const App = () => {
    const stripePromice = loadStripe('stripe_public_key')

    return (
        <div className="container">
            <div className="row">
                <Elements stripe={stripePromice}>

                </Elements>
            </div>
        </div>
    )
}

export default App

Ok.. todo se ve muy cool pero que estamos haciendo, bueno partiendo de la estructura fuente de un functional component lo que estamos haciendo es importar Elements de la librería de stripe la cual nos va a permitir utilizar los objetos Element de stripe en cualquier componente heredado.

Y la otra cosa que estamos haciendo es autenticandonos con nuestra clave publica de stripe esto con la función loadStripe la cual cargara de forma asíncrona al script de Stripe.js.

Esa autenticación se la pasamos como prop el componente Element y listo ya podemos utilizar stripe.

Creando el CardElement

Dentro de la carpeta src vamos a crear una nueva carpeta llamada components y dentro de esta crearemos un archivo llamado CheckoutForm.js y escribiremos lo siguiente:

// CheckoutForm.js
import React from 'react'
import CardSection from './CardSection'

const CheckoutForm = () => {
    return (
        <div className="col-lg-12">
            <form>
                <h1>Formulario de Pago</h1>
                <div className="form-group">
                    <CardSection/>
                </div>
                <button className="btn btn-primary">Pay</button>
            </form>
        </div>
    )
}

export default CheckoutForm

Este componente nos va a servir para agregar todos los datos del formulario de pago que vallamos a necesitar, es decir nombre del cliente, email, etc... Todo lo que queremos saber del cliente y por supuesto los datos de su tarjeta para realizar el cobro.

En este caso únicamente estaré pidiendo los datos de la tarjeta, pero desde este componente es donde se pedirá toda la información del cliente.

Ahora en este punto no tenemos creado aun el componente CardSection por lo que vamos a hacerlo.

Dentro de la carpeta components vamos a crear un archivo llamado CardSection.js, dentro de este archivo escribimos lo sigueinte.

import React, { useState } from 'react'
import { CardElement } from '@stripe/react-stripe-js'
import '../css/stripe_form.css'

const  CardSection = () => {

    const [state, setState] = useState({
        'errorMessage': ''
    })

    const card_element_options = {
        style: {
            base: {
                color: "#32325d",
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: "antialiased",
                fontSize: "16px",
                "::placeholder": {
                    color: "#aab7c4",
                },
            },
            invalid: {
                color: "#fa755a",
                iconColor: "#fa755a",
            },
        }
    }

    const handleOnChanage = (event) => {
        setState({errorMessage: ''})
        if (event.error) {
            setState({error: true, errorMessage:event.error.message})
        }
    }

    return (
        <>
            <CardElement options={card_element_options} onChange={handleOnChanage}/>
            <div className="card-errors">
            <p>{state.errorMessage}</p>
            </div>
        </>
    )
}

export default CardSection

Muy bien vamos a la explicación.

En este componente estamos importando de stripe el componente CardElement.

Stripe nos proporciona muchos Elements para crear nuestro formulario de pago, pero el CardElement es uno de los mas utilices desde mi punto de vista por que engloba todos los datos de la tarjeta que necesitamos en un solo input evitando tener que hacer muchos clics o lo que sea, de todos modos aquí les dejo el resto de los elemento que nos provee stripe. https://stripe.com/docs/stripe-js

Ahora tambien estamos agregando algunas opciones de estilos por default al CardElement.

También estamos validando si existe algún error en los datos de la tarjeta haciendo uso del prop onChange del componente CardElement, para esta validación hacemos uso del hook de React useState de tal forma que cuando hay un error en el objeto event del componente CardElement actualizamos el state y lo renderizamos en el tag

Aquí les dejo la documentación de stripe en donde podremos ver todas las props que le podemos pasar a los elementos de stripe

https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options

En este componente también agregamos algunos estilos por CSS, mismos que les dejare en el Repo del proyecto para no escribir todo el código aquí.

Ya con todos los componentes listos solo nos queda importar el componente CardForm dentro de App.

        <div className="container">
            <div className="row">
                <Elements stripe={stripePromice}>
                    {/* Load the checkout form */}
                    <CheckoutForm/>
                </Elements>
            </div>
        </div>

y listo ya tenemos nuestro formulario.

Aun no acepta pagos, pero esto lo iremos haciendo en los siguientes post.

Les dejo el Repo del proyecto de React en donde podrán ver todo el código o clonarlo para verlo en uso en sus computadoras.

https://github.com/leonardoAlonso/StripeForm

Meses sin Intereses en Stripe con Python y React parte 1

Leonardo Alonso — Mon, 09 Nov 2020 17:46:15 +0000

Hola comunidad Dev

Mi nombre es Leonardo Alonso y soy desarrollador web desde poco mas de 3 años, y este es mi primer post dentro de Dev.to, mismo que se convertirá en el inicio de una serie de post/tutoriales de como integrar el procesador de pagos de Stripe y al mismo tiempo de como aceptar meses sin intereses dentro de tu sitio web usando Flask (Python) y React.

Preparando nuestro entorno

Cuenta en stripe

Primero que nada necesitaremos crearnos una cuenta en stripe (es gratis 😄 ) una vez tenemos nuestra cuenta y la misma está configurada tendremos acceso a nuestras claves API las cuales vamos a ocupar para comunicarnos con la API de stripe para procesar los pagos.

Entorno virtual e instalación de librerías iniciales

Para la integración estaremos usando Python 3.8 🐍 por lo que usaremos un entorno virtual para no mezclar librerías con otros proyectos que tengamos usando Python.

Empezaremos creando un directorio propio para este proyecto

mkdir stripe
cd stripe

Ya dentro de este directorio crearemos uno más al que llamaremos API el cual será la API que crearemos con Flask y donde realizaremos toda la lógica del procesamiento del pago con stripe

mkdir api
cd api

Ahora si crearemos nuestro entorno virtual, cabe destacar que yo estoy utilizando ubuntu para este tutorial por lo que la instalación de virtualenv será distinta dependiendo del sistema operativo que estemos usando por lo que aquí dejo una (guía)[https://developer.mozilla.org/es/docs/Learn/Server-side/Django/development_environment] de como instalarlo, esta guía está enfocada en Django pero la instalación de virtualenv es la que nos interesa.

Dependiendo de si solo tenemos una versión de Python instalada o varias es como crearemos el entorno virtual.

Una sola versión de Python

virtualenv env

Multiples versiones de Python

virtualenv -p python_version env

En mi caso yo tengo múltiples versiones por lo que usare la segunda opción donde mi python 3.8 solo lo llamo como python3

virtualenv -p python3 env

Ahora solo nos queda instalar Flask y la Liberia de stripe utilizando el manejador de paquetes de Python pip

Primero activamos nuestro entorno virtual, nuevamente depende del sistema operativo es como activaremos el entorno virtual aun que realmente solo cambia si estamos usando Windows.

source env/bin/activate

Ya con el entorno virtual activo instalaremos Flask haciendo

pip install Flask

esto nos instalara todas las demás dependencias que necesita Flask para funcionar.

Ya por último instalaremos la Librería de Stripe haciendo

pip install stripe

React

React es uno de los múltiples Frameworks/Librerias de JS para el Frontend y también es uno de los más populares por lo que lo utilizaremos en esta serie para hacer nuestro formulario de pago.

Para instalar React solo necesitamos tener instalado NodeJS y NPM ya con esto instalado, necesitaremos instalar de forma global create-react-app el cual es el paquete recomendado por React para iniciar una aplicación

npm install -g create-react-app

Ya con create-react-app solo tenemos que iniciar nuestra aplicación con

npx create-react-app flask-stripe

Conclusión

Ya con todos estos pasos listos deberíamos tener una estructura de directorios parecida a esta

Ahora si estamos listos para iniciar a desarrollar nuestra aplicación.

Espero esto sea de su utilidad, como lo mencione es la primera vez que escribo en un blog por lo que cualquier comentario para mejorar será bienvenido.