### 1. Configurar eslint

1. Instalar eslint y configurar de la siguiente manera:

```bash
npm init @eslint/config
```

2.  Nos hara una serie de preguntas, las cuales tenemos que responder.

3.  Una vez terminado, nos creara un archivo `.eslintrc.json` en la raiz del proyecto.

4.  En parserOption del `.eslintrc.json` agregamos la siguiente linea:

```json
"parserOptions": {
    "project": "./tsconfig.json"
  },

```

4.  Creamos el script en el `package.json` para ejecutar eslint:

```json
"scripts": {
    "lint": "eslint src/**/*.{ts,js}"
  },
```

### 2. Configurar prettier

1.  Instalar prettier y configurar de la siguiente manera:

```bash
npm install -D prettier
```

2.  Creamos el script en el `package.json` para ejecutar prettier:

```json
"scripts": {
    "format": "prettier --write src/**/*.{ts,js}"
  },

```

3. Creamos el archivo `.prettierrc` en la raiz del proyecto.

4. Agregamos el siguiente contenido al archivo `.prettierrc`:

```json
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120
}
```

### 3. Corregir conflictos entre eslint y prettier

1.  Instalar las siguientes dependencias:

```bash
npm install -D eslint-config-prettier
```

2.  Agregar la siguiente linea en el archivo `.eslintrc.json`:

```json
"extends": [..., "eslint-config-prettier"],
```


Carlos Antonio Castillo Blas

En este articulo vamos a ver como configurar eslint y prettier en un proyecto de nodejs y evitar conflictos entre ellos.

Cómo configurar eslint con prittier evitando conflictos

## Sprint

Es un periodo de tiempo en el que se realiza un trabajo definido para crear un producto incrementable.

## Sprint planning

Es un evento en el que el equipo de desarrollo y el product owner definen el trabajo que se realizará en el sprint.

## Daily scrum

Es un evento diario de 15 minutos en el que el equipo de desarrollo se reúne para sincronizar su trabajo y coordinar su plan de trabajo.

## Sprint review

Es un evento en el que el equipo de desarrollo y el product owner se reúnen para inspeccionar el trabajo realizado y adaptar el plan de trabajo en consecuencia.


Los eventos de scrum son reuniones que se realizan en un momento determinado y con un propósito específico.

Eventos del scrum

## ¿Qué es el desarrollo ágil?

> El desarrollo ágil es un conjunto de metodologías de desarrollo de software que se basan en la iteración y la colaboración. El desarrollo ágil se basa en la idea de que el software se desarrolla mejor cuando los equipos de desarrollo son pequeños, auto-organizados y multidisciplinarios.

## Los doce principios ágiles

1. **Satisfacción del cliente** mediante la entrega temprana y continua de software de valor.
2. **Cambios de requisitos** son bienvenidos, incluso en fases avanzadas del desarrollo.
3. **Entregar software funcional** con frecuencia, en períodos de tiempo cortos, de semanas a meses.
4. **Colaboración** con el cliente y los desarrolladores a lo largo del proyecto.
5. **Individuos motivados** que trabajan juntos para lograr el éxito en un buen entorno y confianza.
6. **Comunicación cara a cara** es la forma más efectiva y eficiente de transmitir información a un equipo de desarrollo y a sus usuarios.
7. **Progreso** es medido por la capacidad de entregar software funcional.
8. **Desarrollo sostenible** es la capacidad de mantener un ritmo constante indefinidamente.
9. **Mejora continua** es la capacidad de refinar y mejorar el proceso de desarrollo continuamente.
10. **Simplicidad** es esencial.
11. **Autoorganización** es la clave para el éxito de un equipo de desarrollo.
12. **Autoevaluación** es la clave para mejorar el proceso de desarrollo y la capacidad de adaptarse a los cambios.

Los principios del desarrollo ágil son los principios que guían el desarrollo de software ágil. En este blog vamos a ver los 12 principios del manifiesto ágil de manera resumida y breve.

Los 12 principios del desarrollo ágil

## git reset

Borra commits de la historia de un repositorio. Nos permite volver a un commit anterior.

- **git reset --hard hash**: Borra todos los commits posteriores al commit con el hash indicado incluido el staging area.
- **git reset --soft hash**: Borra todos los commits posteriores al commit con el hash indicado,manteniendo el staging area.

- **git reset --hard HEAD~1**: Borra el último commit incluido el staging area.
- **git reset --soft HEAD~1**: Borra el último commit manteniendo el staging area.
- **git reset HEAD**: Borra todos los archivos del staging area.

- **git reset --hard HEAD**: Borra los cambios y el staging area y lo deja como estaba el último commit.

## git rm

