NODE YARDıM

recoil NPM (Geliştiriciler İçin Nasıl Çalışır)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Güncellendi:Ocak 18, 2026

Durum yönetimi, sağlam ve ölçeklenebilir React uygulamaları oluşturmanın kritik bir yönüdür. Çeşitli durum yönetimi kütüphaneleri arasında Recoil, güçlü ve esnek bir seçenek olarak ortaya çıkmıştır. Facebook tarafından deneysel bir durum yönetimi çerçevesi olarak geliştirilen Recoil, karmaşık durum yönetimi senaryolarını basitleştirir ve React uygulamalarında global durumları yönetmek için daha sezgisel bir API sunar.

Bu makale, Recoil'in temel konseptlerini, avantajlarını ve bir React projesinde nasıl başlayacağınızı keşfeder. Ayrıca, İnternet sitesi URL'lerinden veya HTML'den PDF oluşturmak için IronPDF Node.js PDF Oluşturma Araçları kütüphanesiyle ilgileneceğiz.

Recoil Paketi Nedir?

Recoil, Redux ve Context API gibi mevcut çözümlerin sınırlamalarını ele almayı amaçlayan bir React durum yönetim kütüphanesidir. React uygulamalarında paylaşılan durumu yönetmenin daha basit ve daha performanslı bir yolunu sağlar, ince ayar güncellemeleri, asenkron durum yönetimi ve React'in eşzamanlı modu ile kolay entegrasyon gibi özellikler sunar.

Temel Kavramlar

Recoil, diğer durum yönetim kütüphanelerinden farklı bazı temel kavramlar sunar:

Atomlar: Atomlar, Recoil'deki temel durum birimleridir. Bileşenler arasında paylaşılabilecek durum parçalarını temsil ederler. Bir atomun değeri değiştiğinde, o atoma abone olan herhangi bir bileşen otomatik olarak yeniden çizilir.
Seçiciler: Seçiciler, bir veya daha fazla atomdan ya da diğer seçicilerden durumu türeten saf fonksiyonlardır. Senkronsie veya asenkron olabilen seçiciler, karmaşık durum türetmeleri ve veri çekme mantığı sağlar.
RecoilRoot: Bu bileşen, Recoil bağlamını bileşen ağacına sağlamak için kullanılır. React'in Context Sağlayıcı'sına benzer ve Recoil durumunu kullanan uygulama bölümünü sarmalaması gerekir.

Recoil'in Avantajları

Recoil, diğer durum yönetim çözümleri üzerinde çeşitli avantajlar sunar:

İnce Ayar Güncellemeleri: Redux'ta herhangi bir durum değişikliği, birden fazla bileşenin yeniden çizilmesini tetikleyebilir, ancak Recoil, yalnızca değişen duruma abone olan bileşenlerin yeniden çizilmesini sağladığı için daha iyi performans sunar.
Eşzamanlı Mod Uyumluluğu: Recoil, React'in eşzamanlı modu ile sorunsuz çalışacak şekilde tasarlanmıştır, zaman dilimlemesi ve bekleme gibi özelliklerle daha pürüzsüz kullanıcı deneyimleri sağlar.
Kolay Asenkron Durum: Veri çekme gibi asenkron durumu yönetmek, asenkron seçiciler için yerleşik destek sayesinde Recoil'de daha basittir.
Ölçeklenebilirlik: Recoil, modüler durum yönetimi yaklaşımı sayesinde büyük uygulamalar için iyi ölçeklenir.
Topluluk Çabası: MIT lisansı altında, Recoil, serbestçe kullanılabilir, değiştirilebilir ve dağıtılabilir. Bu, geliştiriciler arasında geniş kabul ve işbirliğini teşvik ederek, herhangi bir kişinin üzerine inşa etmesini, hata düzeltmeleri katkıda bulunmasını ve Recoil'i daha iyi hale getirmek için değişiklikleri paylaşmasını sağlar. Bu geliştirme, açık kaynaklı GitHub depolarında gerçekleşir.

Recoil ile Başlarken

Bir React uygulamasında Recoil kullanmaya başlamak için şu adımları izleyin:

npm Yükle Recoil

En son kararlı sürümü yüklemek için, Recoil paketinin npm'de yer alması nedeniyle aşağıdaki komutu çalıştırın:

npm install recoil

npm install recoil

SHELL

RecoilRoot Ayarlayın

Uygulamanızı RecoilRoot bileşeni ile sarın.

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

Atom ve Seçicileri Tanımlayın

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

Bileşenlerde Atom ve Seçicileri Kullanın

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

IronPDF'ye Giriş

recoil NPM (Geliştiriciler için Nasıl Çalışır): Şekil 1 - IronPDF web sayfası

IronPDF, PDF belgelerinin oluşturulması, düzenlenmesi ve dönüştürülmesi için kullanılan popüler bir PDF oluşturma kütüphanesidir. IronPDF npm paketi, özellikle Node.js uygulamaları için tasarlanmıştır. İşte IronPDF npm paketi ile ilgili bazı önemli özellikler ve detaylar:

Temel Özellikler

HTML'den PDF'ye Dönüştürme

HTML içeriğini kolayca PDF belgelerine dönüştürün. Bu özellik, web içeriğinden dinamik PDF'ler üretmek için özellikle kullanışlıdır.

URL'den PDF'e Dönüşüm

Web sayfalarının içeriğini yakalayıp programatik olarak PDF dosyaları olarak kaydedebilmeniz için URL'lerden doğrudan PDF oluşturun.

PDF Manipülasyonu

Mevcut PDF belgelerini kolayca birleştirin, ayırın ve yönetin. IronPDF, sayfa ekleme, belge ayırma gibi işlevler sunar.

PDF Güvenliği

PDF belgelerinizi şifrelerle şifreleyerek veya dijital imzalar uygulayarak güvence altına alın. IronPDF, hassas belgelerinizi yetkisiz erişimden korumak için seçenekler sunar.

Yüksek Kaliteli Çıktı

Metin, resim ve biçimlendirmenin hassas bir şekilde işlendiği yüksek kaliteli PDF belgeleri üretin. IronPDF, oluşturulan PDF'lerin orijinal içeriği korumasını sağlar.

Çapraz Platform Uyumluluğu

IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur, bu da onu geniş bir geliştirme ortamı yelpazesi için uygun kılar.

Basit Entegrasyon

IronPDF'i npm paketi ile Node.js uygulamalarınıza kolayca entegre edin. API iyi belgelenmiştir, bu da projelerinize PDF oluşturma yeteneklerini kolayca eklemenizi sağlar.

Kurulum

IronPDF NPM paketini kurmak için, aşağıdaki komutu kullanın:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

SHELL

IronPDF ve Recoil Kullanarak PDF Üretme

Bağımlılıkları Yükleyin: İlk olarak, henüz yapmadıysanız, yeni bir Next.js projesi oluşturun. Ayrıntılı talimatlar için buradaki Next.js kurulum öğreticisine başvurun veya aşağıdaki komutu kullanın:

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

Sonra, proje dizininize gidin:

cd recoil-pdf

cd recoil-pdf

SHELL

Gerekli paketleri yükleyin:

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

'app.js' dosyasını ekleyin ve aşağıdaki gibi Recoil'i dahil edin:

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 Oluşturma API'si: İlk adım, PDF belgesini oluşturacak bir arka uç API'si yaratmaktır. IronPDF yalnızca sunucu tarafında çalıştığından, kullanıcılar bir PDF oluşturmak istediğinde çağırılacak bir API oluşturmamız gerekiyor. Bir dosya oluşturun pages/api/pdf.js yolunda ve aşağıdaki kod içeriğini ekleyin:

// 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 bir lisans anahtarı gerektirir, onu IronPDF Deneme Lisansı Sayfasından alıp yukarıdaki koda yerleştirin.

Aşağıdaki kodu, kullanıcıdan bir URL kabul etmek, URL'den bir PDF oluşturmak ve bunu index.js dosyasına kaydetmek için ekleyin:

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

Kod Açıklaması

Kullanıcı tarafından girilen URL'yi giriş alanında saklamak için kullanılacak olan Recoil'den const textState = atom() kullanarak bir atom durumu oluşturun.
Başlık, Giriş ve Buton bileşenlerini ekleyin.
Uygulamayı yarn dev kullanarak çalıştırın ve ardından PDF olarak oluşturulmasını istediğiniz web sitesinin URL'sini girin.
'PDF Oluştur' butonuna tıklandığında istenen PDF oluşturulur. Aşağıda gösterildiği gibi:

Çıktı

Web sitesinin nasıl göründüğü:

recoil NPM (Geliştiriciler için Nasıl Çalışır): Şekil 2 - PDF oluşturmak için web sitesi

URL https://ironpdf.com/nodejs/ verildiğinde oluşturulan PDF:

recoil NPM (Geliştiriciler için Nasıl Çalışır): Şekil 3 - IronPDF ile oluşturulan PDF çıktısı

IronPDF Lisansı

recoil NPM (Geliştiriciler için Nasıl Çalışır): Şekil 4 - IronPDF lisanslama sayfası

Kullanıcıların satın almadan önce geniş özelliklere göz atmasına olanak tanıyan IronPDF Deneme Lisansı sağlar. Süresiz lisanslama hakkında daha fazla bilgi IronPDF Lisans Bilgileri sayfasında bulunabilir.

Lisans Anahtarını buraya yerleştirin:

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

Sonuç

Recoil, React uygulamalarında durum yönetimine modern ve verimli bir yaklaşım sağlar. İnce ayarlı güncellemeleri, eşzamanlı mod uyumluluğu ve asenkron durumu kolayca ele alma yeteneği, React uygulamaları oluşturmaya çalışan geliştiriciler için cazip bir seçim yapar.

Atomlar ve seçicilerden yararlanarak, Recoil, genel durumu modüler ve sezgisel bir şekilde yönetmeyi sağlar ve genel geliştirme deneyimini artırır. IronPDF Node.js Kütüphanesi npm, PDF oluşturma ve okuma işlevleriyle bir iş paketi sağlar. Geliştiriciler, IronPDF kütüphanesini kullanarak bu işlevleri uygulamalarına kolayca entegre edebilir.

Darrius Serrant

Mühendislik takımıyla şimdi sohbet edin

Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimleri lisans derecesine sahiptir ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışmaktadır. Küçük yaşlardan itibaren kodlamaya ilgi duyan Darrius, bilişimi hem gizemli hem de erişilebilir buldu ve onu yaratıcılık ve problem çö...

Daha Fazlasını Oku