En mis veinte años de experiencia como ingeniero de software, he estado en muchas revisiones de sprint. Las he visto hacer bien y he visto que a veces se las usa para que las personas hagan un alto en una sala de reuniones por un par de horas cada sprint.

Realizada de manera correcta, la revisión de sprint puede ser la clave para mantener al día tu proyecto. Por el contrario, las revisiones de sprint hechas de forma incorrecta son peor que el tiempo malgastado en ellas, ya que disminuyen la confianza de las personas en la metodología Scrum.

En este artículo, te voy a guiar a través de algunas ideas y el paso a paso para hacer que tu revisión de sprint tenga más valor.

¿Qué es una revisión de sprint?

Una revisión de sprint es una sesión corta que se realiza al final de cada sprint, usualmente cada un par de semanas.

Esta sesión permite al equipo mostrar el trabajo realizado a través de demos, obtener feedback y decidir qué es lo que sigue.

Al hacerse de forma correcta, la revisión de sprint muestra progreso y crea confianza a las personas que tienen un interés en el producto y el proyecto.

Por supuesto, es posible decirles a los interesados que el proyecto está al día, pero si pueden verlo con sus propios ojos durante la revisión de sprint, estarán más contentos.

¿Quién debería estar en la revisión?

En resumen, cualquier persona que así lo quiera. Cualquier persona que sea parte interesada en cualquier capacidad puede y debería estar presente en estas reuniones.

El propio equipo scrum se encuentra en el centro de la reunión, pero también pueden estar los de Ventas, los subgerentes generales, otros equipos scrums y project managers.

Si alguien tiene algo para aportar al proyecto o cree que puede beneficiarse por aprender algo del proyecto, deberían asistir,

¿Qué hacer antes de la revisión de sprint?

Para que la reunión se lleve a cabo sin ningún problema, es necesario asegurarse que quienes vayan a presentar estén preparados y con una demo lista para mostrar.

Por experiencia propia, las demos en vivo no funcionan. Algunas sí, pero en su mayoría no.

Puedes decirles a quienes tengan una demo que al menos se graben mostrando el flujo de trabajo antes de la reunión. De esta manera, si insisten en hacer una demo en vivo, van a tener un video grabado a modo de resguardo si todo sale mal.

También deberías tener una lista con las personas que van a presentar y en qué orden. Agrúpalas por similitud del tema. No importa quién presenta y cuándo lo hace mientras que las presentaciones estén agrupadas por tema.

Por ejemplo, si tienes seis ingenieros - dos trabajando en una página de inicio de sesión, dos más trabajando en servicio back-end nuevo y otros dos trabajando en la performance de la base de datos- asegúrate que en tu lista de presentadores estas tres areas distintivas estén juntas.

Si hay dos demos que son similares, puedes explicar el contexto una sola vez y después correr las demos una seguida de la otra. Se eficiente, ya que tienes a muchas personas en esta reunión y todos saben que las reuniones son costosas.

Durante la revisión

Los ingenieros de software que hayan trabajado en alguna parte del proyecto harán la presentación a los otros miembros del equipo scrum (Producto, QA y otros) y también a los interesados que estén en la reunión.

Después de la presentación de cada ingeniero, cualquiera de los presentes en la reunión puede hacer preguntas o comentarios sobre el trabajo realizado o la presentación.

Estas preguntas pueden ir desde detalles sobre el proyecto para quienes no conozcan, lo conozcan en su totalidad o pueden ser preguntas sobre porque se decidió seguir un curso de acción en particular.

Desde Producto o miembros de la audiencia que estén más enfocados en la parte del negocio pueden dar feedback sobre si lo que fue presentando coincide con la intención de negocio de lo que se pidió entregar.

Una vez que todas las preguntas y comentarios son respondidos, el próximo ingeniero presentará su trabajo.

En una revisión de sprint, si bien todos pueden hablar, generalmente solo lo hacen los ingenieros que presentan. Entonces, el ingeniero presenta sobre el trabajo que realizaron y luego Producto, QA, Ba y los demás pueden dar feedback y hacer preguntas específicas sobre lo que el ingeniero presentó.

Revisión de ejemplo

Demos una mirada a una revisión de ejemplo y a lo que podría contener.

Vamos a usar el ejemplo de los seis ingenieros de más arriba: dos trabajando en la página de inicio de sesión, dos trabajando en un servicio back-end y dos trabajando en la performance de la base de datos. En ese caso, la lista de presentadores se ve así:

Presentaciones

1. Larry: El usuario supera la cantidad máxima de intentos de inicio de sesión y la cuenta se bloquea después del quinto intento incorrecto. El usuario tiene que pedir un nuevo password antes de poder iniciar sesión de nuevo.
2. David: El usuario hace clic en el enlace de contraseña olvidada y se emvia un enlace a su correo electrónico. El usuario hace clic en el enlace y puede restablecer su contraseña.
3. Premilla: Un servicio de reporte consume el evento "Usuario excede la cantidad máxima de intentos de inicio de sesión" y lo publica en el tablero de reportes.
4. Akshat: Un servicio de reporte consume el evento "Usuario hace clic en el enlace de restablecimiento de contraseña" y lo publica en el tablero de reportes.
5. Olga: Un usuario administrador puede ver el tablero durante un mes y cargar el reporte dentro de los 2 segundos.
6. Trevor: Un usuario administrar puede ver los eventos de varios usuarios en un mismo tablero y cargar el reporte dentro de los 2 segundos.

Como puedes ver, las dos presentaciones sobre la página de inicio de sesión de usuario se hicieron primero, después las dos presentaciones sobre los servicios de reportes, y por último las dos presentaciones sobre la velocidad de respuesta de la base de datos. Esto requiere un menor cambio de contexto para los miembros de la audiencia y también que es posible dar el contexto en la primera de las dos presentaciones agrupadas (esto es, las presentaciones 1, 3 y 5).

Después de la presentación 1 (realizada por Larry), Producto puede preguntarle por qué eligió cinco intentos como el número máximo de intentos antes de que se bloquee la cuenta. Larry puede tener o no una respuesta. Producto puede pedirle un seguimiento sobre este tema e investigar cuál es el estándar de la industria y aplicar la misma lógica que Larry o dejarlo así.

Después de las seis presentaciones, puede haber preguntas, comentarios o pedidos de cambio de cualquier persona de la audiencia. Usualmente, esto va a precipitar una conversación entre los presentes sobre cuál puede ser la mejor manera de realizar estos cambios.

Por ejemplo, de nuevo en el ejemplo de Larry, algunos podrían sugerir que ni se debería usar un nombre de usuario y contraseña, sino una dirección de correo electrónico y un enlace mágico. Esto es lo bueno de la revisión. Tenemos a un montón de gente inteligente en la habitación contribuyendo con su propia experiencia y sabiduría.

Consejos accionables

Here are some tips for what to show, how to show it, and what actually matters during the meeting itself.  Aquí tienes un par de consejos sobre qué mostrar, cómo mostrarlo, y lo que realmente importa durante la reunión en sí.

1. Mostrar entregables reales

Primero, siempre muestra software en funcionamiento o demos que funcionen en vez de diapositivas estáticas. Por ejemplo, si estuviste trabajando en una nueva función de inicio de sesión, haz una demostración en vivo. Esto hace que la revisión sea más auténtica y muestre avances tangibles.

2. Alienta el feedback

Segundo, invita a la audiencia a hacer preguntas. Recuérdale a las partes interesadas que sus ideas pueden ayudar a desarrollar nuevas funcionalidades. Anota sus sugerencias y confírmales si alguno de los cambios irán de inmediato a tu lista de pendientes.

3. Sé claro y mantente enfocado

Tercero, mantén un formato simple. Por ejemplo, empieza con un pantallazo general del objetivo del sprint, ve a las demostraciones y termina con un debate corto sobre los próximos pasos.

Evita entrar en profundidad sobre los detalles técnicos. Si el tema requiere más tiempo, organiza una reunión de seguimiento.

4. Coordina los próximos pasos.

Seguido de esto, actualiza tu lista de pendientes con base en lo aprendido en la reunión. Si una funcionalidad requiere un ajuste extra, agrega la tarea de manera inmediata.

Esto ayuda a mantener informado a todo el equipo sobre el plan para el siguiente sprint.

5. Mantenla corta y termina en horario

En la reunión deberías revisar el trabajo del equipo scrum de un solo sprint (dos o tres semanas)

Si la reunión se hace demasiado larga, esto puede significar que tu equipo scrum es demasiado grande (en ese caso, deberías pensar en dividir el equipo en grupos más pequeños) o que no estás siendo eficiente con tus demostraciones.

El tiempo y la atención de las personas son costosos y escasos. Mantén las reuniones a un ciclo ultradriano. Personalmente, trato de limitar todas las reuniones a un máximo de 90 minutos.

Por último, establece un límite firme para la reunión así los participantes se sienten confiados al dar su feedback sin alargar el debate.

Terminar a horario significa respetar el calendario de los demás y mantener al equipo descansado y preparado para el próximo sprint.

En conclusión

Una revisión de sprint les da a las partes interesadas una mirada real sobre el trabajo realizado, las mantiene alineadas sobre los próximos pasos, y permite obtener el feedback que necesitas para hacer crecer tu producto de forma efectiva.

Si te enfocas en mostrar avances reales, tener un dialogo abierto y mantienes las cosas de forma concisa, verás una mejoría en como tu equipo entrega valor.

En su tiempo libre, Ben escribe su blog de tecnología "Just Another Tech Lead" y administra un sitio donde crea calculadoras gratuitas llamado "CalculatorLord.com".

Por lo que en este artículo, vamos a ver cómo hacerlo en React.

Aprenderás a:

• Cómo usar una casilla de verificación como Input Controlado en React,
• Cómo usar los métodos de arreglo "map" y "reduce" para cálculos complejos,
• Cómo crear un arreglo de un largo específico y con valores pre cargados,

y mucho más.

Este artículo es parte de mi curso Mastering Redux. Aquí tienes un adelanto de la aplicación que vamos a crear en el curso.

Así que empecemos.

Cómo trabajar con una sola casilla de verificación

Antes de aprender a trabajar con varias casillas, empezaremos programando solo uno.

En este artículo, para crear componentes voy a estar usando la sintaxis de React Hooks. Si no estás familiarizado con esta sintaxis, puedes darle un vistazo a mi artículo [en inglés] Introduction to React Hooks.

Mira el siguiente código:

<div className="App">
  Select your pizza topping:
  <div className="topping">
    <input type="checkbox" id="topping" name="topping" value="Paneer" />Paneer
  </div>
</div>

Aquí tienes la demo.

En el código de arriba, declaramos una única casilla.

Como se muestra abajo, podemos seleccionar y de seleccionarlo de manera muy fácil:

Pero para mostrar en pantalla si está seleccionado o no, tenemos que convertirlo a un Input Controlado.

En React, los Inputs Controlados se manejan mediante el estado, por lo que solamente podemos cambiar el  valor del input cambiando su estado.

Mira el siguiente código:

export default function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleOnChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div className="App">
      Select your pizza topping:
      <div className="topping">
        <input
          type="checkbox"
          id="topping"
          name="topping"
          value="Paneer"
          checked={isChecked}
          onChange={handleOnChange}
        />
        Paneer
      </div>
      <div className="result">
        Above checkbox is {isChecked ? "checked" : "un-checked"}.
      </div>
    </div>
  );
}

y aquí tienes la demo

En el código de arriba, con el hook useState  declaramos el estado isChecked del componente, con el valor inicial false:

const [isChecked, setIsChecked] = useState(false);

Después, a la casilla de verificación le damos dos props adicionales, checked y onChange, de la siguiente manera:

<input
  ...
  checked={isChecked}
  onChange={handleOnChange}
/>

Cuando hagamos clic en la casilla de verificación, la función handleOnChange será la encargada de cambiar el valor del estado isChecked

const handleOnChange = () => {
  setIsChecked(!isChecked);
};

Entonces, si la casilla está seleccionado, el valor de isChecked es false. Pero si no lo está, el valor estrue al usar !isChecked.

De esta manea la casilla se convierte en un input controlado, cuyo valor es manejado mediante el estado del componente.

Hay que tener en cuenta que en React siempre se recomienda usar inputs controlados para los campos de inputs, aun si el código luce complicado. Esto garantiza que el cambio del input solo ocurra dentro de la función onChange.

El estado de un input no podrá ser cambiado de otra forma y así siempre tendrás el valor correcto y actual del estado del input.

Solo en raras ocasiones se puede usar React ref para poder manejar el input de manera no controlada.

Cómo manipular múltiples casillas de verificación

Veamos ahora como trabajar con varias casillas.

Mira esta demo

Aquí estamos mostrando una lista de aderezos y sus precios. Dependiendo cuantos aderezos sean seleccionados, necesitamos mostrar el monto total.

Antes, cuando teníamos un solo casilla de verificación, solo teníamos el estado isChecked para cambiar el estado de la casilla de verificación.

Pero ahora, como tenemos varias casillas de verificación, no es práctico hacer varios llamados useState para cada uno.

Entonces, declaremos un arreglo dentro del estado e indiquemos el estado de cada una de las casillas de verificación.

Para crear un arreglo cuyo largo sea igual número de casillas de verificación, Podemos usar el método de arreglo fill de este método:

const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
);

Aquí hemos declarado un estado con un valor inicial como un arreglo relleno con el valor false.

Entonces, si témenos cinco coberturas, el arreglo de estado checkedState tendrá cinco valores false:

[false, false, false, false, false]

Y una vez que marquemos / desmarquemos la casilla, cambiaremos el false correspondiente a true y viceversa.

Aquí está la demo final.

Y el código completo de App.js luce de esta manera:

import { useState } from "react";
import { toppings } from "./utils/toppings";
import "./styles.css";

const getFormattedPrice = (price) => `$${price.toFixed(2)}`;

export default function App() {
  const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
  );

  const [total, setTotal] = useState(0);

  const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
      index === position ? !item : item
    );

    setCheckedState(updatedCheckedState);

    const totalPrice = updatedCheckedState.reduce(
      (sum, currentState, index) => {
        if (currentState === true) {
          return sum + toppings[index].price;
        }
        return sum;
      },
      0
    );

    setTotal(totalPrice);
  };

  return (
    <div className="App">
      <h3>Select Toppings</h3>
      <ul className="toppings-list">
        {toppings.map(({ name, price }, index) => {
          return (
            <li key={index}>
              <div className="toppings-list-item">
                <div className="left-section">
                  <input
                    type="checkbox"
                    id={`custom-checkbox-${index}`}
                    name={name}
                    value={name}
                    checked={checkedState[index]}
                    onChange={() => handleOnChange(index)}
                  />
                  <label htmlFor={`custom-checkbox-${index}`}>{name}</label>
                </div>
                <div className="right-section">{getFormattedPrice(price)}</div>
              </div>
            </li>
          );
        })}
        <li>
          <div className="toppings-list-item">
            <div className="left-section">Total:</div>
            <div className="right-section">{getFormattedPrice(total)}</div>
          </div>
        </li>
      </ul>
    </div>
  );
}

Veamos que estamos haciendo aquí.

Como se muestra aquí abajo, hemos declarado la casilla de verificación de entrada como se muestra a continuación:

<input
  type="checkbox"
  id={`custom-checkbox-${index}`}
  name={name}
  value={name}
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Aquí, agregamos el atributo checked con el valor del estado checkedState, true o false, según corresponda.

También añadimos un manejador onChange y le pasamos el index de la casilla que está marcada/desmarcada al método  handleOnChange.

El método manejador handleOnChange debe verse así:

const handleOnChange = (position) => {
  const updatedCheckedState = checkedState.map((item, index) =>
    index === position ? !item : item
  );

  setCheckedState(updatedCheckedState);

  const totalPrice = updatedCheckedState.reduce(
    (sum, currentState, index) => {
      if (currentState === true) {
        return sum + toppings[index].price;
      }
      return sum;
    },
    0
  );

  setTotal(totalPrice);
};

Aquí, primero recorremos el array checkedState utilizando el método arreglo map. Si el valor del parámetro position pasado coincide con el index actual, entonces invertimos su valor. Entonces, si el valor es true se convertirá en false usando !item y si el valor es false, entonces se convertirá en true

Si el index no coincide con el parámetro position proporcionado, entonces no estamos invirtiendo su valor, sino que simplemente devolvemos el valor tal cual.

const updatedCheckedState = checkedState.map((item, index) =>
  index === position ? !item : item
);

// the above code is the same as the below code

const updatedCheckedState = checkedState.map((item, index) => {
  if (index === position) {
    return !item;
  } else {
    return item;
  }
});

He utilizado el operador ternario ?: porque hace el código más corto, pero puedes utilizar cualquier método de arreglo.

Si no estás familiarizado como  funcionan los métodos map oreduce, puedes echarle un vistazo a este artículo que escribí.

Luego, establecemos el arreglo checkedState en el  arreglo updatedCheckedState. Esto es importante porque si no actualizamos el estado checkedState dentro del manejador  handleOnChange, entonces no podrás marcar/desmarcar la casilla de verificación.

Esto es porque estamos usando el valor de checkedState de la casilla para determinar si este está o no marcada (ya que es una entrada controlada como se muestra abajo):

<input
  type="checkbox"
  ...
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Ten en cuenta que creamos una variable updatedCheckedState separada, y a su vez, esta se la pasamos a la función updatedCheckedState y no al arreglo original checkedState.

Esto es porque, por default, la función setCheckedState  usada para actualizar el estado es asincrónica.

Llamar a la función setCheckedState no garantiza que obtendrás el valor actualizado del arreglo checkedState en la siguiente línea.

Por lo que creamos una variable separada y usamos esa en el método reduce.

Entonces, para calcular el precio total, usamos el método de arreglo  reduce:

