retroceso NPM (Cómo funciona para los desarrolladores)

Introducción

La gestión de estados es un aspecto crítico en la construcción de aplicaciones React robustas y escalables. Entre varias bibliotecas de gestión de estado, Recoil ha emergido como una opción poderosa y flexible. Desarrollado por Facebook como un marco experimental de gestión de estados, Recoil simplifica escenarios complejos de gestión de estados y proporciona una API más intuitiva para gestionar estados globales en aplicaciones React.

Este artículo explora los conceptos básicos de Recoil, sus ventajas y cómo empezar a utilizarlo en un proyecto React. También, revisaremos la biblioteca IronPDF Node.js PDF Generation Tools para generar PDFs a partir de URLs de sitios web o HTML.

¿Qué es el paquete Recoil?

Recoil es una librería de gestión de estados para React que pretende solventar las limitaciones de soluciones existentes como Redux y Context API. Proporciona una forma más directa y eficaz de gestionar el estado compartido en las aplicaciones React, ofreciendo funciones como actualizaciones detalladas, gestión de estado asíncrona y fácil integración con el modo concurrente de React.

Conceptos básicos

Recoil introduce varios conceptos clave que la diferencian de otras bibliotecas de gestión de estados:

1. Átomos: Los átomos son las unidades fundamentales de estado en Recoil. Representan fragmentos de estado que pueden compartirse entre componentes. Cuando cambia el valor de un átomo, cualquier componente que se suscriba a ese átomo se vuelve a renderizar automáticamente.

2. Selectores: Los selectores son funciones puras que derivan estado de uno o más átomos u otros selectores. Pueden ser síncronas o asíncronas, lo que permite complejas derivaciones de estados y lógicas de obtención de datos.

3. RecoilRoot: Este componente se utiliza para proporcionar el contexto de Recoil al árbol de componentes. Es similar al Context Provider de React y debe envolver la parte de la aplicación que utiliza el estado Recoil.

Ventajas del retroceso

Recoil ofrece varias ventajas sobre otras soluciones de gestión de estados:

• Actualizaciones Granulares: A diferencia de Redux, donde cualquier cambio de estado puede desencadenar re-renderizaciones en múltiples componentes, Recoil asegura que solo los componentes suscritos al estado cambiado se re-rendericen, lo que conduce a un mejor rendimiento.
• Compatibilidad con el Modo Concurrente: Recoil está diseñado para funcionar sin problemas con el modo concurrente de React, permitiendo experiencias de usuario más fluidas con características como la fragmentación temporal y suspense.
• Estado Asíncrono Fácil: El manejo del estado asíncrono, como la obtención de datos, es más sencillo en Recoil debido al soporte incorporado para selectores asíncronos.
• Escalabilidad: Recoil se adapta bien a aplicaciones grandes gracias a su enfoque modular de gestión de estado.
• Esfuerzo de la comunidad: Bajo una licencia MIT, Recoil es de uso libre, modificable y distribuible. Esto fomenta la adopción generalizada y la colaboración entre los desarrolladores, lo que permite a cualquiera construir libremente sobre ella, contribuyendo correcciones de errores, y el intercambio de modificaciones en aras de mejorar Recoil. El desarrollo de Recoil tiene lugar en su repositorio GitHub de código abierto.

Primeros pasos con Recoil

Para empezar a utilizar Recoil en una aplicación React, sigue estos pasos:

npm Install Recoil

Para instalar la última versión estable, ejecute el siguiente comando, ya que el paquete Recoil vive en npm:

npm install recoil

Configurar RecoilRoot

Envuelve tu aplicación con el componente RecoilRoot.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

Definir Átomos y Selectores:

import { atom, selector } from 'recoil';
export const textState = atom({
  key: 'textState',
  default: '',
});
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

import { atom, selector } from 'recoil';
export const textState = atom({
  key: 'textState',
  default: '',
});
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

Usa Átomos y Selectores en Componentes:

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';
function CharacterCounter() {
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);
  const onChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div>
      <p>Character Count: {count}</p>
    </div>
  );
}
export default CharacterCounter;

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';
function CharacterCounter() {
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);
  const onChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div>
      <p>Character Count: {count}</p>
    </div>
  );
}
export default CharacterCounter;

Introducción a IronPDF

IronPDF es una popular biblioteca de generación de PDF utilizada para generar, editar y convertir documentos PDF. El paquete npm IronPDF está diseñado específicamente para aplicaciones Node.js. Estas son algunas de las principales características y detalles del paquete npm IronPDF:

Características principales

Conversión de HTML a PDF

Convierta contenidos HTML en documentos PDF sin esfuerzo. Esta función es especialmente útil para generar PDF dinámicos a partir de contenidos web.

