AIDE SUR LES NœUDS

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

Publié août 13, 2024
Partager:

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 la IronPDF Bibliothèque de génération de PDF pour 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.
  • Community Effort: 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, ce qui permet à tout le monde de construire librement sur cette base, en apportant des corrections de bogues et en partageant des modifications dans le but d'améliorer 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, lancez la commande suivante, car le paquet recoil se trouve dans npm :

npm install recoil
npm install recoil
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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>
);
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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;
  },
});
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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;
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

Introduction à IronPDF

recul NPM (Comment ça marche pour les développeurs) : Figure 1 - Page web d'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
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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). Référer ici pour un tutoriel sur la mise en place de ce système, 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"
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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

cd recoil-pdf
cd recoil-pdf
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

Installez les paquets nécessaires :

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
VB   C#

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>
  );
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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();
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

IronPDF nécessite une clé de licence, à obtenir auprès de ici 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>
    );
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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. Ajouter les composants Heading, Input et Button

  3. Exécutez l'application en utilisant 'yarn dev', puis entrez l'URL du site web que vous souhaitez voir généré en tant que 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

A quoi ressemble le site web :

recul NPM (Comment ça marche pour les développeurs) : Figure 2 - Site web pour générer des PDF

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

recul NPM (Comment ça marche pour les développeurs) : Figure 3 - PDF produit à partir de la génération avec IronPDF

Licence d'IronPDF

nPM de recul (Comment ça marche pour les développeurs) : Figure 4 - Page de licence d'IronPDF

LesIronPDF afin de permettre aux utilisateurs de tester 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éenne license 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";
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

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. IronPDF 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.

< PRÉCÉDENT
uuid NPM (Comment ça marche pour les développeurs)
SUIVANT >
recharts NPM (Comment ça marche pour les développeurs)

Prêt à commencer ? Version : 2024.9 vient de paraître

Installation gratuite de npm Voir les licences > ;