const totalPrice = updatedCheckedState.reduce(
  (sum, currentState, index) => {
    if (currentState === true) {
      return sum + toppings[index].price;
    }
    return sum;
  },
  0
);

El método de arreglo  reduce recibe cuatro parámetros, de los cuales usaremos solamente tres: sum, currentState e index. Puedes usar nombres distintos, ya que son solo parámetros.

También estamos pasando el valor 0 como valor inicial, que también se lo conoce como el valor accumulator del parámetro sum.

Luego, dentro de la función reduce, chequeamos si el valor actual del array checkedState es true o no.

Si lo es true, esto significa que la casilla está marcada, por lo que añadiremos el valor correspondiente de price correspondiente utilizando sum + toppings[index].price

Si el valor del arreglo checkedState es false, entonces no estamos añadiendo su precio, sino que solo estamos devolviendo el valor anterior calculado de sum.

Luego, vamos a establecer que el valor totalPrice al estado total utilizando setTotal(totalPrice)

De esta forma, podemos calcular correctamente el precio total de los aderezos seleccionados como pueden ver debajo:

Aquí tiene el link de la demo de arriba, así pueden probarla ustedes mismos.

¡Gracias por leer!

A muchos desarrolladores se les dificulta entender como funciona Redux, pero todo desarrollador especializado en React debe saber como trabajar con Redux, ya que muchos proyectos dentro de la industria usa Redux para gestionar proyectos de gran escala.

Para hacerlo fácil para ti, he creado el curso Mastering Redux.

En este curso, aprenderás Redux desde cero y también crearás un aplicación de pedido de comida, desde el inicio y con Redux.

Dale clic a la imagen de abajo para unirte al curso y obtener un descuento especial por tiempo limitado, además de también obtener mi libro más popular "Mastering Modern JavaScript", gratis.

Si quieres mantenerte actualizado con contenidos sobre JavaScript, React y Node.js, sigueme en LinkedIn.

¿Sabías que organizaciones como freeCodeCamp, Google y Harvard ofrecen cursos en línea para que puedas aprender desarrollo de software? ¿Y que muchos de estos cursos ofrecen certificaciones gratuitas e insignias?

Para ayudarte a elegir cuál es el mejor para ti, he creado una lista completa.

Como ávidos estudiantes de cursos en línea, mis compañeros de Class Central y yo hemos realizado, a través de los años, centenares de cursos en línea, muchos de ellos con certificados gratuitos.

En 2023, los certificados gratuitos ya no son tan frecuentes. Pero si sabes dónde buscar, todavía existe en línea una gran cantidad de certificaciones gratuitas para aprender desarrollo de software.

Algunas de las certificaciones gratuitas logradas por el equipo de Class Central

Como seguramente sabes, freeCodeCamp ofrece certificaciones gratuitas, pero también lo hacen gigantes tecnológicos e instituciones como Google, Microsoft y Harvard.

En este artículo, reunimos todas las certificaciones gratuitas e insignias existentes en Internet. En total, las plataformas detalladas abajo ofrecen más de mil de cursos gratuitos con certificado para aprender desarrollo de software.

Creé Class Central en el 2011, cuando universidades como Stanford empezaron a dictar sus cursos en línea de forma gratuita. Desde entonces, la base de datos de Class Central ha crecido hasta contener más de 100K cursos en línea.

Al haber escrito sobre educación en línea por más de una década, recuerdo cuando plataformas como Coursera y edX ofrecían certificaciones gratuitas. Luego, las certificaciones gratuitas casi que desaparecieron de forma abrupta.

Esto nos inspiró a escribir un artículo recopilando todas las certificaciones gratuitas e insignias existentes. Para nuestra sorpresa, descubrimos que todavía existían miles de certificaciones gratuitas en línea disponibles. Hasta la fecha, ese artículo tiene alrededor de 2M de visitas.

Con este objetivo, este artículo busca destacar a aquellas empresas que todavía sigue apoyando la educación libre ofreciendo cursos sobre desarrollo de software,  con certificados gratuitos. Estas son:

• Plataformas de aprendizaje — como por ejemplo freeCodeCamp, LinkedIn Learning y FutureLearn.
• Universidades líderes — como por ejemplo, Harvard, la Universidad de Helsinki y el HPI [Instituto Hasso Plattner].
• Gigantes tecnológicos — como por ejemplo Google, Microsoft e IBM.

Sin más, aquí tienes las plataformas en donde puedes encontrar más de mil certificaciones gratuitas para desarrolladores

Certificaciones gratuitas de freeCodeCamp

Empecemos por el punto de partida más obvio: freeCodeCamp, el sitio web en el que estás ahora, donde puedes aprender a programar de forma gratuita.

La plataforma ofrece miles de horas de contenido didáctico, dividido en certificaciones en temas como desarrollo web o ciencia de datos.

Estas son las certificaciones actualmente ofrecidas:

• Responsive Web Design ★★★★★(77)
• JavaScript Algorithms and Data Structures ★★★★★(31)
• Front End Development Libraries ★★★★★(4)
• Data Analysis with Python ★★★★★(4)
• Quality Assurance ★★★★★(4)
• Machine Learning with Python ★★★★★(4)
• Scientific Computing with Python ★★★★★(1)
• Data Visualization ★★★★★(1)
• Back End Development and APIs ★★★★★(1)
• Relational Database (Beta) ★★★★★(1)
• Information Security ★★★★☆(6)

Certificaciones gratuitas de Google

Google ha lanzado varias iniciativas para enseñarle a las personas habilidades como programación, marketing digital y análisis de datos. En nuestro artículo puedes encontrar la lista completa. Algunos de los más de 600 cursos que ofrece Google son:

• Google Analytics for Beginners ★★★★★(38)
• Get started with Google Maps Platform - web ★★★★★(4)
• Google Ads Search Certification ★★★★★(2)
• Google Analytics for Power Users ★★★★★(1)
• Google Cloud Essentials ★★★★★(1)
• Application Development - Python ★★★★★(1)
• YouTube Music Certification ★★★★★(1)
• Shopping ads Certification ★★★★★(1)
• Creating with Google Maps ★★★★☆(1)
• Intro to ML: Language Processing ★★★★☆(1)

Cursos gratuitos y certificados de Harvard

Harvard ofrece cursos académicos en línea que exploran las distintas facetas de las Ciencias de la Computación, como los fundamentos de la programación o la inteligencia artificial. Puedes encontrar todos los detalles en nuestro artículo.

Aquí tienes una lista de las certificaciones gratuitas ofrecidas por Harvard actualmente:

• Introduction to Computer Science ★★★★★(140)
• Computer Science for Business Professionals ★★★★★(14)
• Introduction to Artificial Intelligence with Python ★★★★★(11)
• Web Programming with Python and JavaScript ★★★★★(22)
• Computer Science for Lawyers ★★★★★(5)
• Understanding Technology ★★★★★(10)
• Introduction to Programming with Python ★★★★★(2)
• Introduction to Programming with Scratch ★★★★★(2)
• Introduction to Game Development ★★★★☆(3)

Medallas gratuitas de Microsoft

Microsoft ofrece miles de módulos y cientos de caminos de aprendizaje para explorar los productos de la empresa, como Office 365, Visual Studio y Azure. Una vez que terminas un curso, obtienes una medalla en tu perfil de alumno.

Estos son algunos de los cursos ofrecidos por Microsoft:

• Create and use analytics reports with Power BI ★★★★★(2)
• AZ-104: Configure and manage virtual networks for Azure administrators ★★★★★(2)
• Implement a Windows Server hybrid cloud infrastructure ★★★★★(1)
• Microsoft Dynamics 365 Fundamentals (CRM): Explore Dynamics 365 Marketing ★★★★★(1)
• Microsoft Azure AI Fundamentals: Explore visual tools for machine learning ★★★★☆(1)
• Getting Started with Microsoft PowerShell
• Classify space rocks by using Python and artificial intelligence
• Microsoft Azure Fundamentals: Describe cloud concepts
• Microsoft Azure AI Fundamentals: Get started with AI

Cursos de LinkedIn Learning con certificación gratuita

LinkedIn Learning, la plataforma de aprendizaje en línea dentro de la red social de profesionales LinkedIn, ofrece miles de cursos en línea y caminos de aprendizaje que incluyen certificación gratuita. También puedes ver la lista completa de estos cursos en nuestro artículo.

Aquí tienes un selección de cursos con certificación gratuita de LinkedIn Learning:

• Communication Foundations
• Prepare for the CompTIA A+ Certification (220-1001 and 220-1002)
• Entrepreneurship Foundations
• Prepare for the CompTIA Network+ (N10-007) Certification
• Agile Requirements Foundations
• Finding a Job during Challenging Economic Times
• Administrative Professional Tips
• Professional Soft Skills Learning Pathway
• Video Interview Tips
• Recovering from a Layoff

Certificaciones gratuitas de la Universidad de Helsinki.

La Universidad de Helsinki ofrece cursos académicos en línea a través de su plataforma de cursos independiente, MOOC.fi. En esta plataforma están incluidos lo siguiente cursos que otorgan un certificado gratuito al completarlos:

• Elements of AI ★★★★★(715)
• Full Stack open 2022 ★★★★★(5)
• Java Programming ★★★★★(2)
• Cyber Security Base 2022 ★★★★★(2)
• Building AI ★★★★☆(13)
• DevOps with Kubernetes
• Ethics of AI
• DevOps with Docker
• Python Programming MOOC 2022
• Functional programming with Clojure

Medallas gratuitas de Salesforce

Salesforce, el proveedor de software basado en la nube, ofrece miles de cursos en línea a través de su plataforma, Trailhead. Si bien puedes aprender habilidades relacionadas con sus productos, también puedes encontrar cursos en otros temas como blockchain o desarrollo para IOS,

Hay más de 1300 módulos y más de 100 ejercicios prácticos gratuitos disponibles en la plataforma. Una vez que terminas un modulo, obtienes un medalla gratuita para tu perfil.

• Developer Beginner
• Developer Intermediate
• Developer Advanced
• Build Lightning Web Components
• AWS Cloud for Technical Professionals
• Develop with Mobile SDK
• Manage the Salesforce Way
• Get Started with iOS App Development
• Discover Trailhead Sample Apps
• Build Your Career in the Salesforce Ecosystem

MongoDB Free Certificates Certificados gratuitos de MongoDB

MongoDB, la popular base de datos NoSQL, ofrece cursos con certificaciones gratuitas a través de su plataforma de aprendizaje, Universidad MongoDB. Con estos cursos, aprenderás los fundamentos de bases de datos y cómo interactuar con ellas usando distintos lenguajes de programación.

Aquí tienes algunos de los cursos certificado[en inglés] que ofrece MongoDB:

• MongoDB for Java Developers ★★★★★(18)
• MongoDB for Javascript Developers ★★★★★(1)
• MongoDB Basics ★★★★★(2)
• MongoDB for .NET Developers ★★★★☆(3)
• Basic Cluster Administration
• MongoDB for Python Developers
• MongoDB Performance
• Diagnostics and Debugging
• MongoDB for SQL Pros
• Data Modeling

Certificados gratuitos de Redis

Redis es una solución flexible de almacenamiento de datos, similar a una base de datos más liviana, que se usa bastante en desarrollo web. Redis también tiene una plataforma de aprendizaje en línea, Universidad Redis, que ofrece cursos certificados gratuitos para aprender a usar la herramienta.

• Redis for JavaScript Developers ★★★★★(1)
• Introduction to Redis Data Structures ★★★★★(1)
• Querying, Indexing, and Full-Text Search ★★★★☆(1)
• RediSearch
• Redis for Java Developers
• Redis for Python Developers
• Redis Streams
• Redis Security
• Running Redis at Scale

Certificaciones gratuitas de Cisco

Cisco, el gigante tecnológico, ofrece una serie de cursos [en inglés] autogestionados y en línea a través de su plataforma Academia Networking, que incluyen un certificado gratuito al completarlos.

• Introduction to Cybersecurity ★★★★★(2)
• CPA: Programming Essentials in C++ ★★★★★(1)
• Cisco Packet Tracer ★★★★★(1)
• Cybersecurity Essentials ★★★★☆(3)
• Networking Essentials
• Introduction to IoT
• NDG Linux Essentials
• PCAP: Programming Essentials in Python
• Entrepreneurship
• JavaScript Essentials 1 (JSE)

Certificados gratuitos de IBM

La plataforma de IBM, CognitiveClass.ai ofrece 90 cursos y 10 caminos de aprendizaje en ciencia de datos, inteligencia artificial, cloud computing y blockchain.

La plataforma también ofrece un entorno virtual de laboratorio para que los usuarios puedan practicar lo que aprendieron en los cursos. Para obtener una insignia o el certificado de finalización, es necesario obtener al menos un 70% en cualquiera de los cursos.

Aquí tienes una selección de sus cursos certificados gratuitos:

• Deep Learning with TensorFlow
• Build Swift Mobile Apps with Watson AI Services
• Accelerating Deep Learning with GPUs
• Data Visualization with R
• Introduction to Open Source
• Using R with Databases
• Machine Learning - Dimensionality Reduction
• Predictive Modeling Fundamentals
• Text Analytics 101
• Mathematical Optimization for Business Problems

Certificados gratuitos de Kaggle

Kaggle es una comunidad para científicos de datos y para quienes aspiren a convertirse en uno.

Esta comunidad ofrece más de 50K en datasets públicos para que puedas crear tus propios proyectos de ciencia de datos a través de cuadernos Jupyter y participar en competencias.

Además, la plataforma también ofrece cursos [en inglés] para aprender los fundamentos de la ciencia de datos. Cada uno ofrece un certificado de finalización.

• Python ★★★★★(3)
• Intro to SQL ★★★★☆(1)
• Computer Vision ★★★★☆(1)
• Intro to Machine Learning
• Pandas
• Data Visualization
• Intro to Deep Learning
• Data Cleaning
• Intro to AI Ethics
• Machine Learning Explainability

Certificados gratuitos de HackerRank

HackerRank, una plataforma para aprender algoritmos, estructuras de datos y prepararse para entrevistas técnicas, ofrece exámenes de certificación de habilidades en temas como resolución de problemas, Python y JavaScript.

Aquí tienes algunos de lo exámenes que puedes hacer para obtener un certificado:

• Problem Solving (Basic)
• Python (Basic) Skills Certification
• Java (Basic) Skills Certification
• C# (Basic) Skills Certification
• JavaScript (Basic) Skills Certification
• SQL (Basic) Skills Certification
• Go (Basic) Skills Certification
• R (Basic) Skills Certification
• Node (Basic) Skills Certification

Certificados gratuitos de DataCamp

DataCamp es una popular plataforma en línea para - seguro lo adivinaste - aprender no solo sobre ciencia de datos, sino también sobre programación en general. La plataforma ofrece una serie de cursos que al completarlos otorgan una declaración del logro obtenido. Aquí tienes una selección:

• Beginning Bayes in R
• Basic Statistics
• Kaggle Python Tutorial on Machine Learning
• SQL Tutorial for Marketers
• Introduction to Python & Machine Learning
• Inferential Statistics
• Plotly Tutorial: Plotly and R
• Tidy Data in Python Mini-Course
• Introducción a Python (en español)
• Introducción a R(en español)

Certificados gratuitos de Great Learning

Great Learning ofrece más de cien cursos certificados gratuitos en una gran variedad de temas como IA, ciencia de datos, programación, cloud computing y marketing digital. Aquí tienes una selección:

• Microsoft Azure Essentials
• Data Analytics using Excel
• Introduction to Machine Learning
• Introduction to Cyber Security
• Cloud Computing Foundations
• Introduction to Deep Learning
• Introduction to NoSQL
• Introduction to Design Thinking
• Python Foundations
• Python Fundamentals for Beginners

Certificados gratuitos de upGrad

upGrad es una plataforma de aprendizaje en línea que ofrece más de 60 programas gratuitos sobre temas como ciencia de dato, métricas de negocio y tecnología.

Una vez que completes todos los módulos del programa, obtienes un certificado de finalización.

Estos son algunos de los programas gratuitos ofrecidos por upGrad:

• Programming with Python: Introduction for Beginners
• Introduction to Natural Language Processing
• Introduction to Data Analysis using Excel
• Introduction to Database Design with MySQL
• Data Science in E-commerce
• Introduction to Cryptocurrency
• React.js For Beginners
• Node.js For Beginners
• Core Java Basics
• Introduction to Blockchain Technology

Certificados gratuitos de FutureLearn

FutureLearn, la versión europea de Coursera y edX, ofrece centenares de cursos de "actualización digital" y que, entre otras cosas, implica un certificado gratuito de finalización. De nuevo, puedes encontrar más detalles en nuestro artículo.

Aquí tienes una lista de algunos de los cursos gratuitos de FutureLearn:

• Digital Skills: Digital Skills for Work and Life ★★★★★(2)
• Digital Skills: Digital Marketing ★★★★☆(7)
• Digital Skills: Web Analytics ★★★★★(1)
• Digital Skills: Social Media ★★★★☆(6)
• Digital Skills: Artificial Intelligence ★★★★☆(2)
• Digital Skills: User Experience ★★★★☆(1)
• Introduction to Virtual, Augmented and Mixed Reality
• Digital Skills: Reimagine Your Career
• Transforming Assessment and Recognition of Complex Learning Competencies
• Digital Skills: Mobile

Certificados gratuitos de Jovian

Jovian es un bootcamp en línea sobre ciencia de datos que ofrece algunos cursos gratuitos con certificado. Aquí tienes una lista:

• Deep Learning with PyTorch: Zero to GANs
• Data Analysis with Python: Zero to Pandas
• Machine Learning with Python: Zero to GBMs
• Data Structures and Algorithms in Python
• Natural Language Processing: Zero to NLP

Certificados gratuitos de GitLab

GitLab, el sitio web de control de versión más popular para alojar tus repositorios, también ofrece cursos en línea gratuitos para desarrollar tus habilidades profesionales.

