Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronPDF for Node.js
  2. Blog do IronPDF for Node.js
  3. Ajuda do Node
  4. recuo NPM
AJUDA DO NODE

Recuo NPM (Como funciona para desenvolvedores)

Darrius Serrant
Darrius Serrant
Atualizado:

O gerenciamento de estado é um aspecto crucial na construção de aplicações React robustas e escaláveis. Dentre as diversas bibliotecas de gerenciamento de estados, o Recoil se destaca como uma opção poderosa e flexível. Desenvolvido pelo Facebook como uma estrutura experimental de gerenciamento de estado, o Recoil simplifica cenários complexos de gerenciamento de estado e fornece uma API mais intuitiva para gerenciar estados globais em aplicativos React.

Este artigo explora os conceitos fundamentais do Recoil, seus benefícios e como começar a usá-lo em um projeto React. Além disso, vamos analisar a biblioteca IronPDF Node.js PDF Generation Tools para gerar PDFs a partir de URLs de sites ou HTML.

O que é o Pacote Recoil?

Recoil é uma biblioteca de gerenciamento de estado para React que visa solucionar as limitações de soluções existentes como Redux e Context API. Ele oferece uma maneira mais simples e eficiente de gerenciar o estado compartilhado em aplicações React, disponibilizando recursos como atualizações detalhadas, gerenciamento assíncrono de estado e fácil integração com o modo concorrente do React.

Conceitos básicos

Recoil introduz vários conceitos-chave que o diferenciam de outras bibliotecas de gerenciamento de estado:

  1. Átomos: Os átomos são as unidades fundamentais de estado no Recuo. Representam partes do estado que podem ser compartilhadas entre componentes. Quando o valor de um átomo muda, qualquer componente que esteja inscrito nesse átomo é renderizado novamente automaticamente.
  2. Seletores: Seletores são funções puras que derivam o estado de um ou mais átomos ou outros seletores. Podem ser síncronas ou assíncronas, permitindo derivações de estado complexas e lógica de busca de dados.
  3. RecoilRoot: Este componente é usado para fornecer o contexto de recuo à árvore de componentes. É semelhante ao Context Provider do React e deve envolver a parte da aplicação que utiliza o estado do Recoil.

Benefícios do Recuo

O Recoil oferece diversas vantagens em relação a outras soluções de gerenciamento de estado:

  • Atualizações precisas: Ao contrário do Redux, onde qualquer mudança de estado pode desencadear novas renderizações em vários componentes, o Recoil garante que apenas os componentes inscritos no estado alterado sejam renderizados novamente, resultando em melhor desempenho.
  • Compatibilidade com o Modo Concorrente: O Recoil foi projetado para funcionar perfeitamente com o modo concorrente do React, permitindo experiências de usuário mais fluidas com recursos como divisão de tempo e suspense.
  • Estado assíncrono simplificado: Lidar com estado assíncrono, como a busca de dados, é mais simples no Recoil devido ao suporte integrado para seletores assíncronos.
  • Escalabilidade: O Recoil apresenta boa escalabilidade para aplicações de grande porte devido à sua abordagem modular de gerenciamento de estado.
  • Esforço da comunidade: Sob a licença MIT, o Recoil é de uso, modificação e distribuição gratuitos. Isso incentiva a adoção generalizada e a colaboração entre os desenvolvedores, permitindo que qualquer pessoa construa sobre ele livremente, contribuindo com correções de bugs e compartilhando modificações para aprimorar o Recoil. O desenvolvimento do Recoil ocorre em seu repositório de código aberto no GitHub .

Primeiros passos com o recuo

Para começar a usar o Recoil em uma aplicação React, siga estes passos:

npm Instalar Recoil

Para instalar a versão estável mais recente, execute o seguinte comando, pois o pacote Recoil está disponível no npm:

npm install recoil
npm install recoil
SHELL

Configurar RecoilRoot

Envolva sua aplicação com o 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>
);
JAVASCRIPT

Defina Átomos e Seletores

import { atom, selector } from 'recoil';

// Atom to hold the text state
export const textState = atom({
  key: 'textState',
  default: '',
});

// Selector to derive the character count from the textState atom
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});
import { atom, selector } from 'recoil';

// Atom to hold the text state
export const textState = atom({
  key: 'textState',
  default: '',
});

// Selector to derive the character count from the textState atom
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});
JAVASCRIPT

Utilizar átomos e seletores em componentes

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';

function CharacterCounter() {
  // Use Recoil hooks to manage atom and selector state
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);

  // Handle text change
  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <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() {
  // Use Recoil hooks to manage atom and selector state
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);

  // Handle text change
  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <p>Character Count: {count}</p>
    </div>
  );
}

export default CharacterCounter;
JAVASCRIPT

Introdução ao IronPDF

recoil NPM (Como funciona para desenvolvedores): Figura 1 - Página web do IronPDF

IronPDF é uma biblioteca popular para geração, edição e conversão de documentos PDF. O pacote IronPDF do npm foi projetado especificamente para aplicações Node.js Aqui estão alguns recursos e detalhes importantes sobre o pacote npm IronPDF :

Principais características

Conversão de HTML para PDF

Converta conteúdo HTML em documentos PDF sem esforço. Essa funcionalidade é particularmente útil para gerar PDFs dinâmicos a partir de conteúdo da web.

Conversão de URL para PDF

