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

Recoil Paketi Nedir?

Recoil, React için durum yönetim kütüphanesidir ve Redux ve Context API gibi mevcut çözümlerin sınırlamalarını çözmeyi amaçlar. Paylaşılan durumları React uygulamalarında daha basit ve daha performanslı bir şekilde yönetmenin yollarını sağlar, ince detaylı güncellemeler, eşzamanlı olmayan 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 ayrılan birkaç anahtar kavram sunar:

1. Atomlar: Atomlar, Recoil'de durumun temel birimleridir. Bunlar, bileşenler arasında paylaşılabilen durum parçalarını temsil eder. Bir atomun değeri değiştiğinde, o atoma abone olan herhangi bir bileşen otomatik olarak yeniden oluşturulur.
2. Seçiciler: Seçiciler, bir veya daha fazla atom veya diğer seçicilerden durum çıkartan saf fonksiyonlardır. Eşzamanlı veya eşzamanlı olmayan olabilirler, karmaşık durum türetmeleri ve veri çekme mantığı sağlarlar.
3. 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 uygulamanın bir kısmını sarması gerekir.

npm install recoil

npm install recoil

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

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

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;

IronPDF'ye Giriş

IronPDF, PDF belgeleri oluşturmak, düzenlemek ve dönüştürmek için kullanılan popüler bir PDF oluşturma kütüphanesidir. IronPDF npm paketi, özel olarak Node.js uygulamaları için tasarlanmıştır. IronPDF npm paketi hakkında bazı temel özellikler ve detaylar hatırlatılmaktadır.

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

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

IronPDF ve Recoil Kullanarak PDF Oluşturma

Bağımlılıkları Kurun: İlk olarak, yeni bir Next.js projesi oluşturun (henüz yapmadıysanız). Bu Next.js kurulum öğreticisine ayrıntılı talimatlar için 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"

Sonrasında, proje dizinine gidin:

cd recoil-pdf

cd recoil-pdf

Gerekli paketleri kurun:

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

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

'app.js' dosyasını Recoil eklemek için aşağıda gösterildiği gibi ekleyin:

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

PDF Oluşturma API'si: İlk adım, PDF belgesini oluşturmak için bir arka plan API oluşturmak. IronPDF yalnızca sunucu tarafında çalıştığından, kullanıcılar PDF oluşturmak istediklerinde çağırmaları için bir API oluşturmalıyız. Yol pages/api/pdf.js içinde bir dosya oluşturun 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();
  }
}

IronPDF bir lisans anahtarı gerektirir, bunu IronPDF Deneme Lisansı Sayfası'ndan edinin ve yukarıdaki koda yerleştirin.

Aşağıdaki kodu ekleyerek kullanıcıdan bir URL kabul edin, URL'den bir PDF oluşturun ve index.js dosyasına kaydedin:

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

Kod Açıklaması

1. Kullanıcı tarafından giriş alanına girilen URL'yi saklamak için Recoil'den const textState = atom() kullanarak bir atom durumu oluşturun.
2. Başlık, Giriş ve Düğme bileşenlerini ekleyin.
3. Uygulamayı yarn dev kullanarak çalıştırın ve PDF olarak oluşturulmasını istediğiniz web sitesinin URL'sini girin.
4. 'PDF Oluştur' düğmesi tıklandığında talep edilen PDF oluşturulur. Aşağıda gösterildiği gibi:

IronPDF Lisansı

IronPDF Deneme Lisansı, satın almadan önce kapsamlı özelliklerini kontrol etmeleri için kullanıcılara izin verir. Süresiz lisanslama hakkında daha fazla ayrıntıya IronPDF Lisans Bilgileri sayfasından ulaşabilirsiniz.

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

Sonuç

Recoil, React uygulamalarında durum yönetimine modern ve verimli bir yaklaşım sağlar. İnce detaylı güncellemeleri, eşzamanlı mod ile uyumluluğu ve eşzamanlı durumu kolayca yönetme yeteneği, ölçeklenebilir ve performanslı React uygulamaları inşa etmeyi düşünen geliştiriciler için cazip bir seçenek haline getirir.

Atomları ve seçicileri kullanarak, Recoil küresel durumu yönetmek için modüler ve sezgisel bir yol sunar, genel geliştirme deneyimini geliştirir. IronPDF Node.js Kütüphanesi npm, PDF oluşturma ve okuma işlevleri sunan bir Enterprise paketidir. Geliştiriciler, bu işlevleri IronPDF kütüphanesini kullanarak uygulamalarına kolayca entegre edebilirler.