Aquí tienes las certificaciones gratuitas que ofrece la plataforma:

• GitLab 101 Tool Certification
• GitLab 201 Tool Certification
• GitLab All-Remote Certification
• GitLab Manager Challenge

Cómo filtrar un arreglo con un bucle for

Antes del lanzamiento de ES6 en 2015, muchos desarrolladores dependían del método del bucle for para hacer todas las manipulaciones de arreglos. Pero como el código se volvía demasiado largo y difícil de entender, esto condujo a la creación de muchos métodos individuales de JavaScript como el método filter() (sobre el cual aprenderás más adelante).

Pero para empezar, y entender todo el panorama, vamos a aprender cómo hacerlo usando bucles.

Supongamos que tenemos un arreglos de objetos que contiene todos los datos de los usuarios como nombre, edad, ocupación, etc. y quieres filtrar aquellos usuarios cuya edad cumplan una determinada condición.

let users = [
    { name: 'John', age: 25, occupation: 'gardener' },
    { name: 'Lenny', age: 51, occupation: 'programmer' },
    { name: 'Andrew', age: 43, occupation: 'teacher' },
    { name: 'Peter', age: 81, occupation: 'teacher' },
    { name: 'Anna', age: 47, occupation: 'programmer' },
    { name: 'Albert', age: 76, occupation: 'programmer' },
]

También puedes querer filtrar el arreglo de objetos usando la edad para devolver un nuevo arreglo con aquellos usuarios cuya edad es mayor a 40 y cuya ocupación es igual a programmer:

let filteredUsers = [];
for (let i= 0; i<users.length; i++) {
    if (users[i].age > 40 && users[i].occupation === 'programmer' ) {
        filteredUsers = [...filteredUsers, users[i]];
    }
}
console.log(filteredUsers);

Este código va a devolver un arreglo de tres usuarios que cumplen con esa condición:

Si bien esto funciona bastante bien, una mejor manera de filtrar un arreglo es usando el método filter() de ES6.

Cómo filtrar un arreglo con el método filter filter()

El método filter() es un método ES6 con un sintaxis más prolija para filtrar un arreglo. Este método devuelve un nuevo arreglo con nuevos elementos, sin modificar el arreglo original.

// Sintaxis
myArray.filter(callbackFn)

En la función callback, hay que acceder a cada elemento, el índice y hasta el arreglo original:

myArray.filter((element, index, array) => { /* ... */ })

Ahora hagamos el mismo ejemplo, pero filtrando al usuario por su edad y ocupación:

let filteredUsers = users.filter((user) => {
    return user.age > 40 && user.occupation === 'programmer';
});

console.log(filteredUsers);

Esto devolverá el mismo resultado, pero seguro notarás que tu código queda más prolijo. También es importante que sepas que puedes reescribir este código en una sola línea, sin el return:

let filteredUsers = users.filter(user => user.age > 40 && user.occupation === 'programmer');
console.log(filteredUsers);

Ambos ejemplos de código van a retornar los usuarios filtrados:

El método filter() hace que sea más fácil ejecutar más operaciones directas, sin crear demasiadas variables porque se encadena a otros métodos.

Por ejemplo, puedes filtrar el nuevo arreglo y devolver otro arreglo que contenga solo los nombres:

let filteredUserNames = users.filter(user => user.age > 40 && user.occupation === 'programmer')
    .sort((a, b) => a.age - b.age)
    .map(user => user.name);

console.log(filteredUserNames); // ['Anna', 'Lenny', 'Albert']

Para aprender más sobre cómo filtrar arreglos en JavaScript con el método filter(), puedes leer este artículo Tutorial de Array.filter() de JavaScript y aprender aquí sobre la diferencia entre los métodos find() y filter() de JavaScript.

Cómo filtrar un objeto en JavaScript

Los objetos de JavaScript no son iterables como los arreglos o las cadenas de texto. Esto significa que no pueden ser recorridos con un bucle for, el método filter() o cualquier otro método parecido a estos. Entonces ¿cómo se puede filtrar un objeto en JavaScript?

Esto se puede hacer convirtiendo el objeto en un arreglo mediante cualquier método de objeto como Object.keys(), Object.values() o Object.entries(). Luego, puedes usar el método filter() para filtrar a través del arreglo y devolver uno nuevo con los elementos filtrados.

Por ejemplo, si tenemos un objeto con datos de los usuarios como nombre, edad y ocupación. Estos métodos estáticos de objeto van a devolver las claves, valores o cada par clave-valor como un arreglo:

const userDetails = {
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels",
    email: "jane.daniels@example.com",
    comapny: "Example Inc.",
    address: "1234 Example Street",
    age : 25,
    hobby: "Singing"
};

let keysArray = Object.keys(userDetails);

console.log(keysArray);

Esto va a devolver un arreglo de las claves del objeto:

['firstName', 'lastName', 'userName', 'email', 'comapny', 'address', 'age', 'hobby']

Entonces, ahora, puedes usar el método filter() para recorrer el arreglo y devolver uno nuevo con los elementos filtrados:

let filteredKeys = keysArray.filter(key => key.length > 5);

console.log(filteredKeys);

Esto va a devolver un arreglo con las claves que tengan un largo mayor a 5:

['firstName', 'lastName', 'userName', 'comapny', 'address', 'hobby']

Pero como seguro querrás utilizar un mejor método de filtrado, puedes, por ejemplo, filtrar el par clave-valor de nuestro objeto que incluya un nombre de un objeto mayor. Luego puedes obtener primeros las claves, filtrarlas y luego usar el método reduce() para reducir las claves filtradas a un objeto compuesto por estas claves y sus valores:

const userDetails = {
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels",
    email: "jane.daniels@example.com",
    comapny: "Example Inc.",
    address: "1234 Example Street",
    age : 25,
    hobby: "Singing"
};

const userNames = Object.keys(userDetails)
    .filter((key) => key.includes("Name"))
    .reduce((object, key) => {
        return Object.assign(object, {
          [key]: userDetails[key]
        });
  }, {});

console.log(userNames);

Esto devolverá un objeto con las claves filtradas y sus valores:

{
    firstName: "Jane",
    lastName: "Daniels",
    userName: "jane.daniels"
}

Conclusión

En este artículo has aprendido a como filtrar un arreglo en JavaScript usando el bucle for y el método filter(), que tiene una mejor sintaxis para poder filtrar arreglos en JavaScript.

También has aprendido a filtrar un objeto en JavaScript, convirtiéndolo en un arreglo y luego usando el método filter().

¡Gracias por leer y diviértete programando!

Puedes acceder a más de 188 de mis artículos visitando mi sitio web. También puedes usar la barra de búsqueda para buscar si he escrito un artículo específico.

Los carruseles sirven tanto para destacar tu Interfaz de Usuario como para ahorrar espacio y así ofrecer una buena experiencia de usuario.

Los carruseles se han convertido en un elemento fundamental en el diseño UI, frecuentemente usados para mostrar imágenes, testimonios de clientes, entre otros. Son indispensables al momento de crear una interfaz llamativa y dinámica.

En este artículo, nos sumergiremos en el proceso de crear un carrusel de imágenes con React y Framer Motion, guiándote por cada paso para crear un componente visual llamativo e interactivo para tu aplicación.

¿Qué es Framer Motion?

Es una librería de animación de código abierto para aplicaciones React, que se utiliza para crear animaciones responsive y dinámicas para nuestra aplicación web.

Framer motion tiene muchas funcionalidades útiles, como por ejemplo:

1. Animation: Esto permite hacer transiciones fluidas para tus componentes.
2. Gestures: La librería ofrece soporte para movimientos táctiles y con el ratón. Esto permite dar cuenta de ciertos eventos.
3. Variants: Framer motion permite declarar componentes de forma declarativa y así mantener tu código ordenado y reutilizable.

Todas estas funcionalidades son muy útiles y pronto veremos cómo utilizarlas.

Para poder entender mejor cómo utilizar Framer Motion, se puede explorar su documentación y recursos [en inglés] aunque en este artículo nos vamos a concentrar en sus elementos fundamentales. Mientras los guío a través de los conceptos básicos de Framer Motion, mi objetivo principal es crear un carrusel atractivo e interactivo.

Cómo preparar tu entorno de desarrollo

Lo primero que vamos a hacer es preparar nuestro entorno de desarrollo. Esto incluye instalar los paquetes necesarios para poder crear tu aplicación, como Node.js y npm. Si ya los tienes instalados, no es necesario que lo hagas de nuevo.

Crear una aplicación React

A esta altura, voy a asumir que ya tienes instalados Node y npm. Para crear una aplicación React, solo debes ir a tu terminal e ir a la ubicación donde quieras alojar tu aplicación.

Luego, ejecuta este comando:

npx create-react-app react-image-carousel

Puedes elegir cualquier nombre para tu aplicación, pero a los fines de este artículo yo le pondré react-image-carousel.

Una vez que hayas creado exitosamente tu aplicación, abre la carpeta en tu editor de código. Deberías tener algunos archivos y estilos por defecto, además de verse así:

Como no vamos a necesitar los siguientes archivos, puedes borrarlos: app.test.js, y logo.svg, and reportWebVitals.js, setupTest.js. También puedes borrar los estilos que vienen por defecto en App.css.

Ahora que tu aplicación React ya está creada y preparada, el último paso para terminar de preparar tu entorno de desarrollo es instalar Framer Motion.

Para hacer esto, simplemente ve a tu terminal y asegúrate que estés en la carpeta de tu proyecto, y luego ejecuta este comando:

 npm install framer-motion

Esto debería instalar la última versión de Framer Motion. Con esto ya estarás listo. Solo ejecuta el comando npm run start e inicia el entorno de desarrollo en tu navegador.

Cómo diseñar el componente Image Carousel

Para empezar con el diseño, vamos a crear primero el componente Carousel.js. Dentro del componente Carousel, vamos a importar el hook useState de React, y luego las propiedades motion y AnimatePresence desde Framer Motion

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

Luego creamos nuestra función Carousel que lleva la prop images, un arreglo con los enlaces de las imágenes:

const Carousel = ({ images }) => {};

En nuestra función Carousel, vamos a inicializar un variable de estado con useState. Para hacer un seguimiento del índice de imagen actual, usamos setCurrentIndex, que es la función para actualizar el índice.

Luego, creamos tres funciones helper que serán las encargadas de manejar las interacciones de usuario. Estas incluyen:

• handleNext: Esto actualiza el currentIndex al siguiente índice y así poder cambiar la foto. Cuando llega al fin del arreglo, comienza de nuevo.
• handlePrevious: Hace lo mismo que handleNext, pero en orden inverso, lo que nos permite volver a una imagen.
• handleDotClick: Esta función lleva un índice como parámetro y actualiza currentIndex. Con esto podemos movernos entre las distintas imágenes solo haciendo clic en los puntos.

const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNext = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };
  const handlePrevious = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };
  const handleDotClick = (index) => {
    setCurrentIndex(index);
  };

Estas son las funciones helper que vamos a necesitar para nuestro componente.

Cómo crear nuestra plantilla

Nuestra plantilla es bastante simple y consiste de nuestra imagen, el deslizador [slide_directon] y los puntos [indicator]

  return (
    <div className="carousel">
        <img
          key={currentIndex}
          src={images[currentIndex]}
        /><div className="slide_direction">
        <div className="left" onClick={handlePrevious}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="20"
            viewBox="0 96 960 960"
            width="20"
          >
            <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
          </svg>
        </div>
        <div className="right" onClick={handleNext}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="20"
            viewBox="0 96 960 960"
            width="20"
          >
            <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
          </svg>
        </div>
      </div>
      <div className="indicator">
        {images.map((_, index) => (
          <div
            key={index}
            className={`dot ${currentIndex === index ? "active" : ""}`}
            onClick={() => handleDotClick(index)}
          ></div>
        ))}
      </div>
    </div>
  );

Como pueden ver en esta plantilla, se muestra la imagen del índice actual. Luego, tenemos un div con la clase slider_direction que contiene otros dos divs con las clases left y right. Ambos serán los botones de navegación del carrusel y usan SVGs para mostrar los iconos de flechas. Sus funciones onClick están parametrizados con las funciones handlePrevious y handleNext, respectivamente.

También tenemos un div indicator que creamos para mostrar una serie de círculos que representan cada imagen del carrusel. La función recorre el arreglo de imágenes y crea un círculo para cada imagen. De esta forma, se parametriza la clase active para cada círculo al que le corresponda currentIndex.

Después agregamos un onClick para cada círculo que está parametrizado para hacer correr handleDotClick con el índice del círculo.

Por ahora, con esto ya armamos nuestra plantilla. Lo único que falta es exportar el componente Carousel, importarlo en el componente App.js y luego agregar algo de CSS. Luego de esto estaremos listos para empezar a animar.

Por eso, vamos a exportar nuestra función Carousel para nuestro componente Carousel.js.

export default Carousel;

Como usar el component Carousel

Ya hemos creado nuestro componente Carousel, pero para poder usarlo tenemos que importarlo dentro de nuestro componente Apps.js:

import Carousel from "./Carousel";

Después de hacer esto, ya podemos crear nuestro arreglo de imágenes en el que van a estar todos los enlaces a las imágenes:

const images = [
  "https://images.pexels.com/photos/169647/pexels-photo-169647.jpeg?auto=compress&cs=tinysrgb&w=600",
  "https://images.pexels.com/photos/313782/pexels-photo-313782.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/773471/pexels-photo-773471.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/672532/pexels-photo-672532.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/632522/pexels-photo-632522.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/777059/pexels-photo-777059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
];

Todas estas son imágenes que obtuve de pexels y las que vamos a usar en este  proyecto.

Luego, agregamos nuestra función App que es donde va a estar la plantilla de nuestra aplicación:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Carrusel de imagenes usando React y Framer Motion</h1>
      </header>
      <main>
        <Carousel images={images} />
      </main>
    </div>
  );
}
export default App;

Como puedes ver, en nuestro encabezado tenemos una descripción de lo que hace nuestra aplicación.

Luego, en la sección main está nuestro componente, Carousel que lleva una prop del arreglo de imágenes. Si recuerdas, esta es la prop que usamos en ese componente para mostrar la imágenes.

Por último, exportamos nuestro componente App así lo podemos usar en nuestro archivo index.js.

Para verla sin estilos, ejecuta el comando npm run start y la aplicación debería verse así:

Horrible ¿verdad? Estoy de acuerdo contigo, pero con algunas pocas líneas de CSS vamos a transformarlo. Así que vamos.

Cómo agregar CSS

Como no quiero crear una hoja de estilo separada para el componente Carousel, voy a hacer todo el CSS en el archivo App.css. No te olvides de luego importar tu hoja de estilo.

import "./App.css"