Gere PDFs diretamente a partir de URLs, permitindo capturar o conteúdo de páginas da web e salvá-los como arquivos PDF programaticamente.

Manipulação de PDF

Mescle, divida e manipule documentos PDF existentes com facilidade. O IronPDF oferece funcionalidades como anexar páginas, dividir documentos e muito mais.

Segurança de PDF

Proteja seus documentos PDF criptografando-os com senhas ou aplicando assinaturas digitais. O IronPDF oferece opções para proteger seus documentos confidenciais contra acesso não autorizado.

Saída de alta qualidade

Produza documentos PDF de alta qualidade com renderização precisa de texto, imagens e formatação. O IronPDF garante que os PDFs gerados mantenham a fidelidade ao conteúdo original.

Compatibilidade entre plataformas

O IronPDF é compatível com diversas plataformas, incluindo Windows, Linux e macOS, tornando-o adequado para uma ampla gama de ambientes de desenvolvimento.

Integração simples

Integre facilmente o IronPDF em suas aplicações Node.js usando o pacote npm. A API é bem documentada, o que facilita a incorporação de recursos de geração de PDF em seus projetos.

Instalação

Para instalar o pacote NPM do IronPDF , utilize o seguinte comando:

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

Geração de PDFs usando IronPDF e Recoil

Instale as dependências: Primeiro, crie um novo projeto Next.js (caso ainda não tenha feito isso). Consulte este tutorial de configuração do Next.js para obter instruções detalhadas ou use o seguinte 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"
SHELL

Em seguida, navegue até o diretório do seu projeto:

cd recoil-pdf
cd recoil-pdf
SHELL

Instale os pacotes necessários:

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

Adicione o arquivo 'app.js' para incluir o Recoil, conforme abaixo:

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

API de geração de PDF: O primeiro passo é criar uma API de backend para gerar o documento PDF. Como o IronPDF só funciona no servidor, precisamos criar uma API para ser chamada quando os usuários quiserem gerar um PDF. Crie um arquivo no caminho pages/api/pdf.js e adicione o seguinte 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();
    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();
    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();
  }
}
JAVASCRIPT

O IronPDF requer uma chave de licença. Obtenha-a na página de licença de avaliação do IronPDF e insira-a no código acima.

Adicione o código abaixo para aceitar uma URL do usuário, gerar um PDF a partir da URL e salvá-lo no arquivo index.js:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React from 'react';
import { atom, useRecoilState } from 'recoil';

// Atom to store user input URL
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);

  // Function to generate PDF from URL
  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);
    }
  };

  // Handle input change
  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>
        <input type="text" value={text} onChange={handleChange} placeholder="Enter URL" />
        <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';

// Atom to store user input URL
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);

  // Function to generate PDF from URL
  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);
    }
  };

  // Handle input change
  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>
        <input type="text" value={text} onChange={handleChange} placeholder="Enter URL" />
        <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>
  );
}
JAVASCRIPT

Explicação do código

  1. Crie um estado de átomo usando const textState = atom() do Recoil, que será usado para armazenar a URL inserida pelo usuário no campo de entrada.
  2. Adicione os componentes de cabeçalho, entrada e botão.
  3. Execute o aplicativo usando yarn dev e, em seguida, insira o URL do site que você deseja gerar como um PDF.
  4. Ao clicar no botão 'Gerar PDF', o PDF solicitado será gerado. Conforme mostrado abaixo:

Saída

Como é o site:

recoil NPM (Como funciona para desenvolvedores): Figura 2 - Site para geração de PDFs

O PDF gerado quando a URL https://ironpdf.com/nodejs/ foi fornecida:

recoil NPM (Como funciona para desenvolvedores): Figura 3 - PDF gerado com o IronPDF

Licença IronPDF

recoil NPM (Como funciona para desenvolvedores): Figura 4 - Página de licenciamento do IronPDF

A licença de avaliação do IronPDF permite que os usuários experimentem seus diversos recursos antes de comprá-la. Mais detalhes sobre o licenciamento perpétuo podem ser encontrados na página de Informações sobre Licenciamento do IronPDF .

Insira a chave de licença aqui:

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

Conclusão

Recoil oferece uma abordagem moderna e eficiente para o gerenciamento de estado em aplicações React. Suas atualizações detalhadas, compatibilidade com o modo concorrente e facilidade no gerenciamento de estados assíncronos fazem dele uma escolha atraente para desenvolvedores que buscam criar aplicativos React escaláveis ​​e de alto desempenho.

Ao utilizar átomos e seletores, o Recoil permite uma forma modular e intuitiva de gerenciar o estado global, aprimorando a experiência geral de desenvolvimento. A biblioteca IronPDF for Node.js (npm) é um pacote empresarial com funcionalidades de geração e leitura de PDFs. Os desenvolvedores podem integrar facilmente essas funcionalidades em seus aplicativos usando a biblioteca IronPDF .

Darrius Serrant
Darrius Serrant
  Converse agora mesmo com a equipe de engenharia.
Engenheiro de Software Full Stack (WebOps)

Darrius Serrant é bacharel em Ciência da Computação pela Universidade de Miami e trabalha como Engenheiro de Marketing WebOps Full Stack na Iron Software. Atraído por programação desde jovem, ele via a computação como algo misterioso e acessível ao mesmo tempo, tornando-a o meio ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Comece seu teste gratuito

Equipe de suporte de ferro

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim