DEV Community: Marco Agüero

Introducción a React: Fundamentos para Principiantes

Marco Agüero — Sun, 11 Aug 2024 00:24:13 +0000

¡Hola a todos! 👋 Soy Marco, un estudiante de Ingeniería Informática, y quiero darles la bienvenida a este mini curso de React.

Como estudiante de Ing. Informática, me doy cuenta de que los estudiantes finalizando la carrera y los egresados no tienen conocimiento de tecnologías modernas como React o Next para el desarrollo de páginas web o aplicaciones web. Mi mejor amiga, también estudiante de Ing. Informática, tiene problemas para comprender estas tecnologías. Por eso, decidí crear este pequeño curso, con la intención de ayudar a colegas que ya saben de programación, para que puedan aprender fácilmente tecnologías web tan importantes como estas. ¡Espero que les sea útil y sobre todo, que disfruten el proceso de aprendizaje tanto como yo disfruto compartirlo!

¿Qué es React?

Empecemos desde el principio: ¿Qué es React? 🤔

React es una biblioteca de JavaScript creada por Facebook en 2013 para construir interfaces de usuario, especialmente para aplicaciones web de una sola página (SPA). Es decir, React nos permite construir componentes reutilizables que forman la base de nuestras aplicaciones web. Si alguna vez te has preguntado cómo es que las grandes aplicaciones como Facebook o Instagram son tan rápidas e interactivas, ¡React es parte de la magia detrás de eso!

Historia y evolución de React

Aunque React nació en 2013, su historia comienza un poco antes, cuando los ingenieros de Facebook buscaban una solución para mejorar el rendimiento y la experiencia del usuario en su plataforma. React fue su respuesta a estos desafíos, y desde entonces ha evolucionado constantemente, ganando popularidad hasta convertirse en una de las tecnologías más utilizadas en el desarrollo web.

Desde su lanzamiento, React ha crecido y se ha fortalecido con una comunidad vibrante y activa que contribuye constantemente a su mejora. ¡Y ahora, tú también formas parte de esta comunidad!

Ventajas de usar React

¿Por qué React se ha vuelto tan popular? Bueno, hay varias razones que hacen de React una excelente opción para desarrollar aplicaciones web modernas:

Componentes Reutilizables: En React, todo se basa en componentes. Esto significa que puedes crear pequeños bloques de código que se pueden reutilizar en diferentes partes de tu aplicación. ¡Menos trabajo, más eficiencia!
Virtual DOM: React utiliza un concepto llamado Virtual DOM para actualizar solo las partes de la interfaz que han cambiado, en lugar de recargar toda la página. Esto hace que las aplicaciones React sean extremadamente rápidas.
Gran Comunidad y Ecosistema: React cuenta con una enorme comunidad de desarrolladores, lo que significa que hay montones de recursos, bibliotecas y herramientas disponibles para hacer tu trabajo más fácil.
Fácil de Aprender: Si ya conoces JavaScript, aprender React es relativamente sencillo. Además, una vez que aprendas React, tendrás una base sólida para aprender otras tecnologías relacionadas como Next.js.

Instalación y configuración del entorno

¡Es hora de ensuciarnos las manos! 🛠️

Antes de comenzar a escribir código en React, necesitamos preparar nuestro entorno de desarrollo. No te preocupes, es más fácil de lo que parece. Aquí te dejo una guía rápida:

Instala Node.js: Primero, necesitas tener Node.js instalado en tu máquina. Node.js es un entorno de ejecución para JavaScript que nos permitirá utilizar herramientas como npm (Node Package Manager) o yarn para gestionar nuestras dependencias. Puedes descargar Node.js desde su sitio oficial.
Crea una nueva aplicación React: Una vez que tengas Node.js instalado, abrirás tu terminal o línea de comandos y ejecutarás el siguiente comando:

npx create-react-app my-first-react-app

Esto creará una nueva carpeta llamada my-first-react-app con todos los archivos necesarios para empezar a trabajar en tu primera aplicación React.

Inicia la aplicación: Ahora, navega hasta la carpeta que acabas de crear e inicia la aplicación con estos comandos:

cd my-first-react-app
npm start

¡Y listo! Se abrirá una ventana en tu navegador con tu primera aplicación React en funcionamiento. 🎉

Primer componente React

Vamos a crear nuestro primer componente en React. ¿Estás listo? ¡Vamos allá!

En React, los componentes son como bloques de construcción. Puedes pensar en ellos como pequeñas piezas de Lego que juntas forman una aplicación completa. Vamos a crear un componente súper básico que simplemente diga "¡Hola, Mundo!".

Abre el archivo src/App.js en tu editor de texto favorito.

Borra el contenido que ya está allí y reemplázalo con este código:

import React from 'react';

function App() {
  return (
    <div>
      <h1>¡Hola, Mundo!</h1>
    </div>
  );
}

export default App;

Guarda el archivo y mira cómo se actualiza automáticamente tu navegador para mostrar el mensaje "¡Hola, Mundo!".

¡Felicidades! Acabas de crear tu primer componente React. 🎉

JSX: Qué es y cómo funciona

Si miraste el código anterior y te preguntaste, "¿Qué es este HTML mezclado con JavaScript?", no te preocupes, eso es JSX.

JSX es una extensión de JavaScript que nos permite escribir código que se parece a HTML, pero dentro de archivos JavaScript. Lo genial de JSX es que es mucho más fácil de leer y escribir que el código JavaScript puro para generar elementos HTML. Aunque parece HTML, en realidad, es JavaScript bajo el capó.

Por ejemplo, en lugar de escribir:

React.createElement('h1', null, '¡Hola, Mundo!');

Podemos escribirlo como:

<h1>¡Hola, Mundo!</h1>

Mucho más simple, ¿verdad?

Props y State: Introducción

Para cerrar esta introducción, es importante mencionar dos conceptos clave en React: Props y State.

Props (Propiedades): Las Props son como los argumentos que pasamos a una función, pero en lugar de funciones, se los pasamos a los componentes. Las Props permiten que un componente reciba datos de su componente padre y los utilice dentro de sí mismo.
State (Estado): El State es como la "memoria" de un componente. Es un objeto que puede contener datos que pueden cambiar con el tiempo, y cada vez que el State cambia, React vuelve a renderizar el componente para reflejar los nuevos datos.

En los próximos posts, vamos a profundizar más en estos conceptos y a ver cómo funcionan en la práctica.

¡Y eso es todo por hoy! Espero que esta introducción a React te haya sido útil y que estés emocionado por lo que viene. En el próximo post, profundizaremos en cómo trabajar con componentes, Props y State en React. ¡Hasta la próxima! 🚀

Comprendiendo la recursividad

Marco Agüero — Wed, 24 Aug 2022 23:49:16 +0000

Hey, que tal?
Espero que tu querido lector que encontraste este post, estés pasando un excelente día! 😎

Hoy quiero hablar sobre un tema sumamente interesante e importante para los desarrolladores, la recursividad pues este es un tema con el que te vas a encontrar en algún momento de tu carrera y mientras mas temprano lo comprendas mejor será para ti.
Antes de empezar debes entender que la recursividad no es algo complicado, simplemente debes comprender muy bien los conceptos básicos y con esto podrás resolver los problemas que se te presenten.

¿Qué es la recursividad?

La recursividad es un proceso mediante el cual una función se llama a si misma repetidas veces con la intención de resolver un problema.

Entendamos esto con ejemplos muy sencillos; imagina que tienes un computador muy simple, únicamente puede resolver problemas mediante operaciones sencillas.
Tienes una lista de números:

li = [1, 2, 3, 4, 5, 6]

Ahora, por cada elemento de esa lista tienes que verificar cual de ellos es el valor de x de la función: f(x): x-2 = 2, podríamos verificarlo fácilmente si utilizamos un bucle, por ejemplo "While" o "for", y te doy un ejemplo en pseudocódigo:

Por cada elemento de la lista li:

Si el resultado de restarle 2 al elemento es igual a 2:

imprime verdadero