Este es nuestro CSS:

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
.App-header {
  font-size: 1rem;
  text-align: center;
  font-family: "Oswald", sans-serif;
  padding-bottom: 2rem;
}
.carousel-images {
  position: relative;
  border-radius: 10px;
  height: 400px;
  max-width: 650px;
  margin: auto;
  overflow: hidden;
}
.carousel-images img {
  width: 99%;
  height: 99%;
  border-radius: 8px;
  border: #ff00008e solid 2px;
}
.slide_direction {
  display: flex;
  justify-content: space-between;
}
.left,
.right {
  background-color: #fb666675;
  color: #fff;
  padding: 10px 8px 8px 13px;
  margin: 0 20px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 10px;
  height: 25px;
  width: 25px;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.carousel-indicator {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.dot {
  background-color: #333;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.active {
  background-color: #fa2020;
}

Y este el resultado con nuestro CSS aplicado:

Seguramente coincidirás conmigo que así luce mucho mejor, además de ya ser completamente funcional.

Pasemos ahora a agregar animación con Framer Motion así le agregamos un lindo efecto de deslizador.

Cómo agregar animación al componente Carousel

Antes de empezar a animar con Framer Motion, hay algunos conceptos con los que deberás estar familiarizado porque los vamos a usar bastante dentro de esta sección. Estos conceptos incluyen:

• Variants son un grupo de propiedades cuyo propósito es definir cómo un elemento debería aparecer o animarse. Es posible crear distintos variants que representen diferentes estados visuales o animaciones para un elemento, como por ejemplo open, closed, hover y del estilo
• Initial es el estado que tu objeto tendrá antes de que la animación empiece.
• Animate es el estado animado de tu objeto. Es tan simple como eso.

Volviendo al proyecto, añadiremos nuestras animaciones al componente Carousel. Ya hemos importado las dos propiedades que vamos a necesitar – motion y AnimatePresence.

Voy a dividir esta sección en tres partes porque la animación la añadiremos a las tres partes de nuestro código: la imagen, la dirección del deslizador y el círculo que se usa como indicador.

Animación de la imagen

Para animar la entrada y salida de una imagen, necesitamos envolver nuestro elemento img con un componente AnimationPresence. Esto nos permite agregar animación cuando una imagen entra o sale. Luego añadimos un motion. a nuestra etiqueta:

 <AnimatePresence>
  <motion.img key={currentIndex} src={images[currentIndex]} />
</AnimatePresence>;

Luego nos posicionamos fuera de nuestra plantilla y declaramos nuestras variants:

  const slideVariants = {
    hiddenRight: {
      x: "100%",
      opacity: 0,
    },
    hiddenLeft: {
      x: "-100%",
      opacity: 0,
    },
    visible: {
      x: "0",
      opacity: 1,
      transition: {
        duration: 1,
      },
    },
    exit: {
      opacity: 0,
      scale: 0.8,
      transition: {
        duration: 0.5,
      },
    },
  };

Como puedes ver, los sliderVariants tienen cuatro propiedades:

• hiddenRight: esto parametriza la opacidad de la imagen en 0 y la ubica del lado derecho del contenedor.
• hiddenLeft: hace lo mismo que hiddenRight pero la ubica del lado izquierdo.
• visible: esta es la propiedad que dispara la animación desde donde esté la imagen al centro del contenedor.
• exit: esta propiedad controla la salida de una imagen de la pantalla al mismo tiempo que otra imagen entra.

Ahora que ya declaramos nuestros variants, ¿cómo podemos prever desde dónde la imagen va a entrar? Para esto necesitamos parametrizar un estado de dirección y que ese estado se actualice de acuerdo con cuál de los slide_direction hizo clic el usuario.

const [direction, setDirection] = useState('left');

Entonces, vamos a establecer que la imagen entre desde la izquierda. Es lo lógico dado que la primera imagen que se mostrará es la primera de la lista. Luego, en nuestra función helper, vamos a establecer la dirección de acuerdo con la dirección clikeada:

  const handleNext = () => {
    setDirection("right");
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };

  const handlePrevious = () => {
    setDirection("left");

    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };

  const handleDotClick = (index) => {
    setDirection(index > currentIndex ? "right" : "left");
    setCurrentIndex(index);
  };

Quizás hayas notado que no solo parametrizamos el estado para  handleNext y handlePrevious. También lo hicimos para handleDotClick. Así cuando se clickea un círculo anterior o siguiente, la dirección se actualizará correctamente.

Pero recuerda: la función de direction es la de establecer el estado inicial de la imagen para que el deslizador funcione correctamente.

Ya parametrizado direction, vamos a usar nuestros variants con nuestro elemento img:

<AnimatePresence>
          <motion.img
            key={currentIndex}
            src={images[currentIndex]}
            variants={slideVariants}
            initial={direction === "right" ? "hiddenRight" : "hiddenLeft"}
            animate="visible"
            exit="exit"
          />
        </AnimatePresence>

Agregamos la prop variants y la parametrizamos igual que a los slideVariants que creamos. Luego, agregamos la prop initial, con la misma sintaxis que un operador ternario. Esto establece que el estado inicial de la imagen sea hiddenRight o hiddenLeft cuando el usuario hace clic en el círculo indicador de la imagen o en el slider_direction.

Después de esto, agregamos la propiedad animate que se encarga de animar la imagen desde su posición inicial hasta la posición establecida en la propiedad visible.

Por último, agregamos nuestra propiedad exit y la establecemos en exit. Esto va a animar la imagen para que salga de la nueva pantalla cuando entra una nueva.

Hay muchas props que puede usar con Framer Motion. Puedes leer la documentación [en inglés] para aprender más sobre ellas.

Ya con esto, nuestra carrusel de imágenes debería funcionar correctamente.

Animación del deslizador y de los círculos indicadores de la imagen

Podríamos detenernos aquí, pero quiero agregar un poco de animación a las direcciones del deslizador y a los los círculos indicadores de la imagen.

  const slidersVariants = {
    hover: {
      scale: 1.2,
      backgroundColor: "#ff00008e",
    },
  }; 
const dotsVariants = {
    initial: {
      y: 0,
    },
    animate: {
      y: -10,
      scale: 1.3,
      transition: { type: "spring", stiffness: 1000, damping: "10" },
    },
    hover: {
      scale: 1.1,
      transition: { duration: 0.2 },
    },
  };

Empezamos creando nuestros variants. Para los slidersVariants, una propiedad hover. Para los dotsVariants tenemos tres propiedades: initial, animate y hover.

Así como lo hicimos como en el elemento img, para poder usar Framer Motion vamos a agregar motion. como prefijo al nombre del elemento.

<div className="slide_direction">
  <motion.div
    variants={slidersVariants}
    whileHover="hover"
    className="left"
    onClick={handlePrevious}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="20"
      viewBox="0 96 960 960"
      width="20"
    >
      <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
    </svg>
  </motion.div>
  <motion.div
    variants={slidersVariants}
    whileHover="hover"
    className="right"
    onClick={handleNext}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="20"
      viewBox="0 96 960 960"
      width="20"
    >
      <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
    </svg>
  </motion.div>
</div>;

Como pueden ver, hemos añadido nuestros variants y los hemos parametrizados igual a slidersVariants. Luego, usamos una nueva propiedad whileHover y la parametrizamos igual que a la propiedad over que especificamos en nuestro objeto slidersVariants.

<motion.div
  key={index}
  className={`dot ${currentIndex === index ? "active" : ""}`}
  onClick={() => handleDotClick(index)}
  initial="initial"
  animate={currentIndex === index ? "animate" : ""}
  whileHover="hover"
  variants={dotsVariants}
></motion.div>;

Aquí no solo agregamos una propiedad whileHover. También agregamos la propiedad initial y la propiedad animate que anima el círculo de la imagen seleccionada así se destaca.

En nuestro objeto slidersVariants, hemos agregado una transición a la animación que hace que haya un pequeño salto cuando ocurre la transición.

Con todo esto junto, nos queda un carrusel de imágenes prolijo. Aquí el resultado final:

Para referencia, aquí tienes el código completo del componente carrusel:

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [direction, setDirection] = useState(null);

  const slideVariants = {
    hiddenRight: {
      x: "100%",
      opacity: 0,
    },
    hiddenLeft: {
      x: "-100%",
      opacity: 0,
    },
    visible: {
      x: "0",
      opacity: 1,
      transition: {
        duration: 1,
      },
    },
    exit: {
      opacity: 0,
      scale: 0.8,
      transition: {
        duration: 0.5,
      },
    },
  };
  const slidersVariants = {
    hover: {
      scale: 1.2,
      backgroundColor: "#ff00008e",
    },
  };
  const dotsVariants = {
    initial: {
      y: 0,
    },
    animate: {
      y: -10,
      scale: 1.2,
      transition: { type: "spring", stiffness: 1000, damping: "10" },
    },
    hover: {
      scale: 1.1,
      transition: { duration: 0.2 },
    },
  };

  const handleNext = () => {
    setDirection("right");
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };

  const handlePrevious = () => {
    setDirection("left");

    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };

  const handleDotClick = (index) => {
    setDirection(index > currentIndex ? "right" : "left");
    setCurrentIndex(index);
  };

  return (
    <div className="carousel">
        <div className="carousel-images">
        <AnimatePresence>
          <motion.img
            key={currentIndex}
            src={images[currentIndex]}
            initial={direction === "right" ? "hiddenRight" : "hiddenLeft"}
            animate="visible"
            exit="exit"
            variants={slideVariants}
          />
        </AnimatePresence>
        <div className="slide_direction">
          <motion.div
            variants={slidersVariants}
            whileHover="hover"
            className="left"
            onClick={handlePrevious}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="20"
              viewBox="0 96 960 960"
              width="20"
            >
              <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
            </svg>
          </motion.div>
          <motion.div
            variants={slidersVariants}
            whileHover="hover"
            className="right"
            onClick={handleNext}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="20"
              viewBox="0 96 960 960"
              width="20"
            >
              <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
            </svg>
          </motion.div>
        </div>
      </div>
      <div className="carousel-indicator">
        {images.map((_, index) => (
          <motion.div
            key={index}
            className={`dot ${currentIndex === index ? "active" : ""}`}
            onClick={() => handleDotClick(index)}
            initial="initial"
            animate={currentIndex === index ? "animate" : ""}
            whileHover="hover"
            variants={dotsVariants}
          ></motion.div>
        ))}
      </div>
    </div>
  );
};
export default Carousel;

Dale una mirada al repositorio en GitHub.

Aquí está el sitio en Netlify.

Solo para que estén al tanto, este código tiene algunos problemas de accesibilidad por lo que no debería ser usado en un ambiente de producción.

Recursos

Entiendo que puede haber algunos términos o sintaxis que no estén del todo claro, sobretodo si eres nuevo a React o usando Framer Motion. Por eso, aquí tienes algunos recursos que recomiendo si quieres aprender más:

• Documentación de React
• Framer Motion Documentation [en inglés]
• Framer Motion Course [en inglés]

Conclusión

En este artículo, vimos el proceso de diseñar un carrusel de imágenes responsive e interactivo, combinando React y Framer Motion, una librería de animación.

Al incorporar componentes como motion y AnimationPresence, fuimos paso a paso costruyendo un carrusel visualmente atractivo, que muestra nuestras imagenes y con transiciones impecables y animaciones interesantes para una experiencia de usuario enriquecedora.

El equipo detrás de Next.js ha lanzado recientemente Next.js 13, que tiene un montón de características nuevas como un nuevo directorio app, componentes para el lado del servidor y del cliente, entre otros.

En este artículo, aprenderás cómo usar el nuevo Next.js 13 y la Base de Datos Firebase para crear una aplicación full stack.

Antes de continuar, para poder seguir el artículo necesitas tener un conocimiento básico de JavaScript, React y Next.js. Si necesitas repasar alguno de esos conceptos, aquí tienes algún recursos para principiantes:

• Aprende JavaScript - contenidos y curso interactivo [en inglés]
• Aprende React - curso completo [en inglés]
• Aprende Next.js - cuadernillo completo [en inglés]

Si estás listo, empecemos.

Cómo crear un nuevo proyecto de Next.js 13

Para instalar Next.js, necesitas tener instalado Node.js y npm/yarn instalado en tu computadora. Si no los tienes, puedes bajarlos desde sus sitios oficiales: Node.js website y npm website (aunque npm está incluido al instalar Node).

1. En el directorio que quieras, inicia la terminal de tu computadora y ejecuta el siguiente comando: npx create-next-app@13 --experimental-app.
2. Elige el nombre de tu proyecto y presiona enter para crearlo y esperar a que lo instale.
3. Se creará un nuevo directorio con el nombre de tu proyecto con todos archivos necesarios.
4. Ejecuta el comando cd para cambiar al directorio nuevo:
   cd my-project-name
5. Y para iniciar el servidor de desarrollo, ejecuta el siguiente comando:

// si estás usando yarn
yarn run dev

// si estás usando npm
npm run dev

6. Ejecutar este comando iniciará el servidor de desarrollo para que puedas ver tu aplicación en tiempo real en http://localhost:3000.

Cómo instalar Firebase en Next.js

Firebase es una plataforma Baas - Backend-as-a-Service, por su sigla en inglés- que ofrece servicios como autenticación, bases de datos en tiempo real, almacenamiento en la nube, análisis de datos, entre otros.

En este tutorial, usaremos Firebase como nuestra base de datos. Sigue estos pasos para crear una aplicación Firebase:

1. En https://console.firebase.google.com/, inicia sesión con tu cuenta de Google.
2. Haz click en Crear proyecto y ponle un nombre. Luego, haz clic en Continuar.
3. En la pantalla siguiente puedes elegir si quieres habilitar métodos de análisis de datos para tu proyecto.
4. Haz clic en Crear proyecto.

Luego, necesitas crear una aplicación web. En la página de inicio, haz clic en el ícono de web para crear la aplicación:

Ponle un nombre a tu aplicación y haz clic en Registrar app:

Copia el archivo de configuración ya que vamos a necesitarlo luego. Haz clic en continuar hasta que termines.

Una vez que estés de vuelta en la página de inicio de tu proyecto, elige un producto que quieras agregar en tu aplicación. Para este tutorial, sólo agrega Authentication y Cloud Firestore:

Para Authentication, elige Método de acceso y agrega Correo electrónico/contraseña.

Después de instalar exitosamente Firebase, ya lo podemos usar como back-end en tu aplicación de Next.js 13.

Para usar Firebase con Next.js, sigue estos pasos.

Instala la última versión del SDK de Firebase en tu proyecto Next.js ejecutando el siguiente comando en tu terminal:

yarn add firebase

// o si estás usando npm
npm install firebase

Crea un archivo .env en el directorio raíz de tu proyecto Next.js y copia tus archivos de configuración de Firebase (los que habías copiado antes). Debería verse así:

NEXT_PUBLIC_FIREBASE_API_KEY=api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=app-id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=analytic-id

Luego, para que se vea todo más prolijo, en tu directorio src crea una carpeta con el nombre firebase y crea un archivo config.js con el siguiente código;

// Importa las funciones que necesites de los SDKs 
import { initializeApp, getApps } from "firebase/app";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// Inicializa Firebase
let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

export default firebase_app;

Con esto ya listo, ya puedes utilizar Firebase como base de datos en tu aplicación Next.js.

Cómo instalar Authentication

Al querer construir aplicaciones fullstack, lo primero en lo que pensamos es la autenticación de usuarios. Con Firebase, podemos crear una forma de registrar usuarios o de que inicien sesión muy fácilmente.

En tu directorio src > firebase, crea una nueva carpeta con el nombre auth. Todo el código relacionado con la autenticación de firebase lo guardaremos aquí.

Luego, crea un archivo signup.js  dentro del directorio src > firebase > auth con el siguiente código:

import firebase_app from "../config";
import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";

const auth = getAuth(firebase_app);


export default async function signUp(email, password) {
    let result = null,
        error = null;
    try {
        result = await createUserWithEmailAndPassword(auth, email, password);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Vamos a descrifrar este código. Lo que estamos haciendo aquí es exportando la función signUp() que usa el método createUserWithEmailAndPassword() de Firebase para poder registrar nuevos usuarios. Luego de hacer esto, vamos a poder usar la función signUp() en cualquier lado de nuestra app.

En la misma carpeta, agreguemos nuestra función signIn(). Para hacer esto, crea un archivo signin.js con el siguiente código:

import firebase_app from "../config";
import { signInWithEmailAndPassword, getAuth } from "firebase/auth";

const auth = getAuth(firebase_app);

export default async function signIn(email, password) {
    let result = null,
        error = null;
    try {
        result = await signInWithEmailAndPassword(auth, email, password);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Cómo crear las páginas para el inicio de sesión y el registro de usuarios en Next.js

En Next.js 13 se puede crear nuevas páginas dentro del directorio app. Cada página es una carpeta con un archivo page.js. Para aprender más sobre cómo crear páginas, puedes leer la documentación de Next.js al respecto [en inglés].

Para crear un página de registro de usuarios un nuevo archivo page.js en signup, dentro de tu directorio app. Luego, agrega el siguiente código:

'use client'
import React from "react";
import signUp from "@/firebase/auth/signup";
import { useRouter } from 'next/navigation'

function Page() {
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')
    const router = useRouter()

    const handleForm = async (event) => {
        event.preventDefault()

        const { result, error } = await signUp(email, password);

        if (error) {
            return console.log(error)
        }

        // else successful
        console.log(result)
        return router.push("/admin")
    }
    return (<div className="wrapper">
        <div className="form-wrapper">
            <h1 className="mt-60 mb-30">Sign up</h1>
            <form onSubmit={handleForm} className="form">
                <label htmlFor="email">
                    <p>Email</p>
                    <input onChange={(e) => setEmail(e.target.value)} required type="email" name="email" id="email" placeholder="example@mail.com" />
                </label>
                <label htmlFor="password">
                    <p>Password</p>
                    <input onChange={(e) => setPassword(e.target.value)} required type="password" name="password" id="password" placeholder="password" />
                </label>
                <button type="submit">Sign up</button>
            </form>
        </div>
    </div>);
}

export default Page;`

Por defecto, cada página que se agrega al directorio page.js es un componente del servidor [enlace a la documentación en inglés] y por lo tanto no permite agregar interactividad de lado del servidor como un onSubmit() a elementos de formulario. Para poder agregar esta interactividad, tenemos que decirle a Next.js que queremos un componente Cliente. Para hacer esto, añadimos lo siguiente al comienzo del archivo y antes de importar cualquier otro elemento:

'use client'

// código del componente

Del mismo modo vamos a crear nuestra página de inicio de sesión. Para crear esta página, crea un archivo page.js en signin, dentro de tu directorio app, y agrega el siguiente código:

'use client'
import React from "react";
import signIn from "@/firebase/auth/signin";
import { useRouter } from 'next/navigation'

function Page() {
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')
    const router = useRouter()

    const handleForm = async (event) => {
        event.preventDefault()

        const { result, error } = await signIn(email, password);

        if (error) {
            return console.log(error)
        }

        // sino exitoso
        console.log(result)
        return router.push("/admin")
    }
    return (<div className="wrapper">
        <div className="form-wrapper">
            <h1 className="mt-60 mb-30">Sign up</h1>
            <form onSubmit={handleForm} className="form">
                <label htmlFor="email">
                    <p>Email</p>
                    <input onChange={(e) => setEmail(e.target.value)} required type="email" name="email" id="email" placeholder="example@mail.com" />
                </label>
                <label htmlFor="password">
                    <p>Password</p>
                    <input onChange={(e) => setPassword(e.target.value)} required type="password" name="password" id="password" placeholder="password" />
                </label>
                <button type="submit">Sign up</button>
            </form>
        </div>

    </div>);
}

export default Page;

Cómo saber si hubo algún cambio de autenticación

Mientras estás usando la aplicación, siempre vamos a querer saber si el usuario ha iniciado sesión o no. Si el usuario ha iniciado sesión, es posible crear páginas protegidas y mostrarle ciertos contenidos sólo a él. Firebase tiene el método onAuthStateChanged() para poder saber si hubo cambios.

Para que la información del usuario obtenida con el método mencionado arriba pueda ser usada en todo la aplicación, vamos a usar la API React Context. Crea un carpeta con el nombre context en tu directorio src. Dentro del directorio directory, crea un archivo con el nombre AuthContext.js y agrega el siguiente código:

import React from 'react';
import {
    onAuthStateChanged,
    getAuth,
} from 'firebase/auth';
import firebase_app from '@/firebase/config';

const auth = getAuth(firebase_app);

export const AuthContext = React.createContext({});

export const useAuthContext = () => React.useContext(AuthContext);

export const AuthContextProvider = ({
    children,
}) => {
    const [user, setUser] = React.useState(null);
    const [loading, setLoading] = React.useState(true);

    React.useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            if (user) {
                setUser(user);
            } else {
                setUser(null);
            }
            setLoading(false);
        });

        return () => unsubscribe();
    }, []);

    return (
        <AuthContext.Provider value={{ user }}>
            {loading ? <div>Loading...</div> : children}
        </AuthContext.Provider>
    );
};

Con el código de arriba simplemente creamos un Provider que devuelve el objeto usuario si el usuario inició sesión. De lo contrario, sólo devolverá null.

Para poder usar el valor que se le pasó a <AuthContext.Provider>  vamos a exportar useAuthContext desde el archivo y así usar el valor de user.

Antes de poder usar este contexto, necesitamos envolver todos los componentes con AuthContextProvider. Para hacer esto, abrimos el archivo layout.js dentro del directorio src > app y editamos el código con lo siguiente:

'use client'
import './globals.css'
import { AuthContextProvider } from '@/context/AuthContext'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      {/*
        <head /> contendrá los componentes devueltos por el padre más cercano
        head.js. Encuentra más información en https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
      <body>
        <AuthContextProvider>
          {children}
        </AuthContextProvider>
      </body>
    </html>
  )
}

Ahora ya podemos crear páginas protegidas y mostrar contenido específico a usuarios distintos.

Cómo crear páginas protegidas

Dentro del directorio app, crea el directorio admin > page.js y agrega el siguiente código:

'use client'
import React from "react";
import { useAuthContext } from "@/context/AuthContext";
import { useRouter } from "next/navigation";
function Page() {
    const { user } = useAuthContext()
    const router = useRouter()

    React.useEffect(() => {
        if (user == null) router.push("/")
    }, [user])

    return (<h1>Solamente los usuarios que iniciaron sesión pueden ver esta página</h1>);
}

export default Page;

Si el usuario es null, lo redireccionamos a la página inicial. De lo contrario, si no es null, le mostramos la página protegida.

Cómo comunicarse con nuestra base de datos

Ahora que ya lidiamos con la parte de autenticación, podemos enfocarnos en la comunicación con nuestra base de datos. Como base de datos vamos a usar Firestore.

Para seguir haciendo todo ordenado, vamos a crear un nuevo directorio llamado firebase > firestore. Dentro de este directorio vamos a guardar todo el código relacionado con Firestore.

Cómo agregar documentos a Firestore

Dentro del directorio firestore, crea un archivo con el nombre addData.js y agrega el siguiente código:

import firebase_app from "../config";
import { getFirestore, doc, setDoc } from "firebase/firestore";

const db = getFirestore(firebase_app)
export default async function addData(colllection, id, data) {
    let result = null;
    let error = null;

    try {
        result = await setDoc(doc(db, colllection, id), data, {
            merge: true,
        });
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Este código ya debería serte familiar: estamos exportando una función que permite agregar información a nuestra base de datos firestore.

Ahora ya podemos usar esta función addData() desde cualquier componente para agregar información a nuestra base de datos:

'use client'
import addData from "@/firebase/firestore/addData";

export default function Home() {

  const handleForm = async () => {
    const data = {
      name: 'John snow',
      house: 'Stark'
    }
    const { result, error } = await addData('users', 'user-id', data)

    if (error) {
      return console.log(error)
    }
  }
  
  return (
    ...
  )
}

Cómo podemos obtener un documento desde Firestore

Usando un método similar, podemos obtener un documento desde nuestra base de datos Firebase.

Crea un archivo getData.js dentro del directorio Firestore y agrega el siguiente código:

import firebase_app from "../config";
import { getFirestore, doc, getDoc } from "firebase/firestore";

const db = getFirestore(firebase_app)
export default async function getDoument(collection, id) {
    let docRef = doc(db, collection, id);

    let result = null;
    let error = null;

    try {
        result = await getDoc(docRef);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

También podemos usar está función en cualquier componente que quieras.

Conclusión

En este artículo, aprendimos cómo construir una aplicación fullstack usando Firebase y Next.js 13 para agregar autenticación e interacción con nuestra base de datos.

¡Feliz codificación!

En este artículo, vamos a hablar sobre cómo acceder a las propiedades de una variedad de arreglos y ver algunos ejemplos de código.

¿Qué es un arreglo en JavaScript?

Un arreglo es un tipo de estructura de datos de JavaScript que se usa para almacenar una colección de elementos de distintas clases.

Es posible tener un arreglo de cadenas de texto, como este:

const fruits = ["apple", "banana", "mango", "orange"];

O un arreglo de números:

const numbers = [1, 2, 3, 4, 5];

y hasta un arreglo anidado de arreglos como este:

const nestedArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

También es posible tener un arreglo de distintas clases de datos:

const mixedArray = ["apple", 1, "banana", 2, "mango", 3];

Cómo acceder a los elementos de un arreglo en JavaScript:

Para acceder a un elemento de un arreglo, hay que referenciar el nombre del arreglo, seguido del número de índice del elemento que queremos acceder, entre corchetes.

Este es un ejemplo de cómo acceder al primer elemento del arreglo fruits:

const fruits = ["apple", "banana", "mango", "orange"];
console.log(fruits[0]); // apple

Los arreglos siempre comienzan en cero. Esto significa que el primer elemento tiene el índice 0, el segundo tiene el 1 y así los siguientes elementos.

Para acceder al último elemento del arreglo, se puede usar la longitud (length) del arreglo menos 1.

const fruits = ["apple", "banana", "mango", "orange"];
console.log(fruits[fruits.length - 1]); // orange

A veces puede ser confuso cuando se está trabajando con un arreglo anidado de arreglos, pero la sintaxis es la misma que usamos cuando queremos acceder a un elemento de un arreglo anidado. Por ejemplo, si queremos acceder al primer elemento de nestedArray:

const nestedNumberArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(nestedNumberArray[0][0]); // 1

nestedNumberArray[0] apunta a este arreglo:

[1, 2, 3];

Para acceder al primer elemento de este arreglo, hay que usar otro para de corchetes con el número de índice que se quiere acceder:

nestedNumberArray[0][0];

Cómo acceder a las propiedades de un arreglo de objetos en JavaScript

Muchas veces vamos a encontrar arreglos de objetos en JavaScript.

En este ejemplo, dentro del arreglo developers, cada desarrollador tiene las siguientes propiedades: name, age y la propiedad languages que es un arreglo con los lenguajes de programación que conocen.

const developers = [
  { name: "John", age: 25, languages: ["JavaScript", "Python"] },
  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },
  { name: "Zack", age: 45, languages: ["Go", "C#"] },
];

Si queremos acceder a la propiedad name del primer desarrollador, usamos la siguiente sintaxis:

console.log(developers[0].name); // John

Aquí estamos usando una combinación de anotación de punto y corchetes para acceder a la primera propiedad del objeto del primer desarrollador en el arreglo developers.

developers[0] es el objeto del primer desarrollador.

{ name: "John", age: 25, languages: ["JavaScript", "Python"] }

Luego usamos la notación de punto (developers[0].name) para acceder a la propiedad name de este objeto.

Cómo encontrar un valor específico de un arreglo de objetos en JavaScript

Para buscar un objeto en particular dentro de un arreglo de objetos, es posible usar el método find. Este método devuelve el primer elemento en el arreglo que cumple con los parámetros de la función. Si ningún elemento los cumple, devuelve undefined.

Este es un ejemplo usando el método find con un arreglo de números:

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find((number) => number > 3); // 4

En el ejemplo anterior, el método find busca entre los números del arreglo y devuelve el primer número mayor a 3. En este caso, find devuelve el número 4.

También podemos usar el mismo razonamiento para encontrar un objeto específico dentro de un arreglo de objetos.

En el siguiente ejemplo, vamos a buscar el objeto con el valor "Kelly" en la propiedad name dentro del arreglo developers.

const developers = [
  { name: "John", age: 25, languages: ["JavaScript", "Python"] },
  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },
  { name: "Zack", age: 45, languages: ["Go", "C#"] },
];

developers.find((developer) => developer.name === "Kelly");

En este ejemplo, developer representa cada objeto del arreglo. El método find va a recorrer el arreglo developers y devolver el primer objeto developer que tenga el valor "Kelly" en la propiedad name.

{ name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] }

Conclusión

Espero que este artículo te haya resultado útil para aprender sobre arreglos y cómo acceder a sus propiedades.

Vimos un par de ejemplos de arreglos y también vimos cómo acceder a sus elementos desde arreglos anidados y de un arreglo de objetos.

También aprendimos el método find y cómo usarlo para encontrar un objeto específico dentro de un arreglo de objetos.

Ahora deberías poder entender mejor sobre cómo trabajar con arreglos y objetos en JavaScript.

¡Feliz codificación! 🚀

En este artículo, veremos cómo hacer un menú acordeón en React, completamente desde cero, paso por paso y sin usar librerías externas.

Usaremos la sintaxis de React Hooks para hacer esta aplicación en React. Por lo que si no estás muy familiarizado con React Hooks, puedes dar un vistazo a mi artículo Introducción a React Hooks [en inglés] para aprender los fundamentos de Hooks.

Puedes ver la demo de la aplicación aquí.

Empecemos.

Configuración inicial del proyecto

Crea un nuevo proyecto create-react-app.

npx create-react-app react-accordion-demo

Una vez que el proyecto está creado, borra todos los archivos de la carpeta src y crea los archivos index.js, App.js y styles.css dentro de ella. También crea aquí una nueva carpeta llamada utils.

Abre el archivo styles.css y copia este código en ese archivo.

Cómo crear las primeras páginas

Abre el archivo src/App.js y añade el siguiente código dentro de él:

import React from 'react';

const App = () => {
  const accordionData = {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
  };

  const { title, content } = accordionData;

  return (
    <React.Fragment>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        <div className="accordion-item">
          <div className="accordion-title">
            <div>{title}</div>
            <div>+</div>
          </div>
          <div className="accordion-content">{content}</div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default App;

Aquí usamos las propiedades del objeto accordionData para mostrar el contenido del acordeón.

Para la propiedad content, usamos la sintaxis de la plantilla literal de ES6 (``) así podemos escribir en varias líneas. También usamos un texto lorem ipsum de ejemplo.

Luego, abre el archivo src/index.js y añade el siguiente contenido:

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

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

Si ejecutas la aplicación usando el comando yarn start desde la terminal, verás la siguiente pantalla:

Cómo abrir y cerrar el menú acordeón

Como has podido ver arriba, pudimos mostrar un única sección como parte del menú acordeón. Por defecto el acordeón está abierta, pero no podemos cerrarlo. Así que vamos a agregar esa funcionalidad para abrirlo y cerrarlo.

Añade un nuevo estado dentro del componente como se muestra a continuación:

const [isActive, setIsActive] = useState(false);

Aquí hemos definido el estado isActive. Con esto, ocultaremos o mostraremos el contenido del acordeón.

También importa el hook useState al comienzo del archivo:

import React, { useState } from 'react';

Luego, para el div con la clase accordion-title, añade el handler onClick de la siguiente manera:

<div className="accordion">
  <div className="accordion-item">
    <div
      className="accordion-title"
      onClick={() => setIsActive(!isActive)}
    >
      <div>{title}</div>
      <div>{isActive ? '-' : '+'}</div>
    </div>
    {isActive && <div className="accordion-content">{content}</div>}
  </div>
</div>

Aquí estamos invirtiendo el valor del estado isActive cuando hacemos clic en el div accordion-title. Si el valor de isActive es false, lo ponemos en true y al revés.

Mostramos el signo + o - de acuerdo con el valor de isActive a través de un operador ternario.

Y si el valor del estado isActive es true entonces sólo vamos a mostrar el contenido del acordeón como en el ejemplo de abajo:

{isActive && <div className="accordion-content">{content}</div>}

Si actualizas la aplicación, verás la siguiente pantalla:

Al hacer clic en el título, el acordeón se abre y podemos volver a hacer clic sobre él para cerrarlo.

Cómo añadir varias secciones a un menú acordeón

Si tenemos varias secciones, copiar y pegar una y otra vez el mismo código JSX no funcionará tan bien como si tenemos un solo una sección.

Entonces, lo que vamos a hacer es crear un componente separado solamente para mostrar el acordeón. Luego, de acuerdo con la cantidad de secciones que tengamos, vamos a usar un bucle para recorrer el componente y así hacer que muestre varias secciones.

Crea un nuevo archivo llamado Accordion.js dentro de la carpeta src y luego añade el siguiente código dentro de este:

import React, { useState } from 'react';

const Accordion = ({ title, content }) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="accordion-item">
      <div className="accordion-title" onClick={() => setIsActive(!isActive)}>
        <div>{title}</div>
        <div>{isActive ? '-' : '+'}</div>
      </div>
      {isActive && <div className="accordion-content">{content}</div>}
    </div>
  );
};

export default Accordion;

Aquí, lo que hemos hecho es mover el estado y el div accordion-item del archivo App.js al archivo Accordion.js. Luego, pasamos las propiedades dinámicas title y content usando la sintaxis de desestructuración de ES6:

const Accordion = ({ title, content }) => {

Ahora, abrimos el archivo App.js y reemplazamos el código con este:

import React from 'react';
import Accordion from './Accordion';

const App = () => {
  const accordionData = [
    {
      title: 'Section 1',
      content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
    },
    {
      title: 'Section 2',
      content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
      reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
      quaerat iure quos dolorum accusantium ducimus in illum vero commodi
      pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
      quidem maiores doloremque est numquam praesentium eos voluptatem amet!
      Repudiandae, mollitia id reprehenderit a ab odit!`
    },
    {
      title: 'Section 3',
      content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
      quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
      dolor ut sequi minus iste? Quas?`
    }
  ];

  return (
    <div>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        {accordionData.map(({ title, content }) => (
          <Accordion title={title} content={content} />
        ))}
      </div>
    </div>
  );
};

export default App;

Lo que hicimos fue convertir el objeto accordionData en un arreglo de objetos. Luego, lo recorremos con un bucle usando el método map, además de pasarle las propiedades title y content al componente Accordion.

Si actualizas la aplicación, verás que se muestran las tres secciones y que podemos abrir y cerrar cada una de ellas:

Cómo refactorizar el código

Como has visto, con solo mover la sección del acordeón a un componente separado y pasar el contenido dinámico mediante props, pudimos crear un acordeón desde cero y que funciona.

Como es una buena práctica dejar la información estática en un archivo separado, vamos a mover el arreglo accordionData a un archivo distinto y luego importarlos desde App.js

Crea un nuevo archivo llamado content.js dentro de la carpeta utils y copia el siguiente código dentro de este:

export const accordionData = [
  {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
    laborum cupiditate possimus labore, hic temporibus velit dicta earum
    suscipit commodi eum enim atque at? Et perspiciatis dolore iure
    voluptatem.`
  },
  {
    title: 'Section 2',
    content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
    reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
    quaerat iure quos dolorum accusantium ducimus in illum vero commodi
    pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
    quidem maiores doloremque est numquam praesentium eos voluptatem amet!
    Repudiandae, mollitia id reprehenderit a ab odit!`
  },
  {
    title: 'Section 3',
    content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
    quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
    dolor ut sequi minus iste? Quas?`
  }
];

Ahora, abre App.js y reemplaza el código de ese archivo con este:

import React from 'react';
import Accordion from './Accordion';
import { accordionData } from './utils/content';

const App = () => {
  return (
    <div>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        {accordionData.map(({ title, content }) => (
          <Accordion title={title} content={content} />
        ))}
      </div>
    </div>
  );
};

export default App;

Con esto hemos importado la información estática desde un archivo externo y luego lo borramos del archivo App.js.

Entonces ahora el código se ve prolijo y fácil de leer, además de que continúa funcionando:

Cierre

Con esto, hemos terminado de hacer nuestra app.

Puedes encontrar el código completo de esta aplicación en este repositorio de GitHub.

¡Gracias por leer!

Si quieres aprender en detalle todo lo nuevo de ES6+, incluyendo let y const, promesas, distintos métodos de promesas, desestructuración de objetos y arreglos, funciones flecha, async/await, importar y exportar, y mucho más desde cero, dale un vistazo a mi libro Mastering Modern JavaScript. Este libro cubre todo lo necesario para aprender React y ayudarte a mejorar tanto en JavaScript como en React.

Si usas internet, es probable que ya hayas te hayas cruzado con un menú desplegable. Los menús desplegables tienen dos usos: recolectar la información ingresada por el usuario en los formularios web e implementar menús de acciones o navegación en aplicaciones web.

Los menús desplegables son una de las mejores maneras de ofrecer distintas opciones dentro de una colección de elementos sin comprometer el flujo de una aplicación. Además de aplicaciones web, también se los utiliza en software, sistemas operativos, etc.

En esta guía, vamos a aprender a hacer un menu desplegable de navegación usando HTML, CSS y JavaScript.

Al final de esta guía, voy a incluir el archivo de codepen para que puedas jugar con él.

Habiendo cubierto lo fundamental de los menús desplegables, vayamos paso por paso para hacer uno.

Paso 1: Agregar el markup para el menu desplegable.

Dado que vamos a usar iconos en esta guía, lo primero que debemos hacer es importarlos. Para hacerlo más simple, vamos a usar la librería gratuita, Boxicons. Siéntete libre de elegir el ícono que prefieras.

Si bien hay distintas maneras de instalar Boxicons dentro de nuestro sitio, la manera más simple es la de fijar el script dentro de la etiqueta  head de nuestro archivo HTML de este modo:

<head>
   <link 
     href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" 
     rel="stylesheet"
    />
 </head>

Una vez que importamos los íconos, creamos un elemento div con la clase container. Este elemento contendrá otro elemento llamado button y el menú desplegable.

Dentro de este contenedor, creamos el elemento button y le damos la clase y el id btn.  Al botón le vamos a agregar el texto y el ícono de una flecha.

Este es el código para el botón:

<button class="btn" id="btn">
  Dropdown
  <i class="bx bx-chevron-down" id="arrow"></i>
</button>

Luego, vamos a agregar el código del menú desplegable propiamente dicho. Debajo de la etiquetabutton, vamos a crear un elemento div con la clase y el id dropdown. Dentro del elemento div, creamos una etiqueta a para cada elemento del menú, con su texto e ícono respectivo.

Así es cómo debería verse el código:

<div class="dropdown" id="dropdown">
  <a href="#create">
    <i class="bx bx-plus-circle"></i>
    Create New
  </a>
  <a href="#draft">
    <i class="bx bx-book"></i>
    All Drafts
  </a>
  <a href="#move">
    <i class="bx bx-folder"></i>
    Move To
  </a>
  <a href="#profile">
    <i class="bx bx-user"></i>
    Profile Settings
  </a>
  <a href="#notification">
    <i class="bx bx-bell"></i>
    Notification
  </a>
  <a href="#settings">
    <i class="bx bx-cog"></i>
    Settings
  </a>
</div>

Y este es el resultado:

Todavía no luce bien, así que vamos a darle estilos al menú.

Paso 2: Dándole estilos al menú desplegable

Primero vamos a resetear los márgenes y el padding de cada elemento de la página y guardar alguno de los valores en variables reusables para poder utilizarlos en nuestro archivo CSS. Luego, le daremos al elemento body un estilo global.

@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  --shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
  --color: #166e67;
  --gap: 0.5rem;
  --radius: 5px;
}

body {
  margin: 2rem;
  background-color: #b3e6f4;
  font-size: 0.9rem;
  color: black;
}

El próximo paso es darle estilo al botón y al contenedor del menú desplegable. Para agilizar las cosas, solo voy a explicar lo más importante sobre cómo dar estilo.

Copia este código y pégalo en tu archivo CSS:

.btn {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--gap);
  padding: 0.6rem;
  cursor: pointer;
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  position: relative;
}

.bx {
  font-size: 1.1rem;
}

.dropdown {
  position: absolute;
  width: 250px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: 0.3rem;
  background: white;
}

.dropdown a {
  display: flex;
  align-items: center;
  column-gap: var(--gap);
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: black;
}

.dropdown a:hover {
  background-color: var(--color);
  color: white;
}

Dado que los menús desplegables suelen ubicarse por sobre los elementos, el botón tiene posición relative y el menú desplegable, absolute. Esto permite que ambos elementos estén cerca uno del otro y que el menú desplegable se ubicará por arriba de otros elementos. De esta manera, al desplegarlo, no afectará el flujo de la página.

Este es el resultado:

Ahora que ya le dimos estilo al menú desplegable, queremos que solo aparezca al apretar un botón en vez de hacerlo cuando pasamos con el puntero sobre él.

En un artículo anterior que escribí sobre cómo hacer un modal con JavaScript [en inglés], usé display: none para inicialmente ocultar el elemento modal de la pantalla. Pero lo malo de utilizar esta propiedad es que, de acuerdo con MDN Docs [en inglés], la propiedad no es animable.

Por esto, en esta guía usaremos una manera distinta para ocultar el menú desplegable. Esto lo haremos combinando las propiedades visibility y opacity. Esta es la manera que GitHub utiliza para ocultar sus menús desplegables.

Dentro de la clase dropdown que creamos anteriormente, agregamos la propiedad visibility con el valor hidden y la opacidad establecida en 0. Al hacer esto, el menú desplegable aparecerá escondido al cargar la página.

Para mostrar el modal,  vamos a crear una clase separada llamada show. Esta clase va a tener la propiedad visibility con el valor visible y una opacidad de 1. A esta clase la vamos a insertar usando JavaScript.

Este es el código:

.dropdown {
  position: absolute;
  width: 250px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: 0.3rem;
  background: white;
  transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
    
  transform: translateY(0.5rem);
  visibility: hidden;
  opacity: 0;
}

.show {
  transform: translateY(0rem);
  visibility: visible;
  opacity: 1;
}

.arrow {
  transform: rotate(180deg);
  transition: 0.2s ease;
}

Sumado al código para ocultar el elemento modal, añadimos otra clase para rotar el icono de flecha cuando se aprieta el botón del menú.

Paso 3: Agregando funcionalidad al menú desplegable

Primero, vamos a guardar los distintos elementos en variables para poder reutilizarlos.

const dropdownBtn = document.getElementById("btn");
const dropdownMenu = document.getElementById("dropdown");
const toggleArrow = document.getElementById("arrow");

El próximo paso es crear una función para insertar la clase show del elemento desplegable y rotar la flecha del menú al apretar el botón. A esta función la llamaremos toggleDropdown.

const toggleDropdown = function () {
  dropdownMenu.classList.toggle("show");
  toggleArrow.classList.toggle("arrow");
};

Luego vamos a agregar esta función en el botón del menú desplegable con el método addEventListener para que cada vez que el botón se apriete, active la función que controla que el menú desplegable se oculte o despliegue.

dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation();
  toggleDropdown();
});

