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

Introduction

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

Cet article explore les concepts fondamentaux de Recoil, ses avantages, et comment commencer à l'utiliser dans un projet React. Nous nous pencherons également sur laOutils de génération de PDF IronPDF for Node.js bibliothèque permettant de générer des PDF à partir d'URL de sites web ou de HTML.

Qu'est-ce que le Recoil Package ?

Recoil est une bibliothèque de gestion d'état pour React qui vise à répondre aux limites des solutions existantes comme Redux et Context API. Il fournit un moyen plus simple et plus performant de gérer l'état partagé dans les applications React, offrant des fonctionnalités telles que les mises à jour à grain fin, la gestion asynchrone de l'état et l'intégration facile avec le mode concurrent de React.

Concepts de base

Recoil introduit plusieurs concepts clés qui la différencient des autres bibliothèques de gestion des états :

1. Atomes : Les atomes sont les unités d'état fondamentales de Recoil. Ils représentent des éléments d'état qui peuvent être partagés entre les composants. Lorsque la valeur d'un atome change, tout composant qui s'abonne à cet atome se réoriente automatiquement.

2. Sélecteurs : Les sélecteurs sont des fonctions pures qui dérivent l'état d'un ou de plusieurs atomes ou d'autres sélecteurs. Ils peuvent être synchrones ou asynchrones, ce qui permet des dérivations d'état complexes et une logique d'extraction de données.

3. RecoilRoot : Ce composant est utilisé pour fournir le contexte Recoil à l'arbre des composants. Il est similaire au fournisseur de contexte de React et doit envelopper la partie de l'application qui utilise l'état Recoil.

Avantages du recul

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

• Mises à jour à grain fin : Contrairement à Redux, où tout changement d'état peut déclencher un nouveau rendu dans plusieurs composants, Recoil garantit que seuls les composants souscrits à l'état modifié sont rendus, ce qui améliore les performances.
• Compatibilité avec le mode simultané : Recoil est conçu pour fonctionner de manière transparente avec le mode concurrent de React, permettant des expériences utilisateur plus fluides avec des fonctionnalités telles que le découpage temporel et le suspense.
• Easy Asynchronous State : La gestion des états asynchrones, comme la récupération de données, est plus simple dans Recoil grâce à la prise en charge intégrée des sélecteurs asynchrones.
• Évolutivité : Recoil s'adapte bien aux grandes applications grâce à son approche modulaire de la gestion des états.
• Effort communautaire: Sous licence MIT, Recoil est librement utilisable, modifiable et distribuable. Cela encourage l'adoption généralisée et la collaboration entre les développeurs, permettant à chacun de construire librement sur cette base, en contribuant à la correction des bogues et en partageant les modifications dans l'intérêt de l'amélioration de Recoil. Le développement de Recoil se fait dans leur dépôt GitHub open-source.

Le recul : un premier pas vers l'avenir

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

npm Installer le recul

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

npm install recoil

Mise en place de 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>
);

Définir les atomes et les sélecteurs :

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

Utiliser des atomes et des sélecteurs dans les composants :

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;

Introduction à 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 package IronPDF npm est spécifiquement conçu pour les applications Node.js. Voici quelques fonctionnalités clés et détails sur le package npm IronPDF :

Caractéristiques principales

Conversion de HTML en PDF

Convertissez sans effort du contenu HTML en documents PDF. Cette fonction est particulièrement utile pour générer des PDF dynamiques à partir de contenus web.

Conversion d'URL en PDF

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

Manipulation des PDF

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

Sécurité 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 les accès non autorisés.

Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme. IronPDF veille à ce que les PDF générés restent fidèles au contenu original.

Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, notamment Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration simple

Intégrez facilement IronPDF à vos applications Node.js à l'aide de son package npm. L'API est bien documentée, ce qui facilite l'intégration des capacités de génération de PDF dans vos projets.

Installation

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

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

Générer des PDF à l'aide d'IronPDF et de Recoil

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js(si vous ne l'avez pas encore fait). Se référer à ce documentTutoriel d'installation de Next.js pour obtenir des instructions détaillées, cliquez sur le lien suivant 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"

Ensuite, accédez au répertoire de votre projet :

cd recoil-pdf

Installez les paquets nécessaires :

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

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

API de génération de PDF : La première étape consiste à créer une API pour générer le document PDF. Comme IronPDF ne fonctionne que côté serveur, nous devons créer une API à 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 du 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();
        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 nécessite une clé de licence, obtenez-la à partir de l'adresse suivantePage de licence d'essai d'IronPDF et le placer 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';
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>
    );
}

Explication du code

1. Créer un état atomique en utilisant 'const textState = atom()' de Recoil, qui sera utilisé pour stocker l'URL saisie par l'utilisateur dans le champ de saisie.

2. Ajoutez les composants Heading, Input et Button.

3. Lancez l'application en utilisant "yarn dev", puis saisissez l'URL du site web que vous souhaitez voir généré au format PDF.

4. Lorsque l'on clique sur le bouton "Générer le PDF", le PDF demandé est généré. Comme indiqué ci-dessous :

Sortie

À quoi ressemble le site web :

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

Licence d'IronPDF

LesLicence d'essai IronPDF l'outil de développement de logiciels permet aux utilisateurs de découvrir ses nombreuses fonctionnalités avant de l'acheter. De plus amples informations sur les licences perpétuelles sont disponibles sur le site web de la Commission européenneInformations sur les licences IronPDF page.

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

Conclusion

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

En s'appuyant sur les atomes et les sélecteurs, Recoil permet de gérer l'état global de manière modulaire et intuitive, améliorant ainsi l'expérience globale de développement. Bibliothèque IronPDF for Node.js npm est un paquetage 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.