Së pari, do t'ju duhet të instaloni Puppeteer dhe React duke ekzekutuar npm i puppeteer react në terminalin tuaj.

Në dosjen tuaj src, krijoni një skedar të ri të quajtur scraper.js dhe importoni Puppeteer:

import puppeteer from 'puppeteer';

Krijoni një funksion të ri të quajtur scrapeProductData që përdor Puppeteer për të lundruar në faqen e internetit të tregtisë elektronike dhe për të nxjerrë të dhënat që ju nevojiten:

export const scrapeProductData = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.example.com/product-page');

  const productData = await page.evaluate(() => {
    return {
      name: document.querySelector('.product-name').innerText,
      price: document.querySelector('.product-price').innerText,
      rating: document.querySelector('.product-rating').innerText
    }
  });
  await browser.close();
  return productData;
}

Në dosjen tuaj src, krijoni një skedar të ri të quajtur ProductData.js dhe importoni React:

import React, { useState, useEffect } from 'react';

Në skedarin ProductData.js, importoni funksionin scrapeProductData nga skedari scraper.js dhe përdorni atë për të marrë të dhënat e produktit:

import { scrapeProductData } from './scraper';

export const ProductData = () => {
  const [productData, setProductData] = useState({});

  useEffect(() => {
    async function fetchData() {
      const data = await scrapeProductData();
      setProductData(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>{productData.name}</h1>
      <p>Price: {productData.price}</p>
      <p>Rating: {productData.rating}</p>
    </div>
  );
}

Më në fund, mund të përdorni komponentin ProductData në skedarin tuaj kryesor App.js për të shfaqur të dhënat e produktit të gërvishtur në faqen tuaj të internetit:

import React from 'react';
import { ProductData } from './ProductData';

function App() {
  return (
    <div>
      <ProductData />
    </div>
  );
}

export default App;

Ky është vetëm një shembull bazë, dhe në skenarin e botës reale, mund t'ju duhet të trajtoni faqet, duke u marrë me përmbajtje dinamike dhe raste të tjera të skajshme. Gjithashtu, vini re se duhet të siguroheni që gjithmonë të lexoni dhe ndiqni kushtet e përdorimit të faqes në internet dhe robots.txt përpara se të gërvishtni ndonjë faqe interneti.