Si no te diste cuenta, añadimos ell método stopPropagation()dentro de la función del menú desplegable. Esto hace que la función del elemento botón no la herede el elemento padre y se ejecute dos veces. Esto lo entenderás más en la próxima sección.

Este es el resultado:

Cómo cerrar un menú desplegable cuando un elemento del DOM se aprieta

Es posible cerrar un menú desplegable de cuatro formas distintas:

• Al apretar el botón que lo activa
• Al hacer clic sobre cualquiera de sus elementos individuales
• Al hacer clic fuera del menú (en el body de la página)
• Al apretar el botón Escape o el botón de flecha hacia abajo del teclado.

Pero en esta guía nos vamos a concentrar en los primeros tres.

Primero, vamos a seleccionar el elemento raíz <html> con document.documentElement. Y como hicimos anteriormente, vamos a insertar la función toggleDropdown() dentro de él.

Pero esta vez queremos poner una condición que chequee si el menú desplegable contiene o no la clase show. Solo cuando la tenga vamos a querer que se active la función para ocultar el menú.

document.documentElement.addEventListener("click", function () {
  if (dropdownMenu.classList.contains("show")) {
    toggleDropdown();
  }
});

Este es el resultado final:

Y así es como se hace un menú desplegable con JavaScript. Abajo está el archivo de codepen para ver el menú desplegable en acción.

