Test dans un environnement réel
Test en production sans filigrane.
Fonctionne partout où vous en avez besoin.
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.
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.
Recoil introduit plusieurs concepts clés qui la différencient des autres bibliothèques de gestion des états :
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.
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.
Recoil offre plusieurs avantages par rapport à d'autres solutions de gestion de l'état :
Pour commencer à utiliser Recoil dans une application React, suivez les étapes suivantes :
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
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
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
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
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 :
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.
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.
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é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.
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.
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é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.
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
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
Ensuite, accédez au répertoire de votre projet :
cd recoil-pdf
cd recoil-pdf
IRON VB CONVERTER ERROR developers@ironsoftware.com
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
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
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
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
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.
Ajouter les composants Heading, Input et Button
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
A quoi ressemble le site web :
Le PDF généré lorsque l'URL "https://ironpdf.com/nodejs/" a été donnée :
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
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.
9 produits de l'API .NET pour vos documents de bureau