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 estatal, Recoil ha surgido como una opción potente 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. Además, examinaremos la IronPDF Biblioteca de generación de PDF para generar PDF a partir de URL 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 de estado fundamentales 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 el 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 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 detalladas: A diferencia de Redux, donde cualquier cambio de estado puede desencadenar re-renders en múltiples componentes, Recoil asegura que sólo los componentes suscritos al estado cambiado re-render, lo que lleva a un mejor rendimiento.
• Compatibilidad con el modo concurrente: Recoil está diseñado para funcionar a la perfección con el modo concurrente de React, lo que permite experiencias de usuario más fluidas con funciones como el corte de tiempo y el suspenso.
• Estado asíncrono fácil: Manejar el estado asíncrono, como la obtención de datos, es más simple en Recoil debido al soporte incorporado para selectores asíncronos.

• Escalabilidad: Recoil se adapta bien a grandes aplicaciones gracias a su enfoque modular de gestión de estados.

• Esfuerzo comunitario: bajo licencia MIT, recoil es libremente utilizable, modificable y distribuible. Esto fomenta la adopción generalizada y la colaboración entre desarrolladores, permitiendo que cualquiera pueda construir libremente sobre él, contribuyendo con correcciones de errores y compartiendo 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 Instalar Recoil

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

npm install recoil

npm install recoil

IRON VB CONVERTER ERROR developers@ironsoftware.com

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>
);

IRON VB CONVERTER ERROR developers@ironsoftware.com

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;
  },
});

IRON VB CONVERTER ERROR developers@ironsoftware.com

Utilizar átomos y selectores en los 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;

IRON VB CONVERTER ERROR developers@ironsoftware.com

Introducción a IronPDF

IronPDF es una conocida biblioteca de generación de PDF que se utiliza 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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Generación de PDF con IronPDF y Recoil

Instalar dependencias: Primero, crea un nuevo proyecto Next.js (si aún no lo ha hecho). Consulte aquí para un tutorial sobre cómo configurarlo, o utilice el siguiente comando:

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

cd recoil-pdf

cd recoil-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

Instale los paquetes necesarios:

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Añadir el archivo, 'app.js' para incluir retroceso como abajo:

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>
  );
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

API de generación de PDF: El primer paso es crear una API 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();
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

IronPDF requiere una clave de licencia, consígala en aquí y colócalo 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>
    );
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Código Explicación

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

2. Añadir los componentes Título, 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 dio la URL 'https://ironpdf.com/nodejs/':

Licencia IronPDF

EnIronPDF para que los usuarios puedan comprobar sus amplias funciones antes de comprarlo. Encontrará más información sobre las licencias perpetuas en la página licencia página.

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";

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 lo convierten en una opción atractiva para los desarrolladores que desean crear aplicaciones React escalables y de alto rendimiento.

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 npm es un paquete empresarial con funciones de generación y lectura de PDF. Los desarrolladores pueden integrar fácilmente estas funcionalidades en sus aplicaciones utilizando la biblioteca IronPDF.