AIDE NODE

recoil NPM (Comment ça marche pour les développeurs)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Mis à jour:juin 22, 2025

La gestion d'état est un aspect critique pour construire des applications React robustes et évolutives. Parmi les différentes bibliothèques de gestion d'état, Recoil s'est imposé comme une option puissante et flexible. Développé par Facebook en tant que cadre expérimental de gestion d'état, Recoil simplifie les scénarios complexes de gestion d'état et offre une API plus intuitive pour gérer les états globaux dans les applications React.

Cet article explore les concepts de base de Recoil, ses avantages, et comment commencer avec dans un projet React. De plus, nous examinerons la bibliothèque IronPDF Node.js PDF Generation Tools pour générer des PDFs à partir des URL de site web ou de HTML.

Qu'est-ce que le paquet Recoil ?

Recoil est une bibliothèque de gestion d'état pour React qui vise à résoudre les limitations des solutions existantes comme Redux et Context API. Il offre un moyen plus direct et performant de gérer l'état partagé dans les applications React, proposant des fonctionnalités telles que des mises à jour détaillées, la gestion d'état asynchrone, et une intégration facile avec le mode concurrent de React.

Concepts de base

Recoil introduit plusieurs concepts clés qui le différencient des autres bibliothèques de gestion d'état :

Atomes : Les atomes sont des unités fondamentales de l'état dans Recoil. Ils représentent des morceaux d'état pouvant être partagés entre les composants. Lorsqu'une valeur d'atome change, tout composant qui s'abonne à cet atome se re-rend automatiquement.
Sélecteurs : Les sélecteurs sont des fonctions pures qui dérivent l'état d'un ou plusieurs atomes ou autres sélecteurs. Ils peuvent être synchrones ou asynchrones, permettant des dérivations complexes d'état et une logique de récupération de données.
RecoilRoot : Ce composant est utilisé pour fournir le contexte Recoil à l'arbre des composants. Il est semblable au Provider de contexte de React et doit englober la partie de l'application qui utilise l'état Recoil.

Avantages de Recoil

Recoil offre plusieurs avantages par rapport aux autres solutions de gestion d'état :

Mises à jour détaillées : Contrairement à Redux, où tout changement d'état peut déclencher des re-rendus dans plusieurs composants, Recoil permet que seuls les composants abonnés à l'état modifié se re-rendent, ce qui améliore les performances.
Compatibilité avec le mode concurrent : Recoil est conçu pour fonctionner parfaitement avec le mode concurrent de React, permettant des expériences utilisateur plus fluides avec des fonctionnalités telles que la découpe temporelle et le suspense.
État asynchrone facile : La gestion de l'état asynchrone, telle que la récupération de données, est simplifiée dans Recoil grâce au support intégré des sélecteurs asynchrones.
Évolutivité : Recoil évolue bien pour les grandes applications grâce à son approche modulaire de gestion d'état.
Effort communautaire : Sous une licence MIT, Recoil est libre d'utilisation, modifiable, et distribuable. Cela encourage une adoption large et une collaboration parmi les développeurs, permettant à quiconque de construire librement sur cette base, d'apporter des corrections de bugs et de partager des modifications pour améliorer Recoil. Ce développement de Recoil se fait dans leur dépôt open-source GitHub.

Commencer avec Recoil

Pour commencer à utiliser Recoil dans une application React, suivez ces étapes :

npm Installer Recoil

Pour installer la dernière version stable, exécutez la commande suivante, car le paquet Recoil se trouve dans npm :

npm install recoil

npm install recoil

SHELL

Configurer RecoilRoot

Enveloppez votre application avec le composant 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

Définir les Atomes et Sélecteurs

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

Utiliser les Atomes et Sélecteurs dans les Composants

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

Introduction à IronPDF

recoil NPM (Comment ça fonctionne pour les développeurs) : Figure 1 - page web IronPDF

IronPDF est une bibliothèque populaire de génération de PDF utilisée pour générer, éditer et convertir des documents PDF. Le paquet npm IronPDF est spécialement conçu pour les applications Node.js. Voici quelques caractéristiques clés et détails sur le paquet npm IronPDF :

Fonctionnalités clés

Conversion HTML en PDF

Convertissez le contenu HTML en documents PDF en toute simplicité. Cette fonctionnalité est particulièrement utile pour générer des PDF dynamiques à partir de contenu web.

Conversion URL en PDF

Générez des PDF directement à partir d'URL, vous permettant de capturer le contenu des pages web et de les enregistrer sous forme de fichiers PDF de manière programmatique.

Manipulation de PDF

Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF propose des fonctionnalités telles que l'ajout de pages, la division de documents, et plus.

Sécurité des PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre l'accès non autorisé.

Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et du formatage. IronPDF garantit que vos PDF générés maintiennent la fidélité au contenu original.

Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à une large gamme d'environnements de développement.

Intégration simple

Intégrez facilement IronPDF dans vos applications Node.js en utilisant son paquet npm. L'API est bien documentée, ce qui facilite l'incorporation des capacités de génération de PDF dans vos projets.

Installation

Pour installer le package NPM IronPDF, utilisez la commande suivante :

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

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

SHELL

Générer des PDFs en utilisant IronPDF et Recoil

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js (si vous ne l'avez pas déjà fait). Consultez ce tutoriel de configuration Next.js pour des instructions détaillées, ou utilisez la commande suivante :

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

Ensuite, naviguez vers votre répertoire de projet :

cd recoil-pdf

cd recoil-pdf

SHELL

Installez les paquets requis :

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

Ajoutez le fichier 'app.js' pour inclure Recoil comme ci-dessous :

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 génération de PDF : La première étape consiste à créer une API de backend pour générer le document PDF. Puisque IronPDF ne s'exécute que côté serveur, nous devons créer une API pour appeler lorsque les utilisateurs veulent générer un PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu de code ci-dessous :

// 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

IronPDF nécessite une clé de licence, obtenez-la depuis la page de licence d'essai IronPDF et placez-la dans le code ci-dessus.

Ajoutez le code ci-dessous pour accepter une URL de l'utilisateur, générer un PDF à partir de l'URL, et l'enregistrer dans le fichier 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

Explication du Code

Créez un état d'atome en utilisant const textState = atom() de Recoil, qui sera utilisé pour stocker l'URL saisie par l'utilisateur dans le champ de saisie.
Ajoutez les composants Titre, Saisie, et Bouton.
Exécutez l'application avec yarn dev, puis entrez l'URL du site web que vous souhaitez générer en tant que PDF.
Lorsque le bouton 'Générer un PDF' est cliqué, le PDF demandé est généré. Comme montré ci-dessous :

Sortie

À quoi ressemble le site web :

recoil NPM (Comment ça fonctionne pour les développeurs) : Figure 2 - Site web générant des PDFs

Le PDF qui a été généré lorsque l'URL https://ironpdf.com/nodejs/ a été donnée :

recoil NPM (Comment ça fonctionne pour les développeurs) : Figure 3 - PDF sorti du générateur avec IronPDF

Licence IronPDF

recoil NPM (Comment ça fonctionne pour les développeurs) : Figure 4 - page de licence IronPDF

La licence d'essai IronPDF permet aux utilisateurs de découvrir ses fonctionnalités étendues avant achat. Plus de détails sur la licence perpétuelle peuvent être trouvés sur la page d'informations sur les licences IronPDF.

Placez la clé de licence ici :

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

Conclusion

Recoil fournit une approche moderne et efficace de la gestion d'état dans les applications React. Ses mises à jour détaillées, sa compatibilité avec le mode concurrent, et sa facilité à gérer l'état asynchrone en font un choix convaincant pour les développeurs cherchant à construire des applications React évolutives et performantes.

En exploitant les atomes et sélecteurs, Recoil permet une manière modulaire et intuitive de gérer l'état global, améliorant l'expérience globale de développement. IronPDF Node.js Library npm est un paquet d'entreprise avec des fonctionnalités de génération et de lecture de PDF. Les développeurs peuvent facilement intégrer ces fonctionnalités dans leurs applications en utilisant la bibliothèque IronPDF.

Darrius Serrant

Discutez maintenant avec l'équipe d'ingénierie

Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...