HILFE ZUM KNOTENPUNKT

recoil NPM (Wie es für Entwickler funktioniert)

Veröffentlicht 13. August 2024

Teilen Sie:

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 demIronPDF for Node.js PDF Generation Tools bibliothek 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:

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.
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.
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 einer MIT-Lizenz ist Recoil frei verwendbar, veränderbar und verteilbar. 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 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

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

JAVASCRIPT

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

JAVASCRIPT

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;

JAVASCRIPT

Einführung in IronPDF

rückstoß NPM (Wie es für Entwickler funktioniert): Abbildung 1 - IronPDF-Webseite

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

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 hierzuNext.js-Einrichtungstutorial 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"

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd recoil-pdf

Installieren Sie die erforderlichen Pakete:

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

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

JAVASCRIPT

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

JAVASCRIPT

IronPDF erfordert einen Lizenzschlüssel, den Sie auf der WebsiteIronPDF Testlizenzseite 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>
    );
}

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

JAVASCRIPT

Code Erläuterung

Erstellen eines Atomzustands mit 'const textState = atom()' von Recoil, die verwendet wird, um die vom Benutzer in das Eingabefeld eingegebene URL zu speichern.
Fügen Sie die Komponenten Überschrift, Eingabe und Schaltfläche hinzu.
Starten Sie die Anwendung mit "yarn dev" und geben Sie dann die URL der Website ein, die als PDF generiert werden soll.
Wenn die Schaltfläche "PDF generieren" angeklickt wird, wird die angeforderte PDF-Datei generiert. Wie unten dargestellt:

Ausgabe

So sieht die Website aus:

rückstoß NPM(Wie es für Entwickler funktioniert): Abbildung 2 - Website zur Erstellung von PDFs

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

rückstoß NPM(Wie es für Entwickler funktioniert): Abbildung 3 - Ausgegebenes PDF aus der Generierung mit IronPDF

IronPDF-Lizenz

rückstoß NPM(Wie es für Entwickler funktioniert): Abbildung 4 - IronPDF-Lizenzierungsseite

DieIronPDF Testlizenz ermöglicht es den Benutzern, die umfangreichen Funktionen vor dem Kauf zu testen. Weitere Einzelheiten zur unbefristeten Lizenzierung finden Sie auf der WebsiteIronPDF-Lizenzierungsinformationen 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";

JAVASCRIPT

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 for Node.js Library npm ist ein Unternehmenspaket mit PDF-Erzeugungs- und Lesefunktionen. Entwickler können diese Funktionen mit Hilfe der IronPDF-Bibliothek problemlos in ihre Anwendungen integrieren.

< PREVIOUS
uuid NPM (Wie es für Entwickler funktioniert)

NÄCHSTES >
recharts NPM (Wie es für Entwickler funktioniert)