recoil NPM (Wie es für Entwickler funktioniert)

Einführung

Die Zustandsverwaltung ist ein entscheidender Aspekt bei der Entwicklung robuster und skalierbarer React-Anwendungen. Unter verschiedenen staatlichen Verwaltungsbibliotheken, Rückspulen hat sich als leistungsfähige und flexible Option erwiesen. Recoil wurde von Facebook als experimentelles Framework für die Zustandsverwaltung entwickelt und vereinfacht komplexe Zustandsverwaltungsszenarien und bietet eine intuitivere API für die Verwaltung globaler Zustände in React-Anwendungen.

Dieser Artikel untersucht die Kernkonzepte von Recoil, seine Vorteile und wie man damit in einem React-Projekt anfängt. Außerdem werden wir uns mit dem IronPDF PDF-Generierungsbibliothek zur Erzeugung von PDFs aus Website-URLs oder HTML.

Was ist das Recoil-Paket?

Recoil ist eine Zustandsverwaltungsbibliothek für React, die darauf abzielt, die Grenzen bestehender Lösungen wie Redux und Context API zu überwinden. Es bietet einen einfacheren und performanteren Weg, um gemeinsame Zustände in React-Anwendungen zu verwalten. Es bietet Funktionen wie feinkörnige Updates, asynchrones Zustandsmanagement und eine einfache Integration mit dem Concurrent-Modus von React.

Zentrale Konzepte

Recoil führt mehrere Schlüsselkonzepte ein, die es von anderen Bibliotheken zur Zustandsverwaltung unterscheiden:

1. Atome: Atome sind die grundlegenden Zustandseinheiten in Recoil. Sie stellen Teile des Zustands dar, die von den Komponenten gemeinsam genutzt werden können. Wenn sich der Wert eines Atoms ändert, wird jede Komponente, die dieses Atom abonniert hat, automatisch neu dargestellt.

2. Selektoren: Selektoren sind reine Funktionen, die ihren Zustand von einem oder mehreren Atomen oder anderen Selektoren ableiten. Sie können synchron oder asynchron sein und ermöglichen komplexe Zustandsableitungen und Datenabruflogik.

3. RecoilRoot: Diese Komponente wird verwendet, um den Recoil-Kontext für den Komponentenbaum bereitzustellen. Er ähnelt dem Context Provider von React und muss den Teil der Anwendung umhüllen, der den Recoil-Status verwendet.

Vorteile von Recoil

Recoil bietet mehrere Vorteile gegenüber anderen Lösungen zur Zustandsverwaltung:

• Feingranulare Aktualisierungen: Im Gegensatz zu Redux, bei dem jede Zustandsänderung eine Neurenderung in mehreren Komponenten auslösen kann, stellt Recoil sicher, dass nur Komponenten, die den geänderten Zustand abonniert haben, neu gerendert werden, was zu einer besseren Leistung führt.
• Kompatibilität mit dem Concurrent-Modus: Recoil ist so konzipiert, dass es nahtlos mit dem Concurrent Mode von React zusammenarbeitet und mit Funktionen wie Time Slicing und Suspense eine reibungslosere Benutzererfahrung ermöglicht.
• Einfacher asynchroner Zustand: Die Handhabung asynchroner Zustände, wie z.B. das Abrufen von Daten, ist in Recoil dank der eingebauten Unterstützung für asynchrone Selektoren einfacher.
• Skalierbarkeit: Recoil ist aufgrund seines modularen Zustandsverwaltungsansatzes gut für große Anwendungen skalierbar.
• Community Effort: Unter der MIT-Lizenz ist recoil frei verwendbar, modifizierbar und verteilbar. Dies fördert die breite Akzeptanz und die Zusammenarbeit unter den Entwicklern, so dass jeder frei darauf aufbauen, Fehler beheben und Änderungen zur Verbesserung von Recoil weitergeben kann. Die Entwicklung von Recoil erfolgt in ihrem Open-Source-Repository Github.

Erste Schritte mit Recoil

Um Recoil in einer React-Anwendung zu verwenden, folgen Sie diesen Schritten:

npm Recoil installieren

Um die neueste stabile Version zu installieren, führen Sie den folgenden Befehl aus, da das recoil-Paket in npm enthalten ist:

npm install recoil

npm install recoil

IRON VB CONVERTER ERROR developers@ironsoftware.com

RecoilRoot einrichten

Umhüllen Sie Ihre Anwendung mit der RecoilRoot-Komponente.

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

Atome und Selektoren definieren:

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

Verwendung von Atomen und Selektoren in Komponenten:

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

Einführung in IronPDF

IronPDF ist eine beliebte Bibliothek zur PDF-Erzeugung, die zum Erstellen, Bearbeiten und Konvertieren von PDF-Dokumenten verwendet wird. Das IronPDF npm-Paket wurde speziell für Node.js-Anwendungen entwickelt. Hier sind einige wichtige Funktionen und Details über das IronPDF npm-Paket:

Wesentliche Merkmale

Konvertierung von HTML in PDF

Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.

Konvertierung von URL in PDF

Generieren Sie PDFs direkt aus URLs, so dass Sie den Inhalt von Webseiten erfassen und programmgesteuert als PDF-Dateien speichern können.

PDF-Bearbeitung

Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Aufteilen von Dokumenten und vieles mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder mit digitalen Signaturen versehen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

Hochwertiger Output

Erstellen Sie hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.

Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine breite Palette von Entwicklungsumgebungen.

Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, so dass es einfach ist, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Einrichtung

Um das NPM-Paket IronPDF zu installieren, verwenden Sie den folgenden Befehl:

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

Erzeugen von PDFs mit IronPDF und Recoil

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie es noch nicht getan haben). Siehe hier für eine Anleitung zum Einrichten dieser Funktion, oder verwenden Sie den folgenden Befehl:

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

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd recoil-pdf

cd recoil-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

Installieren Sie die erforderlichen Pakete:

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

Fügen Sie die Datei "app.js" hinzu, um den Rückstoß wie folgt einzuschließen:

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

PDF-Erzeugungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn Benutzer eine PDF-Datei erzeugen wollen. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den folgenden Code hinzu:

// 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 benötigt einen Lizenzschlüssel, den Sie unter hier und fügen Sie ihn in den obigen Code ein

Fügen Sie den folgenden Code hinzu, um eine URL vom Benutzer zu akzeptieren, eine PDF-Datei aus der URL zu erzeugen und sie in der Datei index.js zu speichern

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

Code Erläuterung

1. Erstellen eines Atomzustands mit 'const textState = atom()' von Recoil, die verwendet wird, um die vom Benutzer in das Eingabefeld eingegebene URL zu speichern.

2. Hinzufügen der Komponenten Überschrift, Eingabe und Schaltfläche

3. Führen Sie die Anwendung mit "yarn dev" aus, und geben Sie die URL der Website ein, die Sie als PDF-Datei generieren möchten

4. Wenn Sie auf die Schaltfläche "PDF generieren" klicken, wird die angeforderte PDF-Datei erstellt. Wie unten dargestellt:

Ausgabe

So sieht die Website aus:

Die PDF-Datei, die bei Angabe der URL "https://ironpdf.com/nodejs/" erzeugt wurde:

IronPDF-Lizenz

DieIronPDF lizenz, damit die Benutzer die umfangreichen Funktionen vor dem Kauf testen können. Weitere Einzelheiten zur unbefristeten Lizenzierung finden Sie auf der Website Lizenz seite.

Geben Sie hier den Lizenzschlüssel ein:

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

Schlussfolgerung

Recoil bietet einen modernen und effizienten Ansatz für die Zustandsverwaltung in React-Anwendungen. Seine feinkörnigen Updates, die Kompatibilität mit dem Concurrent-Modus und die einfache Handhabung asynchroner Zustände machen es zu einer überzeugenden Wahl für Entwickler, die skalierbare und performante React-Apps erstellen möchten.

Durch den Einsatz von Atomen und Selektoren ermöglicht Recoil eine modulare und intuitive Verwaltung des globalen Zustands und verbessert so die gesamte Entwicklungserfahrung. IronPDF npm ist ein Unternehmenspaket mit PDF-Erzeugungs- und Lesefunktionen. Entwickler können diese Funktionen mit Hilfe der IronPDF-Bibliothek problemlos in ihre Anwendungen integrieren.