Elimina archivos del staging area y del directorio de trabajo.

- --cached: Elimina archivos del staging area y del repositorio local. Basicamente deja de trackear el archivo.
- --force: Elimina archivos del staging area y del disco duro. Basicamente elimina el archivo.
- -r: Elimina archivos de forma recursiva.

## git checkout

Cambia de rama o cambiar el estado de un archivo.

- **git checkout hash hello.html**: Cambia el estado del archivo hello.html al commit con el hash indicado. Si se hace un commit después de esto, se crea un nuevo commit con el estado del archivo hello.html del commit con el hash indicado.
- **git checkout head hello.html**: Cambia el estado del archivo hello.html al último commit.
- **git checkout -- .**: Deja el directorio de trabajo como estaba el último commit.

## branch

Es una linea de desarrollo independiente de un proyecto.

✅ main es el nombre por defecto de la rama principal de un proyecto.

- **git branch**: Muestra las ramas existentes.
- **git branch -r**: Muestra las ramas remotas.
- **git branch -a**: Muestra todas las ramas.
- **git branch nombre**: Crea una rama con el nombre indicado.
- **git checkout nombre**: Cambia a la rama con el nombre indicado.
- **git checkout -b nombre**: Crea una rama con el nombre indicado y cambia a esa rama.
- **git branch -d nombre**: Elimina la rama con el nombre indicado.

## merge

Es la acción de combinar dos ramas.

- **git merge nombre**: Combina la rama actual con la rama con el nombre indicado.

## git rebase

Esta acción permite mover una rama a otra rama. Es decir, combina dos ramas de manera lineal.
✅ primero se hace un rebase a la rama que se quiere mover y luego se hace un merge a la rama a la que se quiere mover.

- **git rebase nombre**: Mueve la rama actual a la rama con el nombre indicado.

## git stash

Guarda los cambios en un stash y los elimina del staging area y del directorio de trabajo.

- **git stash**: Guarda los cambios en un stash.
- **git stash pop**: Recupera los cambios del stash y los elimina del stash.
- **git stash list**: Muestra los stash existentes.
- **git stash apply**: Recupera los cambios del stash.
- **git stash drop**: Elimina el stash.
- **git stash clear**: Elimina todos los stash.
- **git stash branch nombre**: Crea una rama con el nombre indicado y recupera los cambios del stash.

## git clean

Elimina los archivos que no están trackeados por git.

- **git clean -f**: Elimina los archivos que no están trackeados por git.
- **git clean -f -d**: Elimina los archivos que no están trackeados por git y los directorios vacíos.
- **git clean -f -d -x**: Elimina los archivos que no están trackeados por git y los directorios vacíos y los archivos ignorados por git.
- **git clean --dry-run**: Muestra los archivos que serán eliminados.

## git cherry-pick

Permite traer un commit de otra rama a la rama actual.

- **git cherry-pick hash**: Trae el commit con el hash indicado a la rama actual.

## git reflog

Muestra la historia de los commits de un repositorio. Nos permite volver a un commit anterior incluso si ya se hizo un reset.

- **git reflog**: Muestra la historia de los commits de un repositorio.
- **git reflog hash**: Muestra la historia de los commits de un repositorio hasta

## git --amend

Permite modificar el último commit. Es decir, permite modificar el mensaje del último commit o agregar modificaciones al último commit.

- **git commit --amend -m "mensaje"**: Modifica el mensaje del último commit.
- **git commit --amend -m "mensaje" --no-edit**: Modifica el mensaje del último commit y no abre el editor de texto.
- **git commit --amend --no-edit**: Agrega los cambios al último commit y no abre el editor de texto.

## git grep

Busca un texto en todos los archivos de un repositorio.

- **git grep "texto"**: Busca el texto indicado en todos los archivos de un repositorio.
- **git grep -n "texto"**: Busca el texto indicado en todos los archivos de un repositorio y muestra el número de la línea donde se encuentra el texto.
- **git grep -c "texto"**: Busca el texto indicado en todos los archivos de un repositorio y muestra la cantidad de veces que se encuentra el texto.


## git restore
Remueve cambios
- **git restore archivo** : Restablece el archivo y deja como el último commit.
- **git restore --staged archivo** : Quita el archivo del staging area.



Los conceptos más avanzados con ejemplos de cómo se deben usar

Conceptos avanzados de Git y GitHub

## Conceptos

### **branch**

Es una linea de desarrollo independiente de un proyecto.

✅ master es el nombre por defecto de la rama principal de un proyecto.

✅ git branch: Muestra las ramas existentes.

- **commit:** Es un punto en la historia de un proyecto, es decir, es una captura de los archivos en un momento determinado.