Conclusión

Espero, de corazón, que este post te haya resultado útil o interesante. Si fue así, te pido que lo compartas con tus amigos o suscríbete a mi blog así no te pierdes ningún post. Gracias por leer.

GitHub | Twitter | Blog | Portfolio

En estos tiempos del desarrollo web, tener una forma de que la información persista ayuda a que los desarrolladores puedan mejorar el rendimiento y de esta manera crear una mejor experiencia de usuario. Y usar el local storage es una manera eficaz de que la información persista en una aplicación.

En este artículo, vas a aprender que es el local storage y como usarlo en aplicaciones web modernas. También aprenderás tanto las ventajas de usarlo, como sus desventajas.

Contenidos

• ¿Qué es el Local Storage?
• Diferencias entre Local Storage y Session Storage
• Cómo usar el Local Storage
• Un ejemplo práctico
• Cómo ver el Local Storage con DevTools
• Beneficios de usar el Local Storage
• Limitaciones del Local Storage
• Conclusión

¿Qué es el Local Storage?

El local storage es una funcionalidad de los navegadores que permite a los desarrolladores guardar información en el navegador del usuario. Es parte de Web Storage API [API de Almacenamiento Web] junto a session storage.

El local storage funciona tomando información en formato de pares clave-valor y la conserva aun cuando el usuario actualiza la página o cierra la pestaña o el navegador.

Diferencias entre Local Storage y Session Storage

Como mencioné anteriormente, Web Storage API provee a los navegadores actuales de dos funcionalidades importantes para almacenamiento de información: local storage y session storage.

Las principales diferencias entre ambos son la persistencia de la información almacenada y su alcance.

En el local storage la información permanece disponible aun cuando la pestaña o la ventana del navegador se cierra, pero la borra cuando la información está almacenada en session storage.

Además, es posible acceder a la información almacenada en el local storage desde múltiples pestañas o ventanas del navegador, mientras que solo se puede acceder a la información almacenada en session storage desde pestañas o ventanas específicas del navegador porque no se comparte.

Cómo usar el Local Storage

El objeto local storage viene con varios métodos diferentes para poder interactuar con él. Con estos métodos es posible agregar, leer, y borrar información ubicada en el local storage.

Cómo almacenar información en el Local Storage

Para almacenar información en el local storage, se usa en el método setItem(). Este método lleva dos argumentos, un clave y un valor.

localStorage.setItem(key, value)

Si la clave no existe en el local storage, el método setItem() va a crear una nueva clave y asignarle el valor dado. Pero si en el local storage ya existe una clave con el mismo nombre, el valor va a ser reemplazado con el nuevo valor.

Cómo leer información almacenada en el Local Storage

Para recuperar y usar la información del local storage, puedes utilizar el método getItem(). Este método lleva una clave como argumento.

localStorage.getItem(key)

Si la clave existe en el local storage, el método devuelve el valor de esa clave. Caso contrario, devuelve null

Cómo almacenar y leer valores de información complejos en el Local Storage

El local storage solo puede almacenar cadenas de texto. Esto significa que si necesitas almacenar valores como objetos o arrays, lo primero que tienes que hacer es transformar ese valor en una cadena de texto. Esto lo puedes hacer usando el método JSON.stringify().

Ejemplo:

const userObj = {
  username = "Maria",
  email: "maria@mail.com"
}

localStorage.setItem('user', JSON.stringify(userObj))

El método JSON.stringify() convierte al objeto userObj en una cadena de texto antes de enviarlo al local storage.

Si quisieras acceder a la información del local storage, es necesario devolverla a su forma original. Esto lo haces usando el método JSON.parse()

Ejemplo:

const storedUserData = localStorage.getItem('user')

if (storedUserData) {
  const userData = JSON.parse(storedUserData)
  // You can use userData here...
} else {
  console.log('User data not found in local storage')
}

En el ejemplo de arriba, primero chequeamos si hay información para la clave "user" en local storage antes de usar el método JSON.parse(). Esto es importante porque si esa información no existe en el local storage, el método JSON.parse() se aplicará a un valor nulo y que puede resultar en un error.

Cómo borrar información del Local Storage

Hay dos métodos para borrar información del local storage. Uno es el método removeItem() y el otro es el método clear()

El método removeItem() se utiliza cuando quieres borrar un solo ítem del local storage. El método lleva la clave como argumento y borra el correspondiente par clave-valor del local storage.

localStorage.removeItem(key)

Si en vez de borrar un solo par clave-valor quieres borrar toda la información almacenada en el local storage, el local storage tiene un método para eso- el método clear()

localStorage.clear()

El método clear()borra todos los pares clave-valor del local storage para el dominio actual.

Cómo obtener el nombre de una clave en el Local Storage

Si quisieras obtener el nombre de una clave en un índice particular del local storage, puedes usar el método key(). Este método lleva como argumento un número y devuelve el nombre de la clave del índice especificado.

Ejemplo:

localStorage.key(0)

El ejemplo de arriba devuelve el nombre de la clave del índice cero. Si no hay clave en el índice especificado, el método devuelve null.

Un ejemplo práctico

El siguiente código muestra la diferencia entre local storage y session storage.

En este ejemplo, vamos a guardar el nombre del usuario en local storage y la edad en session storage

<!-- HTML --> 
<body>

  <h1 class="userName"></h1>
  <h2 class="userAge"></h2>

  <input type="text" class="name" placeholder="Enter name here"/>
  <button class="saveNameBtn">Save Name</button>
  
  <br />

  <input type="text" class="age" placeholder="Enter age here"/>
  <button class="saveAgeBtn">Save Age</button>
  
</body>

El código incluye dos elementos header. Uno para userNamey el otro para userAge. También incluye dos elementos input para nombre y edad, asociados a un botón que vamos a usar para guardar la información.

Usemos el método querySelector para seleccionar los distintos elementos.

const userNameText = document.querySelector(".userName")
const userAgeText = document.querySelector(".userAge")

const saveNameButton = document.querySelector(".saveNameBtn")
const saveAgeButton = document.querySelector(".saveAgeBtn")

Ejemplo de código para Local Storage

saveNameButton.addEventListener("click", () => {
  const userName = document.querySelector(".name").value
  userNameText.textContent = userName
  localStorage.setItem("name", userName)
})

Primero, obtenemos el valor nombre del input, lo ponemos como el textContent de userNameText y luego usamos el método setItem() del local storage para guardar el valor de userName en el local storage.

Ahora veamos cómo podemos obtener el valor nombre del local storage cuando lo necesitamos.

function displayUserName () {
  const nameFromLocalStorage = localStorage.getItem("name")

  if (nameFromLocalStorage) {
    userNameText.textContent = nameFromLocalStorage
  } else {
    userNameText.textContent = "No name data in local storage"
  }
}

displayUserName()

La función displayUserName obtiene el nameFromLocalStorage usando el método `getItem()`. Si el valor existe en el local storage,  lo ponemos como el textContent del elemento userNameText. Si es null o no existe,  entonces ponemos la cadena de texto "No hay información de nombres en el local storage" como  textContent.

Ejemplo de código for Session Storage

Ahora, hagamos lo mismo para el valor age. La única diferencia es que vamos a usar session storage en vez de local storage.

saveAgeButton.addEventListener("click", () => {
  const userAge = document.querySelector(".age").value
  userAgeText.textContent = userAge
  sessionStorage.setItem("age", userAge)
})

function displayUserAge () {
  const ageFromSessionStorage = sessionStorage.getItem("age")

  if (ageFromSessionStorage) {
    userAgeText.textContent = ageFromSessionStorage
  } else {
    userAgeText.textContent = "No age data in session storage"
  }
}

displayUserAge()

Los métodos setItem y getItem también sirven para session storage.

Demo:

Como puedes ver en el demo de arriba, al cerrar y reabrir la página, el valor name persiste en el local storage. Pero el valor age del session storage se borra una vez que la página se cierra. Intentalo tu mismo con el código de ejemplo en StackBlitz.

Cómo ver el Local Storage con DevTools

Puedes seguir los pasos de abajo para inspeccionar los contenidos del local storage en las herramientas para desarrolladores de tu navegador.

Primero, abre las DevTools. Puedes hacer esto haciendo clic derecho sobre la página y seleccionar "Inspeccionar"

Después, selecciona la pestaña "Aplicación" del panel de DevTools. De acuerdo con tu navegador, el panel puede tener un nombre diferente. Por ejemplo, en Safari y Firefox se llama "Almacenamiento".

Busca la sección "Almacenamiento" en la barra del costado que muestra una lista de distintas opciones de almacenamiento web.

Haz clic en "Local Storage" para expandir y ver su contenido.

Puedes hacer clic en los distintos elementos para ver el par clave-valor correspondiente.

Beneficios de usar el Local Storage

Los siguientes son algunos de los beneficios que tiene el local storage sobre otros mecanismos de almacenamiento que existen en el mundo del desarrollo actual.

1. Persistencia de la información: Al usar el local storage, la información almacenada se mantiene incluso cuando el usuario cierra la pestaña o el navegador. Esto es útil para guardar preferencias de usuario, ajustes y otra información importante porque le que ayuda a que el usuario tenga una experiencia sin fricciones.
2. Acceso sin conexión: Puedes usar el local storage como medio para almacenar información que luego puede ser recuperada aún con internet limitada o sin conexión. Esto hace que sea una herramienta útil para aplicaciones como lectores de noticias, de productividad, y otras, que dependen de almacenar información para posibilitar el uso sin conexión,
3. Más capacidad para almacenamiento: Comparado con otros medios de almacenamiento, el local storage tiene una capacidad relativamente alta. Por ejemplo, las cookies tienen un límite de 4 kilobytes por dominio, pero el local storage puede almacenar hasta 5 megabytes de información por dominio.

Limitaciones de usar el Local Storage

1. Almacena solo cadenas de textos: Como vimos más arriba, el local storage solo almacena cadenas. Si bien puedes usar los métodos JSON stringify y parse para trabajar, muchos desarrolladores prefieren no hacerlo, ya que lleva a escribir bloques complejos de código, difíciles de depurar.
2. Seguridad: La información almacenada en el local storage puede ser susceptible a ataques de vulnerabilidad como el cross-site scripting (XSS). Por eso, debes ser cuidadoso cuando trabajes con información sensible y analizar cuestiones relacionadas con la seguridad. De ser necesario, considera otras alternativas al local storage.
3. No accesible para usar con web workers: Al ser el local storage parte del objeto Window, está atado al hilo de ejecución principal del sitio web. Esto significa que no puedes utilizar el local storage si corres scripts en segundo plano como web workers.

Conclusión

El local storage es una herramienta de los navegadores actuales que les facilita a los desarrolladores web la tarea almacenar y persistir información entre sesiones de navegación.

Comparado con las cookies, el local storage ofrece mayores capacidades de almacenaje. También, no depende de procesos del lado del servidor, a diferencia de las cookies.

En este artículo, has aprendido sobre cómo usar el local storage. Vimos como almacenar, recuperar y borrar información del local storage. También has aprendido sobre algunos beneficios de usar el local storage para tu proyecto y algunas de sus limitaciones.

¡Gracias por leer y feliz codeo! Para más tutoriales en detalle, puedes suscribirte a mi canal de YouTube.

¡Hola y bienvenidos al mundo del Análisis de Datos! Si estás pensando en una carrera dentro de este campo, estás en buenas manos. El Análisis de Datos es un campo emocionante y en constante crecimiento, que últimamente está cobrando importancia en nuestro mundo actual impulsado por datos.

Seamos sinceros,  actualmente nos estamos ahogando en información. Desde publicaciones de redes sociales a transacciones financieras, pasando hasta por historias clínicas, no hay nada que nos permita hacer un filtro.

Aquí es donde aparecen los analistas de datos. Ellos son quienes nos ayudan a entender los datos y convertirlos en conocimiento valioso.

