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 den verschiedenen Zustandsverwaltungslibraries hat sich Recoil als eine leistungsstarke 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 die IronPDF Node.js PDF Generation Tools-Bibliothek untersuchen, um PDFs aus Website-URLs oder HTML zu generieren.

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 Einheiten des Zustands 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 den Zustand aus einem oder mehreren Atomen oder anderen Selektoren ableiten. Sie können synchron oder asynchron sein und ermöglichen komplexe Zustandsableitungen und Datenabruflogik.

3. RecoilRoot: Dieses Komponente wird verwendet, um den Recoil-Kontext dem 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:

• Feinkörnige Aktualisierungen: Im Gegensatz zu Redux, wo jede Zustandsänderung Neurenderings in mehreren Komponenten auslösen kann, stellt Recoil sicher, dass nur Komponenten, die auf den geänderten Zustand abonniert sind, neu gerendert werden, was zu einer besseren Leistung führt.
• Kompatibilität mit dem Konkurrentenmodus: Recoil ist darauf ausgelegt, nahtlos mit dem Konkurrentenmodus von React zu arbeiten, was flüssigere Benutzererfahrungen mit Funktionen wie Time Slicing und Suspense ermöglicht.
• Einfacher asynchroner Zustand: Das Handling von asynchronem Zustand, wie z.B. das Abrufen von Daten, ist in Recoil einfacher, dank der integrierten Unterstützung für asynchrone Selektoren.
• Skalierbarkeit: Recoil skaliert gut für große Anwendungen dank seines modularen Ansatzes zur Zustandsverwaltung.
• Community-Bemühung: Unter einer MIT-Lizenz ist Recoil frei nutzbar, modifizierbar und verbreitbar. Dies fördert die breite Akzeptanz und die Zusammenarbeit unter den Entwicklern, so dass jeder frei darauf aufbauen, Fehlerbehebungen beisteuern und Änderungen zur Verbesserung von Recoil weitergeben kann. Die Entwicklung von Recoil erfolgt in ihrem Open-Source-Repository auf GitHub.

Erste Schritte mit Recoil

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

npm Install Recoil

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

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

js

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

js

Verwenden Sie Atome 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;

js

Einführung in IronPDF

IronPDF ist eine beliebte PDF-Erstellungsbibliothek, 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

Erzeugen von PDFs mit IronPDF und Recoil

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie dies noch nicht getan haben). Beziehen Sie sich auf dieses Next.js Setup-Tutorial für detaillierte Anweisungen 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"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd recoil-pdf

cd recoil-pdf

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

Fügen Sie die Datei "app.js" hinzu, um Recoil wie folgt einzubinden:

import React from 'react';
import { RecoilRoot } from 'recoil';
export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

js

PDF-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zur Erstellung des PDF-Dokuments zu entwickeln. 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();
    }
}

js

IronPDF benötigt einen Lizenzschlüssel, holen Sie ihn sich von der IronPDF Trial License Page und fügen Sie ihn in den obigen Code ein.

Fügen Sie den folgenden Code ein, um eine URL vom Benutzer zu akzeptieren, eine PDF-Datei aus der URL zu generieren 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>
    );
}

js

Code Erläuterung

1. Erstellen Sie einen Atomzustand mit 'const textState = atom()' aus Recoil, der verwendet wird, um die vom Benutzer im Eingabefeld eingegebene URL zu speichern.

2. Fügen Sie die Komponenten Überschrift, Eingabe und Schaltfläche hinzu.

3. Starten Sie die Anwendung mit "yarn dev" und geben Sie dann die URL der Website ein, die als PDF generiert werden soll.

4. Wenn die Schaltfläche "PDF generieren" angeklickt wird, wird die angeforderte PDF-Datei generiert. Wie unten dargestellt:

Ausgabe

So sieht die Website aus:

Das PDF, das generiert wurde, als die URL https://ironpdf.com/nodejs/ angegeben wurde:

IronPDF-Lizenz

Die IronPDF Trial License ermöglicht es Benutzern, die umfangreichen Funktionen vor dem Kauf zu testen. Weitere Details zur unbefristeten Lizenzierung finden Sie auf der Seite IronPDF Licensing Information.

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

js

Schlussfolgerung

Recoil bietet einen modernen und effizienten Ansatz für die Zustandsverwaltung in React-Anwendungen. Die 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 Node.js-Bibliothek npm ist ein Unternehmenspaket mit Funktionen zur PDF-Erstellung und -Lesung. Entwickler können diese Funktionen mit Hilfe der IronPDF-Bibliothek problemlos in ihre Anwendungen integrieren.