Al no poder hacer esto, ya que tenemos un computador muy simple, entonces debemos idear una solución. Bueno una forma de hacerlo seria hacer una función sencilla, que verifique si el primer elemento de la lista cumple con lo especificado, y que de no ser así, lo elimine y vuelva a preguntarse a si mismo si el siguiente elemento es el que estamos buscando.

¿Te perdiste? No te preocupes, vamos a ver un ejemplo:

Primero en pseudocódigo y luego lo veremos en código, tenemos la lista li:

Tenemos una lista:
li = [1, 2, 3, 4, 5, 6]
-> Creamos una función que recibe esa lista.
-> Verifica si el primer elemento de la lista existe.
-> Si es correcto pregunta: ¿elemento - 2 = 2?
-> Si esto también fue correcto, entonces retorne verdadero.
-> En caso de que sea falso, entonces elimine el primer elemento de la lista y vuelva a llamar esta función con la nueva lista.

Bien, eso es todo... ¿Sencillo no? Ok ok, vamos al ejemplo en código:

Para efectos de este tutorial utilizare Python para los ejemplos en código, si gustan otro lenguaje cono Java o JavaScript déjenlo en los comentarios :D

lista = [1, 2, 3, 4, 5, 6]
def miFuncion(li):
    elem = li[0]
    if elem - 2 == 2:
        print("True", li[0])
    else:
        li.pop(0)
        miFuncion(li)

miFuncion(lista)

Bien, ahora espero hayas comprendido la función anterior, ahora veamos un ejemplo un poco mas avanzado, vamos a crear una función que nos retorne el factorial de un numero.
Primero entendamos la teoría del factorial:

Se denota n! y se lee "n factorial".
Corresponde al producto de los números enteros positivos desde uno hasta 'n', incluso, es decir:

n! = 1 * 2 * 3 * ... (n-2)*(n-1)*n

Ejemplos:
a) 3! = 3 * 2 * 1 = 6
b) 5! = 5 * 4 * 3 * 2 * 1 = 120
c) 6! = 6 * 5! = 6 * 120 = 720

Muy bien, ahora que entendimos la función factorial, vamos a programarla:

def factorial(num):
   if num == 1:
       return num
   else:
       return num*factorial(num-1)

Y eso es todo, con eso ya tenemos la función factorial trabajando, luego simplemente es añadir validaciones como por ejemplo que si es un numero negativo retorne un mensaje, si el numero es cero, que retorne otro y con eso la función estaría mas que perfecta.

Eso que acabamos de ver es recursividad, únicamente necesitas comprender que es lo que esta haciendo la función por dentro para poder comprenderla.

Espero este tutorial te sea de ayuda, si tienes dudas déjalas en los comentarios y con gusto los leeré y tratare de continuar explicando o enseñando :D

Build and deploy a Pocketbase project with Docker and Fly.io

Marco Agüero — Wed, 20 Jul 2022 03:30:00 +0000

PocketBase

Today I will talk about pocketbase, and how to develop a backend with this tool.
Pocketbase is an open source backend which is distributed in a single Go binary. This new tool is similar to Firebase.

This project is created to use SQLite as a database with a REST api. Some of the functions that this tool integrates are the following:

Real time database (Powered by SQLite)
File storage: integrates with S3, more object storage support is coming.
Autenticación
Full-featured admin UI - to manage users, collections and more
Extensible via Go programming language to extend functionality

This tool is perfect for making simple backends for small projects, hobbies, practice, and more.

Requirements

You must have knowledge of the following topics:

Docker
Web development
Linux

Step 1: Create an image with Docker

If you want to save time you can use my Docker image, for that you can skip to step 2.

The first thing will be to create an image with Docker, for this you must first have it installed, then we are going to open a terminal.

First we create a folder where we will store our project:

~$ mkdir pocketbase-docker 
~$ cd pocketbase-docker

Then we are going to create our Dockerfile so for this we can open our preferred editor, in my case vscode and already in it we are going to create the file and add the following:

FROM alpine:3 as downloader

ARG TARGETOS
ARG TARGETARCH
ARG VERSION=0.2.8

ENV BUILDX_ARCH="${TARGETOS:-linux}_${TARGETARCH:-amd64}"