Y ese conocimiento puede ser innovador. Puede ayudar a las empresas a mejorar sus productos y servicios, a los Estados a tomar decisiones informadas sobre políticas, y a las personas a hacer mejores elecciones para su vida personal y profesional.

Pero no es solamente sobre el impacto. El Análisis de Datos también puede ser bastante lucrativo. De acuerdo con estudios recientes, el sueldo promedio en E.E.U.U es de alrededor de USD 70.000 al año. Y puede ser aún mayor de acuerdo si tenemos en cuenta la experiencia de la persona.

Por supuesto, como cualquier profesión, el Análisis de Datos tiene sus desafíos. Existe ese conjunto de datos que nos produce dolor de cabeza, la amenaza siempre latente del síndrome del impostor, y los debates infinitos sobre cuál es el mejor lenguaje de programación o herramienta de visualización de datos. Pero, si te gustan los desafíos, este podría ser campo para tí.

Entonces, si estás tratando de convertirte en un analista de datos, este artículo es para tí. Con suerte, te ahorrará mucho tiempo y esfuerzo para que no desperdicies tu tiempo en aprender cosas irrelevantes como me pasó a mí.

Paso 1: Investiga el rol de Analista de Datos

¿Estás pensando en convertirte en analista de datos? ¡Fantástico! Empecemos por comprender de qué se trata el rol antes de continuar.

Verás, el trabajo de un analista es mucho más que hacer cuentas y crear cuadros (aunque eso también puede ser bastante interesante). El trabajo implica aprovechar la información para encontrar ideas y resolver problemas. Esto significa hacer las preguntas correctas, organizar y evaluar la información y explicar tus conclusiones a otros.

Algunas de las habilidades básicas y actividades que un analista de datos realiza incluyen:

• Recolectar y analizar grandes grupos de datos para identificar patrones, tendencias, o cualquier otro conocimiento que pueda ayudar a tomar decisiones de negocios informadas.
• Usar herramientas y técnicas de estadística para obtener conocimiento de los datos.
• Desarrollar e implementar de sistemas de recolección de datos y otras estrategias para optimizar la eficiencia y la calidad de los datos.
• Colaborar con otros equipos para identificar necesidades de negocios y desarrollar soluciones usando datos para resolverlas.
• Comunicar las conclusiones a las partes interesadas, de una manera clara y accionable.

Así que si no eres un prodigio de la matemática o un genio de la computación, no te preocupes. La estadística, la informática y los negocios son sólo algunas de las numerosas disciplinas que se incorporan al tema multidisciplinar del análisis de datos. A quien le guste aprender, resolver problemas y hacer una diferencia puede disfrutar de esta disciplina.

Entonces, ¿dónde puedes encontrar información adicional sobre lo que hace un analista de datos? Puede empezar por consultar los numerosos recursos gratuitos disponibles en internet.

Muchos blogs, podcasts y canales de YouTube ofrecen contenido informativo y entretenido sobre el análisis de datos. Voy a dejar abajo algunos canales de YouTube que me han ayudado a lo largo de los años.

Para obtener una idea de las habilidades y cualidades que requiere el rol, puedes conectar con otros analistas de datos, ir a reuniones o seminarios, y hasta mirar descripciones del puesto.

No te olvides de tener cuenta si trabajar con datos es algo que disfrutas. ¿Te gusta encontrar patrones y resolver acertijos? ¿Quieres hacer del mundo un lugar mejor? Si la respuesta es sí, entonces el análisis de datos puede ser tu carrera ideal.

El primer paso en tu camino es entender lo que hace un analista de datos. Disfruta el camino, tomate tu tiempo y no dudes preguntar.

Paso 2: Explora los requisitos para el rol de Analista de Datos

Ahora que ya sabes de qué se trata el rol de analista de datos, es momento de empezar a mirar qué es lo que buscan los empleadores. Al fin y al cabo, querrás asegurarte de que tus habilidades y conocimientos son lo que se necesita en el mercado laboral.

Pero antes de que empieces a asustarte por no tener demasiada experiencia, tienes que saber que cada empresa es distinta. Algunas priorizan las habilidades de programación, mientras que otras valoran la comunicación y la perspicacia empresarial. Por eso es importante que hagas tu propia investigación para saber qué habilidades y conocimientos específicos están en demanda dentro de tu industria o empresa soñada.

¿Cómo puedes encontrar esta información? Por ejemplo, un buen lugar es mirar ofertas de empleo y descripciones de puesto en sitios como LinkedIn, Indeed, o Glassdoor. Esto puede ayudarte a darte una idea de los requisitos y conocimientos para distintos roles de analista de datos.

Algunos ejemplos de lo que una oferta laboral puede incluir son:

• Conocimiento en SQL y experiencia  trabajando con grandes conjunto de datos.
• Experiencia en Python y herramientas de visualización de datos como Tableau o Power BI.
• Fuertes habilidades analíticas y capacidad de sacar conclusiones a partir de datos complejos.
• Experiencia en análisis estadístico y técnicas de modelado de datos.
• Excelente habilidad para comunicar conclusiones complejas a audiencias técnicas y no técnicas.

¡Pero no te detengas ahí! También puedes contactar a personas que estén trabajando en el sector o que tengan puestos que te interesen. Pregúntales sobre su experiencia y qué habilidades, ellos consideran que son las más importantes para ser exitoso en su rol. Quizás hasta quieras tener alguna entrevista para informarte más sobre la industria u obtener consejos sobre cómo empezar.

Y hablando de empezar, es importante recordar que no hay ningún sustituto para la experiencia práctica. Si bien es tentador pasar horas mirando tutoriales, aprenderás mucho más rápido y de forma efectiva creando cosas y trabajando con proyectos de análisis de datos reales.

Por eso, tomate tu tiempo para analizar los requisitos de un puesto, pero no te olvides de seguir perfeccionando tus habilidades y obtener experiencia práctica. Con poco esfuerzo, pero mucha curiosidad, estarás en camino de convertirte un analista de datos exitoso.

Paso 3: Sentirse cómodo con las matemáticas y las estadísticas

Ok, sé lo que estás pensando ¿Matemática y Estadística? ¡Oh, no!

Pero escúchame antes de que te vayas corriendo. Para que un analista de datos pueda entender los datos y obtener conclusiones valiosas de ellos, es esencial que tenga un conocimiento básico de estos conceptos.

¿Qué conceptos básicos y fórmulas estadísticas debes saber?

Para empezar, hay medidas de tendencia central conocidas como media, mediana y moda, que pueden darte una idea del valor típico en un conjunto de datos. Debes saber cómo calcularlas.

La desviación típica es una medida que se utiliza para saber cuánto difiere la distribución de los datos de la media, y debes saber cómo calcularla.

Para poder encontrar relaciones entre variables y generar predicciones basadas en esas asociaciones, también debes estar familiarizado con correlación y regresión.

Pero no es solamente saber sobre números. También debes tener un conocimiento básico de álgebra lineal, ya que se utiliza en distintas formas de análisis de datos. Aquí tiene un curso para estudiar a fondo y su libro de texto ,en inglés, para que puedas empezar.

Quizás necesites matrices para modificar y manipular datos o quizás necesites usar regresión lineal (en inglés) para predecir valores futuros basados en tendencias históricas.

Si no tienes un conocimiento sólido en Matemática, esto puede parecer difícil. ¡Pero no te preocupes! Hay muchos recursos disponibles para ayudarte a aprender.

Por ejemplo, la Academia Khan ofrece lecciones y ejercicios de práctica de Matemática y Estadística. Si prefieres libros, "Ciencia de Datos para principiantes" ("Data Science for Beginners", en inglés) de Andrew Park es un recurso excelente que explica principios matemáticos y estadísticos de manera accesible.

freeCodeCamp está desarrollando un programa de Matemática sobre el cual puedes leer aquí ,en inglés.

Y aquí tienes una guía ,en inglés, sobre los conocimientos de Estadística que necesitas saber para entrar al campo de la ciencia de datos y desarrollarte en disciplinas como Machine Learning.

La clave es empezar de a poco y gradualmente ir ampliando tus conocimientos. No tengas miedo de hacer preguntas o de buscar ayuda cuando lo necesites. Con un poco de práctica y perseverancia, descubrirás que la Matemática y la Estadística son realmente divertidas (¡de en serio!).

Paso 4:  Domina Excel para analizar datos

Excel es una herramienta esencial dentro del arsenal de un analista de datos. Es prácticamente usado por todas las empresas que existen y dominarlo te ayudará a limpiar, manipular y analizar datos fácilmente.

Con Excel puedes crear fórmulas y funciones que hagan cálculos, tablas dinámicas y cuadros para visualizar datos, y usar herramientas de análisis de datos para hacer predicciones e identificar patrones. Excel es bastante útil para hacer análisis de regresión, predicciones y análisis de escenarios.

Si realmente quieres convertirte en un analista de datos, es esencial que domines Excel. Por suerte, hay muchos recursos disponibles en línea, en inglés, para que aprendas: ExcelIsFun, Excel Chandoo, Tutorials Point, Ashutosh Kumar , y MyOnlineTrainingHub en YouTube.

También estos cursos, en inglés, te ayudarán a sacarle provecho a Excel.

1. Introducción al Análisis de Datos usando Excel , por Coursera
2. Análisis de Datos con Python para usuarios de Excel, en el canal de YouTube de freeCodeCamp
3. Desarrollo de habilidades en Excel para especialización en negocios ,por Coursera
4. Analizando y mostrando datos con Excel por EdX

Recuerda, Excel es solo una herramienta dentro de tu caja de herramientas para el análisis de datos. Pero es la más importante y la cual usaras diariamente como analista de datos. Al dominar Excel, estarás más que preparado para realizar cualquier tarea relacionada con datos que llegue a tus manos.

Pasemos a la siguiente habilidad, que también es la más importante que necesitarás como analista de datos.

Paso 5: Domina SQL para extracción de datos

SQL (por sus siglas en inglés Structured Query Language) es una herramienta importante en el análisis de datos. Como analista de datos, una de tus principales tareas será la de extraer datos de bases de datos y SQL es el lenguaje que se utiliza para hacerlo.

SQL es más que hacer queries básicas como SELECT, FROM y WHERE.
Es un lenguaje complejo que te permite manipular y transformar datos en numerosas maneras. SQL se usa para juntar datos de varias tables, filtrado y agregado de información, además de para crear nuevas tablas y visualizaciones.

Para ser un analista de datos eficaz, es esencial que domines SQL. Debes poder escribir queries, crear tablas y entender cómo optimizar el desempeño de tus queries.

Por suerte, hay muchos recursos disponibles para que aprendas SQL. Algunos de los mejores recursos para empezar son Khan Academy SQL, W3Schools, SQLZoo, SQLbolt, Luke Barousse, Alex the Analyst, Microsoft Power Tools y juegos basados en SQL como SQL Island (en alemán, pero está traducido al inglés) y SQL Murder (en inglés)

Además, hay muchos cursos en línea, en inglés, y libros disponibles para que puedas aprender SQL en detalle. Aquí tienes algunos para que empieces:

1. Aprende SQL y Bases de Datos- Curso completo para principiantes
2. Plan de Estudios sobre Base de Datos Relacionales de freeCodeCamp
3. Colección de cursos gratuitos sobre base de datos relacionales

Al dominar SQL, podrás obtener conocimientos valiosos de bases de datos y manipular datos de manera que ofrezcan valiosos conocimientos de negocio.

Paso 6: Aprende Python para Análisis de Datos

Es sabido que hay mucha especulación sobre si es necesario que un analista de datos necesita Python -algunos dicen que si mientras otros dicen que no.

En mi opinión, me gustaría decir que depende de la empresa en la que trabajes - pero saber Python es una ventaja ya que es uno de los lenguajes de programación más usado en el mundo de la ciencia de datos. Python es conocido por su simplicidad, facilidad para leerse y versatilidad, convirtiéndolo en una elección popular entre los analistas de datos.

Python tiene una gran cantidad de librerías y herramientas que hacen que el Análisis de Datos sea más fácil, como Panda para manipulación de datos y análisis, NumPy para trabajar con arrays, y Matplotlib para visualización de datos. También permite la automatización de tareas, lo que hace al análisis de datos más eficiente y eficaz.Aprender Python para Análisis de Datos es una gran inversión para tu carrera como analista de datos. No solo te permitirá trabajar con librerías poderosas, sino que también te abrirá muchas más oportunidades para trabajar con grandes conjuntos de datos y análisis más complejos.

Hay muchos recursos disponibles para que aprendas Python, desde cursos gratuitos hasta programas en línea pagos y libros. Algunos recursos disponibles en inglés son freeCodeCamp, DataCamp, CodeBasis, Programming with Mosh and Microsoft Learn.

Al aprender Python, podrás realizar análisis de datos más complejos, automatizar tareas y trabajar con un mayor rango de conjuntos de datos, convirtiéndote en un recurso valioso dentro de cualquier empresa orientada a datos.

Paso 7: Domina una herramienta de visualización de datos

Como analista de datos, es esencial que puedas comunicar tus conclusiones de manera clara y concisa. Una forma de hacer esto es a través de la visualización de datos. Herramientas de visualización de datos como PowerBI y Tableau pueden ayudarte a crear cuadros interactivos, gráficos y tableros de control para que otros entiendan tus conclusiones de manera fácil. Hablaremos sobre ellas dentro de un momento.

Aquí tienes un curso, en inglés, de Tableau para análisis de datos y visualización de datos para darle un vistazo.

Mientras que SQL es bueno para peticionar y manipular datos, no sirve para mostrar completamente tus datos. Y aquí es donde una herramienta de visualización de datos entra en juego. Estas herramientas permiten transformar tus datos en visualizaciones valiosas y fácil de entender que puedes compartir con aquellos interesados.

Puedes aprender lo básico de la visualización de datos en detalle con este curso gratuito y en inglés, disponible en el canal de YouTube de freeCodeCamp.

PowerBI es una gran elección para visualización de datos ya que es fácil de aprender e integrar con otros productos de Microsoft. Esto la convierte en una herramienta ideal para aquellas empresas que usan Microsoft Office. Tableau también es otra elección popular que tiene una gran comunidad de usuarios y con un gran abanico de opciones.

Aprender un herramienta de visualización de datos como PowerBI o Tableau te permitirá crear visualizaciones atrapantes que te ayudarán a entender mejor tus datos y comunicar las conclusiones a otros. Hay muchos cursos en línea y tutoriales disponibles que te ayudarán a aprender estas herramientas, como el curso de capacitación oficial de Microsoft PowerBI y los cursos de capacitación de Tableau

Al dominar una herramienta de visualización de datos, podrás aprender a crear visualizaciones atrapante e interactivas que te permitan entender mejor tus datos y comunicar las conclusiones a otros, convirtiéndote en un recurso valioso para cualquier empresa orientada a datos.

También puedes sumergirte en aprender otras herramientas de visualización de datos como D3.js- Aquí tienes un curso para empezar, en inglés.

Paso 8: Conecta con otros Analistas de Datos y Desarrolladores.

Relacionarse con otros es una parte esencial de cualquier profesión y el campo del Análisis de Datos no es la excepción. Al conectar con otros analistas de datos y desarrolladores, podrás aprender de sus experiencias, obtener información clave sobre las últimas tecnologías y tendencias dentro de la industria y hasta quizás encontrar oportunidades de trabajo.

Aquí tienes distintas formas de conectar con otros dentro de este campo:

1. Asiste a eventos de la industria: Busca conferencias, encuentros y cualquier otro evento relacionado con el análisis de datos y asiste a ellos. Es una gran forma de conocer a otras personas dentro del campo y aprender sobre nuevos avances y tecnologías.

2. Únete a comunidades online: Existen muchas comunidades online para analista de datos y desarrolladores como foros, grupos de LinkedIn y en redes sociales. Únete a ellos y participa en las conversaciones para conectar con otros profesionales.

3. Habla con otros profesionales: No temas contactar a otros analistas de datos y desarrolladores a través de sus redes sociales, correo electrónico o en persona si los ves en algún evento. Preséntate, pide consejos y construye amistades.

Recuerda que al conectar con otros, tú también debes estar abierto a ofrecer ayuda o dar consejos. Al crear una red de contactos fuerte dentro del campo del Análisis de Datos, puedes potenciar tus oportunidades laborales, además de estar al día con las últimas tecnologías y tendencias dentro de la industria.

Paso 9: No te olvides de las "habilidades blandas"

Una habilidad final que creo que debes trabajar antes de convertirte en un gran analista de datos son tus habilidades blandas. Esto incluye tus habilidades para comunicarte, resolver problemas, etc.

Una vez que lo hagas, haz proyectos y no dejes de practicar.

Conclusión.

Convertirte en un analista de datos, requiere dedicación, trabajo duro y ser apasionado por el Análisis de Datos. Si sigues los pasos que fui detallando en esta guía, conseguirás el conocimiento y las habilidades necesarias para convertirte en un analista de datos exitoso.

Desde entender el rol de analista de datos, hasta dominar SQL y Python, pasando por conectar con otros desarrolladores, cada paso es esencial para alcanzar el éxito en este campo.

Recuerda ser curioso, no dejar de aprender y siempre ser flexible para adaptarse a nuevas tecnologías y metodologías. Con determinación y persistencia, podrás convertirte en un analista de datos competente y desbloquear un mundo de excitantes oportunidades laborales.

El texto tachado se usa en diversas situaciones:

• Para indicar que una porción o bloque de texto debe ser borrado.
• Para indicar que una porción o bloque de texto está desactualizado.
• Para mostrar que una tarea fue realizado, sobre todo en listas de tareas.
• Para transmitir un mensaje gracioso o sin relación con lo que se está escribiendo, etc.

En este artículo, vamos a ver cómo tachar texto cuando usamos Google Docs.

Cómo hacer texto tachado en Google Docs

