Nachrichtensymbol
Zum Fußzeileninhalt springen
  1. IronPDF for Node.js
  2. IronPDF für den Node.js Blog
  3. Node-Hilfe
  4. recoil NPM
NODE-HILFE

recoil NPM (Wie es für Entwickler funktioniert)

Darrius Serrant
Darrius Serrant
Aktualisiert:

Zustandsverwaltung ist ein kritischer Aspekt beim Aufbau robuster und skalierbarer React-Anwendungen. Unter den verschiedenen Zustandsverwaltung-Bibliotheken hat sich Recoil als eine leistungsstarke und flexible Option herauskristallisiert. Von Facebook als experimentelles Zustandsverwaltung-Framework entwickelt, vereinfacht Recoil komplexe Szenarien der Zustandsverwaltung und bietet eine intuitivere API zur Verwaltung globaler Zustände in React-Anwendungen.

Dieser Artikel untersucht die Kernkonzepte von Recoil, seine Vorteile und wie man damit in einem React-Projekt beginnt. Außerdem werden wir uns die IronPDF Node.js PDF Generation Tools Bibliothek ansehen, um PDFs von Website-URLs oder HTML zu generieren.

Was ist das Recoil-Paket?

Recoil ist eine Zustandsverwaltung-Bibliothek für React, die darauf abzielt, die Einschränkungen bestehender Lösungen wie Redux und Context API zu adressieren. Es bietet einen einfacheren und leistungsfähigeren Weg, um geteilten Zustand in React-Anwendungen zu verwalten, und bietet Funktionen wie feingranulare Aktualisierungen, asynchrone Zustandsverwaltung und einfache Integration in den Concurrent Mode von React.

Kernkonzepte

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

  1. Atome: Atome sind die fundamentalen Zustandseinheiten im Rückstoß. Sie repräsentieren Zustandsteile, die über Komponenten hinweg geteilt werden können. Wenn sich der Wert eines Atoms ändert, wird jede Komponente, die auf dieses Atom abonniert ist, automatisch neu gerendert.
  2. Selektoren: Selektoren sind reine Funktionen, die einen Zustand von einem oder mehreren Atomen oder anderen Selektoren ableiten. Sie können synchron oder asynchron sein und ermöglichen komplexe Zustandsableitungen und Datenabfragelogik.
  3. RecoilRoot: Diese Komponente dient dazu, dem Komponentenbaum den Recoil-Kontext bereitzustellen. Es ist ähnlich dem Context-Provider von React und muss den Anwendungsteil umschließen, der den Recoil-Zustand verwendet.

Vorteile von Recoil

Recoil bietet mehrere Vorteile gegenüber anderen Zustandsverwaltungslösungen:

  • Feingranulare Aktualisierungen: Im Gegensatz zu Redux, wo jede Zustandsänderung ein erneutes Rendern in mehreren Komponenten auslösen kann, stellt Recoil sicher, dass nur die Komponenten, die den geänderten Zustand abonniert haben, neu gerendert werden, was zu einer besseren Performance führt.
  • Kompatibilität mit dem Concurrent Mode: Recoil ist so konzipiert, dass es nahtlos mit dem Concurrent Mode von React zusammenarbeitet und so ein reibungsloseres Benutzererlebnis mit Funktionen wie Time Slicing und Suspense ermöglicht.
  • Einfacher asynchroner Zustand: Der Umgang mit asynchronen Zuständen, wie z. B. dem Abrufen von Daten, ist in Recoil dank der integrierten Unterstützung für asynchrone Selektoren einfacher.
  • Skalierbarkeit: Recoil skaliert dank seines modularen Zustandsverwaltungsansatzes gut für große Anwendungen.
  • Gemeinschaftsprojekt: Unter einer MIT-Lizenz ist Recoil frei verwendbar, modifizierbar und verteilbar. Dies fördert eine weit verbreitete Anwendung und Zusammenarbeit unter Entwicklern, ermöglicht jedem freien Aufbau, Fehlerbehebungen beizutragen und Modifikationen zum Zwecke der Verbesserung von Recoil zu teilen. Diese Entwicklung von Recoil erfolgt in ihrem Open-Source-GitHub-Repository.

Erste Schritte mit Recoil

Um Recoil in einer React-Anwendung zu verwenden, befolgen Sie diese Schritte:

npm Install Recoil

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

npm install recoil
npm install recoil
SHELL

RecoilRoot einrichten

Umschließen 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';

// Atom to hold the text state
export const textState = atom({
  key: 'textState',
  default: '',
});

// Selector to derive the character count from the textState atom
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});
import { atom, selector } from 'recoil';

// Atom to hold the text state
export const textState = atom({
  key: 'textState',
  default: '',
});

// Selector to derive the character count from the textState atom
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});
JAVASCRIPT

Verwenden Sie Atome und Selektoren in Komponenten

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';

function CharacterCounter() {
  // Use Recoil hooks to manage atom and selector state
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);

  // Handle text change
  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <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() {
  // Use Recoil hooks to manage atom and selector state
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);

  // Handle text change
  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <p>Character Count: {count}</p>
    </div>
  );
}

export default CharacterCounter;
JAVASCRIPT

Einführung in IronPDF

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

IronPDF ist eine beliebte PDF-Erzeugungsbibliothek, die zum Erstellen, Bearbeiten und Konvertieren von PDF-Dokumenten verwendet wird. Das IronPDF-npm-Paket ist speziell for Node.js-Anwendungen konzipiert. Hier sind einige wichtige Funktionen und Details über das IronPDF-npm-Paket:

Wichtige Merkmale

HTML zu PDF Konvertierung

Konvertieren Sie HTML-Inhalte mühelos in PDF-Dokumente. Dieses Feature ist besonders nützlich zur Erzeugung dynamischer PDFs aus Webinhalten.

URL-zu-PDF-Umwandlung

Erzeugen Sie PDFs direkt von URLs, sodass Sie die Inhalte von Webseiten erfassen und als PDF-Dateien programmatisch speichern können.

PDF-Manipulation

Verschmelzen, teilen und manipulieren Sie vorhandene PDF-Dokumente mit Leichtigkeit. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Splitten von Dokumenten und mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden. IronPDF bietet Optionen zum Schutz Ihrer sensiblen Dokumente vor unberechtigtem Zugriff.

Hochwertige Ausgabe

Erzeugen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass Ihre generierten PDFs die Originalinhalte getreu wiedergeben.

Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, einschließlich Windows, Linux und macOS, was es für eine Vielzahl von Entwicklungsumgebungen geeignet macht.

Einfache Integration

Integrieren Sie IronPDF mühelos in Ihre Node.js-Anwendungen mithilfe seines npm-Pakets. Die API ist gut dokumentiert, was es einfach macht, PDF-Erzeugungsfunktionen in Ihre Projekte einzubauen.

Installation

Um das IronPDF NPM-Paket 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
SHELL

PDFs generieren mit IronPDF und Recoil

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie dies noch nicht getan haben). Verweisen Sie 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"
SHELL

Navigieren Sie als Nächstes in Ihr Projektverzeichnis:

cd recoil-pdf
cd recoil-pdf
SHELL

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
SHELL

Fügen Sie die Datei 'app.js' hinzu, um Recoil wie unten 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-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zur Generierung des PDF-Dokuments zu erstellen. Da IronPDF nur serverseitig ausgeführt wird, müssen wir eine API erstellen, die aufgerufen wird, wenn Benutzer ein PDF generieren möchten. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den untenstehenden Codeinhalt 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();
    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();
    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 benötigt einen Lizenzschlüssel, den Sie von der IronPDF Trial License Page erhalten und in den obigen Code einfügen.

Fügen Sie den untenstehenden Code hinzu, um eine URL vom Benutzer zu akzeptieren, ein PDF von der URL zu generieren und es 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';

// Atom to store user input URL
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);

  // Function to generate PDF from URL
  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);
    }
  };

  // Handle input change
  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>
        <input type="text" value={text} onChange={handleChange} placeholder="Enter URL" />
        <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';

// Atom to store user input URL
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);

  // Function to generate PDF from URL
  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);
    }
  };

  // Handle input change
  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>
        <input type="text" value={text} onChange={handleChange} placeholder="Enter URL" />
        <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 Erklärung

  1. Erstellen Sie einen Atomzustand mit const textState = atom() von 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' geklickt wird, wird das angeforderte PDF generiert. Wie unten dargestellt:

Ausgabe

Wie die Website aussieht:

recoil NPM (Wie es für Entwickler funktioniert): Abbildung 2 - Webseite zur PDF-Erstellung

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

recoil NPM (Wie es für Entwickler funktioniert): Abbildung 3 - Erstelltes PDF mit IronPDF

IronPDF-Lizenz

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

Die IronPDF Testlizenz ermöglicht Benutzern, seine umfangreichen Funktionen vor dem Kauf auszuprobieren. Weitere Details zur unbefristeten Lizenzierung finden Sie auf der IronPDF Lizenzinformationen-Seite.

Platzieren Sie hier den Lizenzschlüssel:

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

Abschluss

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

Durch die Nutzung von Atomen und Selektoren ermöglicht Recoil eine modulare und intuitive Art, den globalen Zustand zu verwalten, und verbessert das gesamte Entwicklungserlebnis. IronPDF Node.js Bibliothek NPM ist ein Unternehmenspaket mit PDF-Generierung und Lese-Funktionalitäten. Entwickler können diese Funktionalitäten einfach in ihre Apps integrieren, indem sie die IronPDF-Bibliothek verwenden.

Darrius Serrant
Darrius Serrant
  Jetzt mit dem Ingenieurteam chatten
Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...

Weiterlesen

Verwandte Artikel

30-Tage-Testversion → Volles Produkt. Keine Grenzen. Keine Karte. Gratis testen

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me