Conversión de URL a PDF

Genere archivos PDF directamente a partir de URL, lo que le permitirá capturar el contenido de páginas web y guardarlo como archivos PDF mediante programación.

Manipulación de PDF

Fusione, divida y manipule documentos PDF existentes con facilidad. IronPDF ofrece funciones como añadir páginas, dividir documentos, etc.

Seguridad PDF

Proteja sus documentos PDF cifrándolos con contraseñas o aplicando firmas digitales. IronPDF ofrece opciones para proteger sus documentos confidenciales del acceso no autorizado.

Salida de alta calidad

Produzca documentos PDF de alta calidad con una representación precisa del texto, las imágenes y el formato. IronPDF garantiza que los PDF generados mantengan la fidelidad al contenido original.

Compatibilidad multiplataforma

IronPDF es compatible con varias plataformas, como Windows, Linux y macOS, lo que lo hace apto para una amplia gama de entornos de desarrollo.

Integración sencilla

Integre fácilmente IronPDF en sus aplicaciones Node.js utilizando su paquete npm. La API está bien documentada, lo que facilita la incorporación de funciones de generación de PDF a sus proyectos.

Instalación

Para instalar el paquete IronPDF NPM, utilice el siguiente comando:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

Generación de PDF con IronPDF y Recoil

Instalar dependencias: Primero, crea un nuevo proyecto de Next.js (si aún no lo has hecho). Consulte este tutorial de configuración de Next.js para obtener instrucciones detalladas, o use el siguiente comando:

npx create-next-app@latest recoil-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

A continuación, vaya al directorio de su proyecto:

cd recoil-pdf

Instale los paquetes necesarios:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoil

Añade el archivo 'app.js' para incluir Recoil como se indica a continuación:

import React from 'react';
import { RecoilRoot } from 'recoil';
export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

import React from 'react';
import { RecoilRoot } from 'recoil';
export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

API de Generación de PDF: El primer paso es crear una API de backend para generar el documento PDF. Dado que IronPDF sólo se ejecuta en el servidor, necesitamos crear una API a la que llamar cuando los usuarios quieran generar un PDF. Cree un archivo en la ruta pages/api/pdf.js y añada el siguiente contenido de código:

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

IronPDF requiere una clave de licencia, obténgala desde la Página de Licencia de Prueba de IronPDF y colóquela en el código anterior.

Añade el siguiente código para aceptar una URL del usuario, generar un PDF a partir de la URL y guardarlo en el archivo index.js:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React from 'react';
import {
  atom,
  useRecoilState,
} from 'recoil';
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});
export default function Home() {
  const [text, setText] = useRecoilState(textState);
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+text);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
      setText(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Recoil NPM and Generate PDF Using IronPDF</h1>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React from 'react';
import {
  atom,
  useRecoilState,
} from 'recoil';
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});
export default function Home() {
  const [text, setText] = useRecoilState(textState);
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+text);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
      setText(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Recoil NPM and Generate PDF Using IronPDF</h1>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

Código Explicación

1. Crea un estado átomo utilizando 'const textState = atom()' de Recoil, que se utilizará para almacenar la URL ingresada por el usuario en el campo de entrada.

2. Añada los componentes Encabezado, Entrada y Botón.

3. Ejecute la aplicación con 'yarn dev' y, a continuación, introduzca la URL del sitio web que desea que se genere como PDF.

4. Al hacer clic en el botón "Generar PDF", se genera el PDF solicitado. Como se muestra a continuación:

Salida

Aspecto del sitio web:

El PDF que se generó cuando se proporcionó la URL https://ironpdf.com/nodejs/:

Licencia IronPDF

La IronPDF Trial License permite a los usuarios probar sus amplias características antes de la compra. Más detalles sobre las licencias perpetuas se pueden encontrar en la página de Información de Licencias de IronPDF.

Coloque aquí la clave de licencia:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

Conclusión

Recoil proporciona un enfoque moderno y eficiente para la gestión de estados en aplicaciones React. Sus actualizaciones detalladas, su compatibilidad con el modo concurrente y su facilidad para gestionar el estado asíncrono la convierten en una opción atractiva para los desarrolladores que desean crear aplicaciones React escalables y eficaces.

Al aprovechar los átomos y selectores, Recoil permite una forma modular e intuitiva de gestionar el estado global, mejorando la experiencia general de desarrollo. IronPDF Node.js Library npm es un paquete empresarial con funcionalidades de generación y lectura de PDF. Los desarrolladores pueden integrar fácilmente estas funcionalidades en sus aplicaciones utilizando la biblioteca IronPDF.