- **merge:** Es la unión de dos o más ramas de desarrollo.

- **pull:** Es la acción de traer los cambios de un repositorio remoto a un repositorio local.

- **push:** Es la acción de enviar los cambios de un repositorio local a un repositorio remoto.

- **rebase:** Es la acción de mover una rama a un nuevo commit base.

- **remote:** Es un repositorio que no está en el mismo equipo que el repositorio local.

- **stash:** Es la acción de guardar temporalmente los cambios que no se han hecho commit.

## configuracion de git

- `git config --global user.name "nombre"`
- `git config --global user.email "email"`
- `git config --list (muestra la configuracion de git)`

## configuracion ssh

- **cd ~** :nos posicionamos en la carpeta del usuario
- **ssh-keygen -t rsa -b 4096 -C "carloscb8080@gmail.com"** : genera una llave ssh
- **eval "$(ssh-agent -s)"** : inicia el agente ssh
- **ssh-add ~/.ssh/id_rsa** : agrega la llave ssh al agente ssh
- **cat ~/.ssh/id_rsa.pub** : copia la llave ssh y la pegas en github
- **git remote set-url origin git@github.com:carloscb8080/gitapp.git** : cambia la url del repositorio remoto

## comandos basicos

- **git init**: Inicializa un repositorio git en el directorio actual
- **git status**: Muestra el estado del repositorio
- **git add .**: Agrega archivos al staging area (área de preparación)
- **git commit -m "mensaje"**: Crea un commit con los archivos del staging area.
- **git log**: Muestra el historial de commits
- **git log --graph**: Muestra el historial de commits en forma de grafo
- **git log --oneline**: Muestra el historial de commits en una sola línea
- **git log --oneline --graph**: Muestra el historial de commits en una sola línea y en forma de grafo
- **git log --decorate**: Muestra el historial de commits con los nombres de las ramas y los tags
- **alias arbolito="git log --graph --oneline --decorate"**: Crea un alias para el comando git log --graph --oneline --decorate
- **git rm --cached -r .**: Elimina todos los archivos del staging area.
- **git show hello.html**: Muestra el cambio que se hizo en el archivo hello.html
- **git diff hash hash**: Muestra la diferencia entre dos commits
- **gitk**: Muestra el historial de commits en una interfaz gráfica

## atajos basicos

- esc + shift + z + z: salir del editor vim
- q + enter: salir del editor nano

## tags

los tags son etiquetas que se le ponen a un commit para identificarlo de manera facil

- **git tag -a v1.0 -m "mensaje" hash**: Crea un tag en el commit con el hash indicado

- **git tag**: Muestra los tags existentes
- **git tag -d v1.0**: Elimina el tag con el nombre indicado
- **git show-ref --tags**: Muestra los tags existentes
- **git push origin --tags**: Envia los tags al repositorio remoto




Un resumen de todo los conceptos y comandos básicos de git.

Conceptos y comandos básicos de Git y GitHub

## 1. Backlog

El backlog es una lista de tareas que se deben realizar para completar el proyecto. Esta lista es dinámica y cambiante.
El backlog esta compuesto por **Épicas** las cuales a su vez están compuestas por **Historias de Usuario**.

El backlog se divide en dos partes:

- **El backlog del producto** es una lista de tareas que se deben realizar para completar el proyecto.
- **El backlog de iteración** es una lista de tareas que se deben realizar en una iteración. Este se crea a partir del backlog del producto en las reuniones.

### Historias de Usuario

Las historias de usuario son elementos o funcionalidades específicas y atómicas. Estas se escriben en formato de usuario, es decir, se escriben como si fueran tareas que el usuario debe realizar.

##### Formato :

- **Título**: debe ser corto y conciso.
- **Descripción**: debe ser lo más detallada posible.
- **Puntos**: es la estimación de la complejidad de la historia de usuario.
- **Criterios de aceptación**: son los requisitos que debe cumplir la historia de usuario para ser considerada como completada.

### Épicas

Las épicas son funcionalidades o módulos que se deben desarrollar para completar el proyecto


## 2. Sprint

Un sprint es un periodo de tiempo en el que se crea un incremento del producto. Los sprints son de duración fija y se realizan de manera consecutiva. Es un proceso iterativo e incremental.

- Debe tener un objetivo claro.
- Debe tener una duración fija maxima de 4 semanas.
- Debe ser un proceso iterativo e incremental.
- Debe ser un proceso de aprendizaje.
- Los cambios son negociados entre el **product owner** y el **equipo de desarrollo**.
- Se puede cancelar un sprint en cualquier momento por el **product owner**.


Sigue el siguiente flujo:

1. **Sprint Planning:** En esta reunión se eligen las historias de usuario que se deben realizar en el sprint. Se elige la duración del sprint y se asignan las historias de usuario a los miembros del equipo.
1. **Daily Scrum:** Es una reunión diaria de 15 minutos en la que se discuten los avances del proyecto. Se reponden preguntas como: ¿Qué hice ayer? ¿Qué haré hoy? ¿Qué obstáculos tengo?.
1. **Implementations:** Es el desarrollo de las historias de usuario.
1. **Sprint Review:** Es una reunión al final del sprint en la que se revisan los avances de la iteración y el producto funcional que se ha creado.
1. **Sprint Retrospective:** Es una reunión al finalizar el sprint en la que se analiza las oportunidades de mejora del proceso y se eligen las acciones a tomar. Se analizan las herramientas utilizadas, las relaciones entre los miembros del equipo, los procesos, etc. Se reponden preguntas como: ¿Qué hicimos bien? ¿Qué hicimos mal? ¿Qué podemos mejorar?.


Los artefactos son los recursos y elementos que garantizan la transparencia y el registro de la información que se genera en el proceso de desarrollo de software con Scrum.

Artefactos de scrum

## ¿Que es scrum?

> Es un marco de trabajo que ayuda a los equipos a auto-organizarse y a gestionar su propio trabajo.

### Pilares de scrum

1. **Transparencia**. La transparencia es la base de la confianza. El equipo debe ser capaz de ver y entender el trabajo que se está realizando, por qué se está realizando y cómo se está realizando.
2. **Inspección**. La inspección es la base de la adaptación. El equipo debe ser capaz de inspeccionar el trabajo en curso y adaptar su plan de trabajo en consecuencia.
3. **Adaptación**. La adaptación es la base de la mejora. El equipo debe ser capaz de adaptar y mejorar su plan de trabajo para maximizar el valor del trabajo realizado.

### Valores de scrum

1. **Compromiso**. El equipo se compromete a cumplir con el plan de trabajo.
2. **Coraje**. El equipo debe ser capaz de realizar cualquier tarea que sea necesaria para cumplir con el plan de trabajo.
3. **Enfoque**. El equipo debe centrarse en cumplir con el plan de trabajo.
4. **Apertura**. El equipo debe ser abierto a recibir comentarios y sugerencias de cualquier persona.
5. **Respeto**. El equipo debe ser respetuoso con las personas que lo rodean y con el trabajo que realizan.

### Componentes de scrum

1. 🔗 [Equipo de scrum](/blog/el-equipo-de-scrum)

1. 🔗 [Eventos de scrum](/blog/eventos-del-scrum)

1. 🔗 [artefactos de scrum](/blog/artefactos-de-scrum)



Scrum es un marco de trabajo que ayuda a los equipos a gestionar proyectos complejos y de alto rendimiento.

En Scrum se realizan entregas parciales y regulares del producto final, priorizadas por el beneficio que aportan al receptor del proyecto. Por ello, Scrum está especialmente indicado para proyectos en entornos complejos, donde se necesita obtener resultados pronto, donde los requisitos son cambiantes o poco definidos, donde la innovación, la competitividad, la flexibilidad y la productividad son fundamentales

Metodología ágil Scrum

# Características
- Autoorganizado
- Multifuncional
- No tiene títulos
- No hay subequipos
- Solo se modifica al final del sprit
## 1. Escrum master
Es una responsabilidad dentro de un equipo que se asegura de que el equipo siga las reglas de scrum tal cual se establece en en la guía scrum.

roles de scrum master:

- **Facilitador:** Asiste a los miembros del equipo a tener conversaciones efectivas y altamente productivas.

- **Entrenador:** Ayuda a los miembros del equipo a aprender a usar scrum y a mejorar su desempeño.

- **Mentor:** Ser guía y mentor para los miembros del equipo y para la organización en general a través de la la práctica y la experiencia.

- **Coach:** Ayuda a los miembros del equipo a la autogestión y la multifuncionalidad.

- **Consultor:** Usa distintas herramientas para agilizar el logro de la efectividad del equipo.

## 2.  Product owner
Es la persona que representa al cliente y es responsable de maximizar el valor del producto.

## 3. Development team
Es el equipo de desarrollo que crea el producto.

El equipo de scrum es responsable de la creación del producto y de la toma de decisiones sobre el mismo. 

El equipo de scrum

## Patrones creacionales

> Establecen mecanismos de creación de objetos que aumentan la flexibilidad y reutilización de código. Los patrones creacionales más importantes son:

- **Abstract Factory**. Proporciona una interfaz para crear familias de objetos relacionados o dependientes sin especificar sus clases concretas.