# Install the dependencies
RUN apk add --no-cache \
    ca-certificates \
    unzip \
    wget \
    zip \
    zlib-dev

RUN wget https://github.com/pocketbase/pocketbase/releases/download/v${VERSION}/pocketbase_${VERSION}_${BUILDX_ARCH}.zip \
    && unzip pocketbase_${VERSION}_${BUILDX_ARCH}.zip \
    && chmod +x /pocketbase

FROM scratch

EXPOSE 8090

COPY --from=downloader /pocketbase /usr/local/bin/pocketbase
CMD ["/usr/local/bin/pocketbase", "serve", "--http=0.0.0.0:8090"]

Ok, once we have this, let's go back to the terminal to create our Docker image:

# We must be in the terminal positioned in the folder where we have our Dockerfile
~$ docker build -t pocketbase .

After this we can test the image to verify that it works, you can execute the following command:

# You need to make sure you have the '-it' flag and expose the port
~$ docker run -it --rm -p 8090:8090 pocketbase

If this went well you can open your browser at localhost:8090/_/ and see the pocketbase admin panel.

Now that we verify that it works we are going to publish our image in our docker account, if you do not have one I recommend you create it and log in from your terminal with the following command:

~$ docker login -u <your-username> -p <your-password>

Now let's deploy our image:

# We must add a tag to our image before deploying, for simplicity I will leave it as 'latest'
~$ docker tag pocketbase:latest <your-docker-user>/pocketbase:latest
# Now let's roll out
~$ docker push <your-docker-user>/pocketbase:latest

With this you have your image uploaded in docker 😎

Step 2: Deploy our Docker image to fly.io

For this, the first thing you need is to install fly.io in our operating system, then I leave you the commands for each operating system:

# Windows:
~$ iwr https://fly.io/install.ps1 -useb | iex
# Linux
~$ curl -L https://fly.io/install.sh | sh
# Mac
~$ brew install flyctl
# or
~$ curl -L https://fly.io/install.sh | sh

Later you will need to sign up, for this, you can execute the following command in the terminal:

~$ flyctl auth signup

This command will open a window in the browser where you can register and then it will ask you to enter a payment method, don't worry, Fly will not charge you unless your application exceeds the established free limit, and for the purposes of this tutorial it will help you to perfection.

Now you need to log in:

~$ flyctl auth login

Well, once you have logged in we are going to proceed to deploy:

For this we are going to need our Docker image that we deployed.
First we must create a necessary file to deploy, but in my case I will let Fly create it for me, for this in the terminal we execute the following command:

~$ flyctl launch --image <your-docker-user>/pocketbase:latest
# if you decided to use my image you can copy the following command:
~$ flyctl launch --image marcoa16b/pocketbase:latest

At this point fly will ask us a couple of questions, we will give our project a name and select a region for our server.

Very well, with this we will have our fly.toml file, we must damage some modifications to this file, since we need to expose the port of the Docker container so that we can access it from the domain that fly creates for us, for this we modify the following:

...
[experimental]
  allowed_public_ports = [8090]
  ...
...
[[services]]
  ...
  internal_port = 8090
  [[services.ports]]
    handlers = ["http"]
    port = 8090
...

The rest you can leave as is.

Once you have modified these ports, you can run flyctl deploy and if you get the following output, everything is fine:

 1 desired, 1 placed, 1 healthy, 0 unhealthy [health checks: 1 total, 1 passing]
--> v0 deployed successfully

Now you can go to the fly.io page and verify that you have your project there, when you open it you have the link of your project and the first time you open it in the address yourproject.fly.dev/_/ you will be able to create your user administrator and login to start managing your backend.

In the same pocketbase administrator panel you can find a simple but very complete documentation to be able to use this tool in your Javascript projects.

If you see any errors in the code, or have any suggestions to improve the project, do not hesitate to leave your comment.

If everything went well and you managed to create your backend with pocketbase and Docker, I congratulate you and thank you for reading this tutorial. 😁🎉

Do not forget to follow me on my social networks, soon I will begin to publish more content in most of them, also so you can find out about my new tutorials and projects.👍

Github
Twitter