Forem: Julio César Retamal Rojas

7 bibliotecas para React

Julio César Retamal Rojas — Sun, 28 Jan 2024 16:16:44 +0000

Aquí tienes una lista de 7 bibliotecas que son imprescindibles para cualquier programador de React:

Sonner: Facilita la muestra de notificaciones en tu aplicación con configuración sencilla en solo 3 líneas de código. Puedes encontrar más información en https://sonner.emilkowal.ski

⌘K (CmdK): Agrega navegación por teclado a tu sitio web para mejorar la experiencia de usuario. Descubre cómo implementarlo en https://cmdk.paco.me

Iconos Animados: Eleva el atractivo visual de tu página web con esta colección de iconos que incluyen animaciones. Explora las posibilidades en https://react.useanimations.com

Calendario Reactivo: Renderiza un calendario interactivo para navegar meses y días, totalmente personalizable para que se adapte al estilo de tu página. Más detalles en https://react-day-picker.js.org

FilePond: Simplifica la carga de archivos mediante la funcionalidad de arrastrar y soltar. Compatible no solo con React, sino también con Vue y Angular. Descúbrelo en https://pqina.nl/filepond

React Hook Form: Optimiza tus formularios y reduce la cantidad de código necesario con este conjunto de componentes eficiente. Obtén más información en https://react-hook-form.com

Vault: Integra un componente de caja flotante (drawer) configurable que puede deslizarse desde la parte inferior o lateral de la página. Descubre las opciones de personalización en https://vaul.emilkowal.ski

Esta selección de bibliotecas proporciona herramientas esenciales para mejorar la funcionalidad y apariencia de tus aplicaciones React. ¡Aprovéchalas para llevar tus proyectos al siguiente nivel!

Cloud Computing by Categories

Julio César Retamal Rojas — Sat, 23 Dec 2023 15:00:53 +0000

Here is a list of the types of cloud computing services and the name of the product according to the companies AWS, Azure and Google.

Fix Error 404 when Refreshing a route with React Router

Julio César Retamal Rojas — Sun, 03 Dec 2023 13:49:10 +0000

Introduction:

When we develop web applications with React and use React Router for navigation, we often face the 404 error problem when refreshing the page on specific paths. This is due to how web servers handle requests and how React Router handles client side routes.

Problem:

When using React Router, the navigation between pages is done client-side, which means that the routes are handled by JavaScript in the browser. However, when refreshing the page or directly accessing a specific URL, some web servers may not understand how to handle these routes.

Solutions:

1. Configuration for Apache:

If your application is hosted on an Apache server, you can solve this problem by creating an .htaccess file with the following content:

<IfModule mod_rewrite.c>
  RewriteEngine On 
  RewriteBase / 
  RewriteRule ^index\.html$ - [L] 
  RewriteCond %{REQUEST_FILENAME} !-f 
  RewriteCond %{REQUEST_FILENAME} !-d 
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

This code ensures that all requests are redirected to index.html, where React Router will take care of handling the routes.

2. Configuration for Netlify:

In the case of Netlify, you can create a _redirects file in the root of your project with the following content:

/*  /index.html 200

This tells Netlify to redirect all requests to index.html and respond with a 200 (OK) code.

3. Configuration for Vercel:

If you decide to host your application on Vercel, you need to configure the vercel.json file with the following content:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

This configuration ensures that Vercel redirects all requests to index.html, thus ensuring proper handling of React Router routes.

Conclusion:

When addressing the 404 error challenge when refreshing a page in a React application with React Router, it is critical to understand how web servers work and how we can configure them to handle routes in a way that is compatible with client-side routing. Whether for Apache, Netlify or Vercel servers, these configurations offer effective solutions to ensure smooth operation of your React application.