![Abstract Factory](https://media.graphassets.com/XgkdJZ9xRDzLZAdgQkwf)

En Go, podemos implementar el patrón Abstract Factory de la siguiente manera:

```go
 package main

import (
	"fmt"
	"math"
)

type SphericalFactory struct {
	radius float64
}

type PyramidFactory struct {
	base   float64
	height float64
}

type AbstractFactory interface {
	GetVolume() float64
	GetArea() float64
}

func (s SphericalFactory) GetVolume() float64 {
	return (4 / 3) * math.Pi * math.Pow(s.radius, 3)
}

func (s SphericalFactory) GetArea() float64 {
	return 4 * math.Pi * math.Pow(s.radius, 2)
}

func (p PyramidFactory) GetVolume() float64 {
	return (p.base * p.height) / 3
}

func (p PyramidFactory) GetArea() float64 {
	return p.base * p.height
}

func GetFactory(shape string) AbstractFactory {
	switch shape {
	case "sphere":
		return SphericalFactory{radius: 10}
	case "pyramid":
		return PyramidFactory{base: 10, height: 10}
	default:
		return nil
	}
}

func PrinData(factory AbstractFactory) {
	fmt.Println("Area:", factory.GetArea())
	fmt.Println("Volume:", factory.GetVolume())
}

func main() {
	sphere := GetFactory("sphere")
	PrinData(sphere)

	pyramid := GetFactory("pyramid")
	PrinData(pyramid)
}

```

- **Singleton**. Asegura que una clase sólo tenga una instancia y proporciona un punto de acceso global a ella.

En Go, podemos implementar el patrón Singleton de la siguiente manera:

```go
package main

// singleton example

import (
	"fmt"
	"time"
)

type Database struct{}

var instance *Database

func (d *Database) CreateConnection() {
	fmt.Println("Creating connection...")
	time.Sleep(5 * time.Second)
	fmt.Println("Connection created")
}

func GetInstance() *Database {
	if instance == nil {
		instance = &Database{}
		instance.CreateConnection()
	}
	return instance
}

func main() {
	conection1 := GetInstance()
	conection2 := GetInstance()

	fmt.Println(conection1 == conection2)
}

```

## Patrones estructurales

> Los patrones estructurales se preocupan por cómo se componen los objetos y clases. Con el fin de lograr una mayor flexibilidad y reutilización de código.

- **Adapter**. Convierte la interfaz de una clase en otra interfaz que el cliente espera. Permite que clases trabajen juntas que de otra forma no podrían debido a interfaces incompatibles.

En Go, podemos implementar el patrón Adapter de la siguiente manera:

```go
package main

import "fmt"

type Payment interface {
	Pay(amount float32) string
}

type Cash struct{}
type BankPayment struct{}

func (c *Cash) Pay(amount float32) string {
	return fmt.Sprintf("%0.2f paid using cash", amount)
}

func (b *BankPayment) Pay(amount float32, account string) string {
	return fmt.Sprintf("%0.2f paid using bank(%s)", amount, account)
}

func processPayment(p Payment, amount float32) {
	fmt.Println(p.Pay(amount))
}

type BankPaymentAdapter struct {
	bankPayment *BankPayment
	account     string
}

func (b *BankPaymentAdapter) Pay(amount float32) string {
	return b.bankPayment.Pay(amount, b.account)
}

func main() {
	cash := &Cash{}
	processPayment(cash, 100)

	backPayment := &BankPaymentAdapter{
		bankPayment: &BankPayment{},
		account:     "123456789",
	}
	processPayment(backPayment, 200)
}
```

## Patrones de comportamiento

> Estos patrones se preocupan por cómo los objetos interactúan y distribuyen la responsabilidad entre ellos.

- **Observer**. Define una dependencia de uno a muchos entre objetos de modo que cuando un objeto cambia de estado, todos sus dependientes son notificados y actualizados automáticamente.

En Go, podemos implementar el patrón Observer de la siguiente manera:

```go
package main

import "fmt"

type Observer interface {
	notify(string)
}

type Product struct {
	observers []Observer
	name      string
	available bool
}

type EmailClient struct {
	email string
}

func NewProduct(name string) *Product {
	return &Product{
		name:      name,
		available: false,
	}
}

func (prod *Product) register(observer Observer) {
	prod.observers = append(prod.observers, observer)
}

func (prod *Product) updateAvailability(available bool) {
	prod.available = available
	prod.boradcast()
}

func (prod *Product) boradcast() {
	if !prod.available {
		return
	}

	for _, observer := range prod.observers {
		observer.notify(prod.name)
	}
}

func (client *EmailClient) notify(prodName string) {
	fmt.Printf("*) Item %s is now available , please check your account %s \n", prodName, client.email)
}

func main() {
	product1 := NewProduct("iPhone X")
	product2 := NewProduct("iPhone X2")

	observer1 := &EmailClient{email: "carlos@gmail.com"}
	observer2 := &EmailClient{email: "mila@gmail.com"}
	observer3 := &EmailClient{email: "joe@gmail.com"}

	product1.register(observer1)
	product1.register(observer2)
	product2.register(observer3)

	product1.updateAvailability(true)
}

```

- **Strategy**. Define una familia de algoritmos, encapsula cada uno de ellos y los hace intercambiables. Permite que el algoritmo varíe independientemente de los clientes que lo usan.

En Go, podemos implementar el patrón Strategy de la siguiente manera:

```go
package main

type Algorithm interface {
	hash(p *PasswordProtector)
}

type PasswordProtector struct {
	password  string
	algorithm Algorithm
}

func (p *PasswordProtector) SetAlgorithm(a Algorithm) {
	p.algorithm = a
}

func (p *PasswordProtector) Hash() {
	p.algorithm.hash(p)
}

type SHA256 struct{}
type MD5 struct{}

func (s *SHA256) hash(p *PasswordProtector) {
	p.password = "SHA256->" + p.password
}

func (m *MD5) hash(p *PasswordProtector) {
	p.password = "MD5->" + p.password
}

func main() {
	pass := &PasswordProtector{password: "123456"}
	pass.SetAlgorithm(&SHA256{})
	pass.Hash()
	println(pass.password)
	pass.SetAlgorithm(&MD5{})
	pass.Hash()
	println(pass.password)
}

```


Los patrones de diseño son planos que nos permiten dar soluciones a problemas comunes que ocurren en la programación. En este post aprenderemos los patrones de diseño más importantes y cómo aplicarlos en Go.

Patrones de diseño de software en Go

## useState
El **useState** es un hook que nos permite crear un estado en un componente. El argumento que recibe es un valor inicial. En este caso, el valor inicial es 0. El valor que se retorna es un array con dos elementos: el valor del estado y una función que permite actualizar el valor del estado. Cada vez que se el estado se actualiza, React hará una renderización.

⚠️ La función de actualización es asíncrona, por ello si se usa el valor consecutivamente se puede tener respuestas no deseadas.

```tsx
import React, { useState } from 'react';

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  return <button onClick={() => setCounter((prev) => prev + 1)}>{counter}</button>;
};
```


## useEffect
El useEffect es un hook que nos permite ejecutar un efecto secundarios en un componente cuando alguna dependencia cambia. Este hook recibe dos parámetros una función que se ejecuta cuando el componente se monta y un arreglo de dependencias.Cuando uno de sus dependencias cambia, se ejecuta la función.

- 🎯Si no se pasa ninguna dependencia, el useEffect se ejecuta cada vez que el componente se vuelve a renderizar.
- 🎯Si no se pasa ninguna dependencia, el useEffect se ejecuta cada vez que el componente se vuelve a renderizar.
- 🎯El retorno del useEffect es una función que se ejecuta cuando el componente se desmonta. Es una fase de limpieza. se debe remover eventos, desuscribirse de observadores, etc.
- ⚠️Se debe usar un useEffect para cada tarea específica.
- ❗No se puede usar de manera condicional.


```typescript
import React, { useEffect, useState } from 'react';

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log('Counter updated');
    return () => console.log('Counter unmounted');
  }, [counter]);

  return <button onClick={() => setCounter((v) => v + 1)}>{counter}</button>;
};
```

## useRef
El useRef es un hook que nos permite mantener una referencia a un elemento del DOM. Esto nos permite acceder a un elemento del DOM desde una función.

👉Cuando su valor cambia, el componente no se renderiza nuevamente.

```tsx
import React, { useEffect } from 'react';

export const Component = () => {
  const inputRef = React.useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus(); // <-- No renderiza nuevamente el componente
  }, []);

  return <input ref={inputRef} />;
};
```

## useLayoutEffect
El useLayoutEffect es un hook que se ejecuta de manera síncrona después de todas las mutaciones del DOM pero antes de que el cambio se pinte en pantalla.

👉 La diferencia clave entre useEffect y useLayoutEffect es que useEffect se ejecuta de manera asíncrona y useLayoutEffect de manera síncrona después del render de react. por lo tanto useEffect se ejecutará después de que el cambio se haya pintado en pantalla, mientras que useLayoutEffect se ejecutará antes de que el cambio se haya pintado en pantalla.




Los Hooks son una característica en React que te permite usar el estado y otras funciones de React sin clases de escritura. Aquí te proporcionamos ejemplos de código fáciles de entender para ayudarlo a aprender su funcionamiento y que puedas aprovecharlos en su próximo proyecto.

Resúmen de React Hooks con Typescript


### Organización del proyecto

- `main.go` Archivo principal donde se ejecuta el servidor.
- `server.go` Archivo donde se define la estructura del servidor.
- `router.go` Archivo donde se definen los routers.
- `handlers.go` Archivo donde se definen los handlers.
- `middlewares.go` Archivo donde se definen los middlewares.
- `types.go` Archivo donde se definen los tipos de datos.

##### main.go

```go

package main

func main() {
	server := NewServer(":8080")
	server.Handle("/", "GET", HandlerRoot)
	server.Handle("/api", "GET", server.AddMiddleware(HandlerApi, ChecAuth(), Logging()))
	server.Handle("/api/users", "POST", server.AddMiddleware(HandlerUsers, ChecAuth(), Logging()))
	server.Start()
}

```

##### server.go

```go

package main

import "net/http"

type Server struct {
	port   string
	router *Router
}

func NewServer(port string) *Server {
	return &Server{port: port, router: NewRouter()}
}

func (s *Server) Handle(path string, method string, handler http.HandlerFunc) {
	_, ok := s.router.rules[path]
	if !ok {
		s.router.rules[path] = make(map[string]http.HandlerFunc)
	}
	s.router.rules[path][method] = handler

}

func (s *Server) AddMiddleware(f http.HandlerFunc, middlewares ...Middleware) http.HandlerFunc {
	for _, m := range middlewares {
		f = m(f)
	}
	return f
}

func (s *Server) Start() error {

	http.Handle("/", s.router)
	err := http.ListenAndServe(s.port, nil)
	if err != nil {
		return err
	}
	return nil
}

```

##### router.go

```go

package main

import (
	"fmt"
	"net/http"
)

type Router struct {
	rules map[string]map[string]http.HandlerFunc
}

func (r *Router) ServeHTTP(w http.ResponseWriter, req *http.Request) {
	handler, ok := r.FindHandler(req.URL.Path, req.Method)
	if !ok {
		w.WriteHeader(http.StatusNotFound)
		fmt.Fprintf(w, "404 Not Found")
		return
	}
	handler(w, req)
}

func (r *Router) FindHandler(path string, method string) (http.HandlerFunc, bool) {
	handler, ok := r.rules[path][method]
	return handler, ok
}

func NewRouter() *Router {
	return &Router{
		rules: make(map[string]map[string]http.HandlerFunc),
	}
}

```

##### handlers.go

```go

package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

func HandlerRoot(w http.ResponseWriter, req *http.Request) {
	fmt.Fprintf(w, "Hello World")
}

func HandlerApi(w http.ResponseWriter, req *http.Request) {
	fmt.Fprintf(w, "Hello Api")
}

func HandlerUsers(w http.ResponseWriter, req *http.Request) {
	decoder := json.NewDecoder(req.Body)
	var user User
	err := decoder.Decode(&user)
	if err != nil {
		fmt.Fprintf(w, "Error: %v", err)
		return
	}

	w.Header().Set("Content-Type", "application/json")
	w.Write(user.ToJson())
}

```

##### middlewares.go

```go

package main

import (
	"fmt"
	"net/http"
	"time"
)

func ChecAuth() Middleware {
	return func(next http.HandlerFunc) http.HandlerFunc {
		return func(w http.ResponseWriter, r *http.Request) {
			fmt.Println("Checkin Auth")
			apiKey := r.Header.Get("api_key")
			if apiKey != "123" {
				w.WriteHeader(http.StatusUnauthorized)
				fmt.Fprintf(w, "401 Unauthorized")
				return

			}
			next(w, r)
		}
	}
}

func Logging() Middleware {
	return func(next http.HandlerFunc) http.HandlerFunc {
		return func(w http.ResponseWriter, r *http.Request) {
			start := time.Now()

			defer func() {
				fmt.Printf("%s %s %s %v \n", r.Method, r.RequestURI, r.Proto, time.Since(start))
			}()

			next(w, r)
		}
	}
}

```

##### types.go

```go

package main

import (
	"encoding/json"
	"fmt"
	"net/http"
)

type Middleware func(http.HandlerFunc) http.HandlerFunc

type User struct {
	Name  string `json:"name"`
	Email string `json:"email"`
	Phone string `json:"phone"`
}

func (u User) ToJson() []byte {
	json, err := json.Marshal(u)
	if err != nil {
		fmt.Println(err)
	}
	return json
}

```


En este artículo se explica cómo crear un web service con Go.
Aprendemos a usar los routers, los middlewares, los handlers y más.

Crea tu primer web server con Go

## ¿Qué es la concurrencia en Go?

La concurrencia es la capacidad de ejecutar tareas una tras otra, pero de forma no secuencial. O sea no se tiene que esperar a que una tarea termine para ejecutar la siguiente, sino que las tareas se van encolando y se van ejecutando una tras otra dando la sensación de que se ejecutan al mismo tiempo.

- En Go los hilos se crean con la palabra reservada `go`.
- Las Goroutines son hilos ligeros, no pesan tanto como los hilos de otros lenguajes.
- Las Goroutines se ejecutan en un solo hilo de ejecución.

```go
package main

import (
	"fmt"
	"time"
)

func say(i int) {
	fmt.Println("Numero: ", i)
	time.Sleep(100 * time.Millisecond)
}

func main() {
	for i := 0; i < 10; i++ {
		go say(i)
	}

	var input string
	fmt.Scan(&input)
}

```

#### Channels

Los channels son una forma organizar la comunicación entre Goroutines. Los channels son un tipo de dato que se puede enviar y recibir información. Los channels se crean con la palabra reservada `make` y se le pasa el tipo de dato que se va a enviar y recibir y la cantidad de datos que se pueden enviar y recibir como parámetros.

```go
package main

import (
	"fmt"
)

func say(text string, c chan<- string) {
	c <- text
}

func main() {
	c := make(chan string, 1)
	fmt.Println("Hello")
	go say("World", c)
	fmt.Println(<-c)

}

```

#### Range, Close y Select

- `Range` es una forma de iterar sobre un channel.
- `Close` es una forma de cerrar un channel.
- `Select` es una forma de esperar a que un channel este listo para recibir o enviar información.

```go
package main

import (
	"fmt"
)

func main() {
	c1 := make(chan string, 2)
	c2 := make(chan string, 1)

	go func() {
		c1 <- "one one"
		c1 <- "one two"
		close(c1) //close channel
	}()
	go func() {
		c2 <- "two one"
		close(c2) //close channel
	}()

	for i := 0; i < 2; i++ {
		select { //select statement
		case msg1 := <-c1:
			fmt.Println("received", msg1)
		case msg2 := <-c2:
			fmt.Println("received", msg2)
		}
	}

	// range over channel
	for msg1 := range c1 {
		fmt.Println("c1 :: ", msg1)
	}

}
```


La concurrencia en Go es un tema muy interesante, y es que Go es un lenguaje que se ha diseñado para ser concurrente nativamente, y por lo tanto, es muy fácil escribir código concurrente en Go. En este post vamos a ver un poco de teoría sobre concurrencia, y luego veremos un ejemplo de código concurrente en Go.

Concurrencia en Go

## Bucle for

El bucle for es una estructura de control que nos permite repetir un bloque de código un número determinado de veces. En Go solo existe el bucle for, no existe el bucle while ni el bucle do-while.

```go
for i := 0; i < 10; i++ {
    fmt.Println(i)
}
```

#### Bucle for while

Este bucle ejecuta el código hasta que la condición sea falsa.

```go
i := 0
for i < 10 {
    fmt.Println(i)
    i++
}
```

#### Bucle for forever

Este bucle ejecuta el código hasta que se interrumpa el programa.

```go
i := 0
for {
    fmt.Println(i)
    i++
}
```

##### keywords.

- `break` - rompe el bucle
- `continue` - salta a la siguiente iteración del bucle

## Estrucutra de control if

La estructura de control if es una estructura de control que nos permite ejecutar un bloque de código si se cumple una condición.

```go
if i < 10 {
    fmt.Println("i es menor que 10")
}else{
    fmt.Println("i es mayor que 10")
}
```

## Estrucutra de control switch

La estructura de control switch es una estructura de control que nos permite ejecutar un bloque de código dependiendo del valor de una variable.

```go
 const mod:=7%2
    switch mod {
    case 0:
        fmt.Println("Es par")
    default 1:
        fmt.Println("Es impar")
    }
```

- Otra forma muy común:

  ```go
  switch mod := 7 % 2; mod {
      case 0:
          fmt.Println("Es par")
      default 1:
          fmt.Println("Es impar")
      }
  ```

- Sin condición:

  ```go
  const mod:=7%2
  switch {
      case mod == 0:
          fmt.Println("Es par")
      default:
          fmt.Println("Es impar")
      }
  ```



Las estructuras de control de flujo son las herramientas que nos permiten controlar el flujo de ejecución de nuestro programa. En este artículo veremos las estructuras de control de flujo más comunes en Go.

Categorías más publicadas