Existen dos métodos para tachar texto en Google Docs – usar un atajo de teclado o usar la opción de tachado del menú Formato en la barra de menús de Google Docs.

Cómo tachar un texto en Google Docs usando un atajo de teclado

Estos son los pasos a seguir si usamos un atajo de teclado para tachar un texto en Google Docs:

• Abrir Google Docs y crea un documento nuevo.
• Escribe algo de texto en tu documento.
• Selecciona el texto que has escrito.

• En Windows, presiona Alt + Shift + 5.
• En Mac, presiona ⌘ + Shift + X.

Y ahí lo tienes, hemos usado un atajo de teclado para tachar texto en Google Docs.

Cómo tachar texto en Google Docs usando el menú de Formato.

En esta sección, veremos cómo podemos tachar texto en Google Docs usando la opción de Formato. Aquí están los pasos:

• Abrir Google Docs y crea un documento nuevo.
• Escribe algo de texto en tu documento
• Selecciona el texto que has escrito.
• Haz clic en el menú Formato en la barra de menús.
• Haz clic en Texto.
• Haz clic en la opción Tachar.

Después de hacer esto, tu texto debería estar tachado.

Conclusión

En este artículo, hemos hablado sobre los textos tachados en la escritura, sus usos y cómo tachar texto en Google Docs.

¡Muchas gracias por leer! Enserio ¡muchas gracias por leer! :)

React es una librería popular de Front-end que los desarrolladores usan para crear aplicaciones. Si quieres crear aplicaciones listas para poner en producción seguramente vas a necesitar saber integrar APIs a tu aplicación de React en algún momento de tu carrera.

Cada desarrollador que quiera construir aplicaciones web robustas y modernas con React tiene que saber cómo consumir APIs para traer información a su aplicación de React.

En esta guía para principiantes, vamos a aprender como consumir una API RESTful en React trayendo, borrando o agregando información.  También veremos dos formas de consumir APIs RESTful y cómo usarla con React Hooks.

Aquí tienes un scrim interactivo sobre cómo consumir APIs REST en React:

¿Qué es una API REST?

Si alguna vez haz pasado tiempo programando o investigando sobre programación, seguramente te haz cruzado con el término "API".

API significa "Interfaz de Programación de Aplicación", por sus siglas en inglés. Es un medio que permite la comunicación programática entre diferentes aplicaciones y que devuelve una respuesta en tiempo real.

En los 2000, Roy Fielding definió el concepto REST como un estilo de arquitectura y metodología usado frecuentemente en el desarrollo de servicios de internet, como, por ejemplo, los sistemas de hipermedia distribuidos. Es un acrónimo que significa, en inglés, Transferencia de Estado Representacional.

Cuando se hace una petición a través de una API REST, ésta envía, al peticionante o a un endpoint, una representación del estado actual del recurso. Esta representación del estado puede tomar la forma de archivo JSON (JavaScript Object Notation), XML, o HTML.

JSON es el formato de archivo más usado porque no depende de ningún lenguaje de programación y puede ser leído tanto por personas como por computadoras.

Por ejemplo:

[
   {
      "userId": 1,
      "id": 1,
      "title": "sunt excepturi",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur "
   },
   {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil"
   }
]

Cómo consumir APIs REST en React

Es posible consumir APIs REST dentro de una aplicación React de distintas maneras, pero en esta guía veremos dos de las formas más populares: Axios (un cliente HTTP basado en promesas) y Fetch API (una API web ya incluida en el navegador).

Nota: Para poder comprender esta guía en su totalidad, deberías saber JavaScript, React y React Hooks, ya que son conocimientos que vamos a usar aquí.

Antes de explicar cómo consumir APIs, es importante entender que consumir APIs en React es muy diferente de como se lo hace en JavaScript. Esto es porque estas peticiones ahora se hacen en un componente de React.

En nuestro caso, vamos a usar componentes funcionales, lo que significa que vamos a necesitar 2 Hooks de React importantes:

• Hook useEffect: En React, las peticiones a las API se hacen dentro del hook useEffect(). El hook muestra la información cuando la aplicación es montada o después de se alcanza un estado específico. Esta es la sintaxis general que vamos a usar:

useEffect(() => {
    // data fetching here
}, []);

• Hook useState: Al pedir información, debemos crear un estado en el cual se va a guardar el resultado de la petición. También lo podemos guardar en un herramienta de administración de estado como Redux o en un objeto de contexto. Para hacerlo más simple, vamos a guardar el resultado de la petición en el estado local de React.

const [posts, setPosts] = useState([]);

Vamos a meternos en la parte jugosa de esta guía, donde aprenderemos como obtener, agregar, y borrar información usando la API JSONPlaceholder. Este conocimiento es aplicable a cualquier tipo de API, ya que esta guía está orientada a principiantes.

Cómo consumir APIs con la Fetch API

La Fetch API es un método JavaScript para obtener recursos de un servidor o de un endpoint de una API. Como ya viene incluida en el navegador, no es necesario instalar dependencias o paquetes.

El método fetch() requiere de un argumento obligatorio que es la URL o dirección al recurso que queremos obtener. Luego, este se convierte en una promesa para que podamos manejar su éxito o error a través de los métodos then() y catch().

Una petición fetch básica es muy simple de escribir y se parece al código de abajo. Lo que estamos haciendo es simplemente obtener información desde una URL que devuelve esa información como un JSON y luego mostrándola en la consola:

fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
   .then(response => response.json())
   .then(data => console.log(data));

La respuesta por defecto es una respuesta HTTP estándar más que un JSON, pero podemos ver la información como un objeto JSON al usar el método json() incluida en la respuesta.

Cómo realizar una petición GET en React con Fetch API

Es posible usar el método HTTP GET para obtener información desde un endpoint.

Como dijimos antes, Fetch API solo acepta un argumento obligatorio, lo cual es cierto. También acepta un argumento option, el cual es opcional, específicamente cuando se usa el método GET, el cual es el método predeterminado. Pero para los otros métodos como POST y DELETE, es necesario usar el método con un arreglo:

fetch(url, {
    method: "GET" // default, so we can ignore
})

Hasta el momento aprendimos cómo funcionan las cosas, ahora vamos a poner todo lo que aprendimos junto y hacer una petición get para obtener información de nuestra API.

De nuevo, volvemos a usar la API gratuita JSONPlaceholder para obtener una lista de posts dentro de nuestra aplicación:

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

const App = () => {
   const [posts, setPosts] = useState([]);
   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then((response) => response.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

return (
   // ... consume here
);
};

Creamos un estado en el código anterior para guardar la información que obtuvimos de la API así la podemos usar después en nuestra aplicación. También podemos establecer el valor predeterminado a un arreglo vacío.

const [posts, setPosts] = useState([]);

Como la parte más importante de then() ocurrió en el hook useState, la información/los posteos se obtienen apenas carga la aplicación. La petición fetch produce una promesa que puede ser aceptada o rechazada:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10').then(
      (response) => console.log(response)
   );
}, []);

Esta respuesta contiene una gran cantidad de información, como el código de estado, texto, y otra información que vamos a necesitar después para manejar los errores.

Hasta ahora, hemos manejado la resolución de una promesa con .then(), pero nos devolvió un objeto como respuesta que no es lo que queremos. Por esos, necesitamos transformar el objeto respuesta al formato JSON con el método .then(). Esto también nos devuelve una promesa para que podamos obtener la información usando el segundo .then().

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      });
}, []);

Si miramos la consola, vamos a ver que obtuvimos 10 posts de nuestra API, lo que también especificamos anteriormente en el estado.

Esto no está completo porque solamente estuvimos manejando la resolución favorable de la promesa pero no su rechazo, lo cual haremos con el método .catch():

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

Hasta ahora vimos como hacer una petición GET. Esta puede ser consumida dentro de nuestra aplicación, a través de un bucle que recorra nuestro arreglo:

const App = () => {
// ...

   return (
   <div className="posts-container">
      {posts.map((post) => {
         return (
            <div className="post-card" key={post.id}>
               <h2 className="post-title">{post.title}</h2>
               <p className="post-body">{post.body}</p>
               <div className="button">
               <div className="delete-btn">Delete</div>
               </div>
            </div>
         );
      })}
   </div>
   );
};

export default App;

Cómo realizar una petición POST en React con Fetch API

Es posible usar el método HTTP POST para enviar información a un endpoint. Funciona de manera similar a la petición GET, la única diferencia está en que es necesario agregar el método y dos parámetros adicionales al objeto opcional:

const addPosts = async (title, body) => {
await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
   title: title,
   body: body,
   userId: Math.random().toString(36).slice(2),
}),
headers: {
   'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((data) => {
   setPosts((posts) => [data, ...posts]);
   setTitle('');
   setBody('');
})
.catch((err) => {
   console.log(err.message);
});
};

Los dos parámetros que pueden parecer extraños son el body (cuerpo) y el header (encabezado).

En el body va a estar toda la información que queremos enviar a la API, la cual primero debemos convertir en una cadena de texto porque estamos enviando información al navegador. El header nos dice el tipo de información, que es siempre el mismo cuando consumimos APIs REST. También creamos el estado que va a guardar ésta nueva información y distribuir la información restante por el arreglo.

Si miramos el método addPost() que creamos, va a necesitar que esa información venga de un formulario o de otro lado. En nuestro caso, hice un formulario, obtuve la información mediante estados. Al enviar el formulario, la información es incluida en el método:

import React, { useState, useEffect } from 'react';
const App = () => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
// ...
const addPosts = async (title, body) => {
   await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
      .then((response) => response.json())
      .then((data) => {
         setPosts((posts) => [data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

const handleSubmit = (e) => {
   e.preventDefault();
   addPosts(title, body);
};    

return (
   <div className="app">
      <div className="add-post-container">
         <form onSubmit={handleSubmit}>
            <input type="text" className="form-control" value={title}
               onChange={(e) => setTitle(e.target.value)}
            />
            <textarea name="" className="form-control" id="" cols="10" rows="8" 
               value={body} onChange={(e) => setBody(e.target.value)} 
            ></textarea>
            <button type="submit">Add Post</button>
         </form>
      </div>
      {/* ... */}
   </div>
);
};

export default App;

Cómo realizar una petición DELETE en React con Fetch API

Es posible usar el método HTTP DELETE para eliminar información de un endpoint. También funciona de forma similar a la petición GET, la principal diferencia radica en que tenemos que agregar el método:

const deletePost = async (id) => {
await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
   method: 'DELETE',
}).then((response) => {
   if (response.status === 200) {
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   } else {
      return;
   }
});
};

Este código se dispara al hacer click en el botón. De esta manera, obtenemos el id del post específico en el cual se hizo click.

Este método hace que se elimine la información del resultado devuelto. Esto permite que la información sea borrada de la API, pero no inmediatamente de la UI y por eso necesitamos agregar un filtro que elimine la información también de ahí. Para cada ítem del bucle, tú botón de borrar debería lucir así:

const App = () => {
// ...

   return (
   <div className="posts-container">
      {posts.map((post) => {
         return (
            <div className="post-card" key={post.id}>
               {/* ... */}
               <div className="button">
                  <div className="delete-btn" onClick={() => deletePost(post.id)}>
                     Delete
                  </div>
               </div>    
            </div>
         );
      })}
   </div>
   );
};

export default App;

Cómo usar Async/Await en Fetch API

Hasta ahora vimos como hacer peticiones fetch usando la sintaxis de las promesas, que puede ser confusa a veces. Y después, el encadenamiento con .then(). Podemos evitar el encadenamiento usando Async/await y así escribir código más legible.

Para usar async/awaiy, primero hay que escribir async en la función. Después, al hacer una petición y esperar un respuesta, hay que agregar la sintaxis await delante de la función para esperar a que la promesa devuelva el resultado.

Cuando usamos async/await, todas las peticiones Fetch se ven así:

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

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with fetch API
   useEffect(() => {
      const fetchPost = async () => {
         const response = await fetch(
            'https://jsonplaceholder.typicode.com/posts?_limit=10'
         );
         const data = await response.json();
         console.log(data);
         setPosts(data);
      };
      fetchPost();
   }, []);

   // Delete with fetchAPI
   const deletePost = async (id) => {
      let response = await fetch(
         `https://jsonplaceholder.typicode.com/posts/${id}`,
         {
            method: 'DELETE',
         }
      );
      if (response.status === 200) {
         setPosts(
            posts.filter((post) => {
               return post.id !== id;
            })
         );
      } else {
         return;
      }
   };

   // Post with fetchAPI
   const addPosts = async (title, body) => {
      let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      });
      let data = await response.json();
      setPosts((posts) => [data, ...posts]);
      setTitle('');
      setBody('');
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

Aquí tienes un scrim interactivo para guiarte:

Cómo manejar errores con Fetch API

En esta sección, vamos a ver como manejar error de manera tradicional y con async/await.

Para manejar los errores con Fetch API, podemos usar la misma información de la respuesta o usar la sentencia try/catch si usamos async/await.

Primero veamos cómo podemos hacerlo con Fetch API:

const fetchPost = () => {
fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
   .then((response) => {
      if (!response.ok) {
         throw Error(response.statusText);
      }
      return response.json();
   })
   .then((data) => {
      console.log(data);
      setPosts(data);
   })
   .catch((err) => {
      console.log(err.message);
   });
};

Aquí (en inglés) puedes leer más sobre errores en Fetch API.

Para async/await podemos usar  try y catch de esta forma:

const fetchPost = async () => {
   try {
      const response = await fetch(
         'https://jsonplaceholder.typicode.com/posts?_limit=10'
      );
      const data = await response.json();
      setPosts(data);
   } catch (error) {
      console.log(error);
   }
};

Cómo consumir APIs con Axios:

Axios es un  cliente HTTP basado en promesas que hace más simple el envío de peticiones HTTP asíncronas a endpoints REST. El endpoint en nuestro caso la API de posts de JSONPlaceholder, a la cual haremos peticiones  GET, POST, y DELETE.

Aquí tienes un scrim interactivo que te guiará por los distintos pasos mientras lees:

Cómo instalar y configurar Axios

A diferencia de Fetch API, Axios no viene incluido en el navegador por lo que necesitamos instalarlo en nuestro proyecto para poder utilizarlo.

Para poder instalar Axios en tu proyecto necesitas correr el siguiente comando:

npm install axios

Una vez que lo instalamos correctamente, podemos crear una instancia, lo cual es opcional pero recomendable ya que nos evita repeticiones innecesarias.

Para crear una instancia, usamos el método .create(), que podemos usarlo para especificar información como la URL y posibles encabezados:

import axios from "axios";

const client = axios.create({
   baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

Cómo realizar una petición GET en React con Axios

Usaremos la instancia que creamos anterior para realizar la petición GET. Todo lo que necesitamos es establecer parámetros, si los hay, y obtener la respuesta como un JSON por defecto.

A diferencia del método Fetch API, no se necesita una option para declarar el método. Solamente agregamos el método a la instancia y hacemos la petición.

useEffect(() => {
   client.get('?_limit=10').then((response) => {
      setPosts(response.data);
   });
}, []);

Cómo hacer una petición POST en React con Axios

Como dijimos antes, se puede usar el método POST para enviar información a un endpoint. Funciona de manera similar a la petición  GET, siendo la principal diferencia el requesito de incluir el método y una option para guardar la información que estamos enviando:

const addPosts = (title, body) => {
   client
      .post('', {
         title: title,
         body: body,
      })
      .then((response) => {
         setPosts((posts) => [response.data, ...posts]);
      });
};

Cómo hacer una petición DELETE en React con Axios

Podemos hacer peticiones delete con el método delete, el cual obtiene el id  y lo borra de la API. También usaremos el método filter para borrarlo de la UI, como lo hicimos con el método Fetch API:

const deletePost = (id) => {
   client.delete(`${id}`);
   setPosts(
      posts.filter((post) => {
         return post.id !== id;
      })
   );
};

Cómo usar Async/Await en Axios

Hasta ahora hemos visto con hacer peticiones con Axios usando la sintaxis para promesas. Pero ahora veamos cómo usar async/await para escribir menos código y evitar el encadenamiento con .then()

Cuando usemos async/await, todas nuestras peticiones Axios se verán así:

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

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with Axios
   useEffect(() => {
      const fetchPost = async () => {
         let response = await client.get('?_limit=10');
         setPosts(response.data);
      };
      fetchPost();
   }, []);

   // Delete with Axios
   const deletePost = async (id) => {
      await client.delete(`${id}`);
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   };

   // Post with Axios
   const addPosts = async (title, body) => {
      let response = await client.post('', {
         title: title,
         body: body,
      });
      setPosts((posts) => [response.data, ...posts]);
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

Cómo manejar errores con Axios

Para peticiones con Axios basadas en promesas, podemos usar los métodos .then() y .catch () , pero para async/awit, podemos usar el bloque try...catch. Esto es muy similar a como lo implementamos en Fetch API.
El bloque try...catch se verá así:

const fetchPost = async () => {
   try {
      let response = await client.get('?_limit=10');
      setPosts(response.data);
   } catch (error) {
      console.log(error);
   }
};

Aquí (en inglés) puedes leer más sobre como manejar errores en Axios.

Fetch API vs Axios

Quizás hayas notado algunas diferencias, pero vamos a ponerlas en un tabla así podemos comparar Fetch y Axios.

Estas distinciones le ayudarán a decidir qué método utilizar para un proyecto concreto. Entre estas distinciones se encuentran:

Conclusión

En esta guía aprendimos a consumir APIs REST en React con Fetch API y Axios.

Esto te ayudará a empezar a consumir API en React, y desde ahí podrás consumir información de manera más complejas y manipular APIs de la manera que quieras.

¡Embárcate en un viaje de aprendizaje! Explora más de 200 artículos escritos por expertos en desarrollo web. Pégale un vistazo a mí blog (en inglés) con contenido interesante escrito por mí.