html2canvas kullanabilirsin bunun için.
https://html2canvas.hertzen.com/

elbette bazı kısıtlamalar var, çok modern css özellikleri çalışmayabilir, desteklenmeyen özelliklere buradan bakabilirsin
https://html2canvas.hertzen.com/features ( en aşağıda yer alıyor )

bununla ilgili 2 örnek yaptık youtube kanalımızda var onlarada bakabilirsin
https://www.youtube.com/watch?v=9Ji0OhwaEjs
https://www.youtube.com/watch?v=0_YRhgKvMDY (react örneği)

sayfaya dediğin genel olarak body'e bir div ortalamak istersen yapay ve dikay olarak.

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

demen yeterli olacaktır. Eğer bir div içinde başka bir divi ortalamak istiyorsan bilmen gereken kapsayıcı divinin genişlik ve yüksekliği olması gerek buna göre ortalaması gerek. Örneğin;

<div class="kapsayici-div">
    <div class="ortalanaca-div">
        ortalanan içerik
    </div>
</div>

<style>
    .kapsayici-div {
        width: 100%;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ortalanan-div {
        background: #000;
        color: #fff;
        padding: 30px;
    }
</style>

sürümünü güncellemekten bahsediyorsan ya tüm paketlerini kolayca şöyle güncelleyebilirsin

npm update

# ya da 
yarn upgrade

ama bu büyük projelerde bütün paketleri güncellemek sorun yaratabilir. Sadece react için şöyle bir update işlemi yapabilirsin

# her zaman son versiyonu yüklemek için
npm install --save react@latest

# spesifik versiyonu yüklemek içni
npm install --save [email protected]

# ya da 
yarn upgrade react@^17.0.2

yanlış düşünce, o zaman sen yorum değil inceleme gibi bir şey arıyorsun uzun uzun detaylı yazı yazmalarını bekliyorsun, karakter sınırlaması koy en az 300 karakterli bir yorum yazsınlar, aynı yorum yazma olasılığını öldürmüş olursun

Bunu çokça kez anlattık, bir kez de senin için anlatalım :) İlk olarak postView.php dosyasında sen id'ye göre kontrol işlemi yapıyorsun değil mi?

Yapacağın ilk iş yapını şöyle değiştirmek;
https://techredio.com/postView.php?url=bu-test-url

Şimdi artık postView.php de $_GET['id'] yerine $_GET['url'] olarak alıp buna göre veritabanında eşleşen içeriği alacaksın o kadar, burada yapacağın değişiklik sayesinde artık .htaccess dosyasına şunu yazarak istediğin urli elde edebilirsin.

RewriteEngine On
RewriteRule ^posts/([0-9a-zA-Z-_]+)(/?)$ postView.php?url=$1 [QSA]

Not: .htaccess dosyan ana dizinde olacak unutma. Ayrıca id yerine url yapmamızın sebebi ise, eğer link yapını posts/url şeklinde istiyorsan mecburen id'yi aradan çıkartıp url göndermen gerekiyor mantık olarak.

React kullanırken kullanacağın back-end dilinin hiçbir önemi yok. İster PHP kullan ister Python ister Nodejs.
Burada önemli olan react tarafından bu back-end'e nasıl istek atacağım.

Bunun için native fetch() kullanılabilir ya da alternatif olarak SWR, React Query ya da axios paketleri kullanılabilir.

Back-end tarafında ise json formatında bir veri dönmen gerekiyor. Dolayısı ile api.php dosyan olsun ve içinde şöyle basit bir şey olsun.

<?php

$name = $_POST['name'];

echo json_encode([
    'text' => 'Yazdığınız cevap = ' . $name
]);

Ve react'de bu php dosyasına istek atıp sonucu göstermek istersen;

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [name, setName] = useState();
  const [data, setData] = useState();

  const getName = () => {
    const data = new FormData();
    data.append('name', name);
    fetch(`https://localhost/api.php`, {
      method: 'POST',
      body: data
    })
      .then(res => res.json())
      .then(data => setData(data.text));
  };

  return (
    <>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <button onClick={getName}>İstek At</button>

      {data && <div className="result">API'den dönen istek = {data}</div>}
    </>
  );
}

Not: eğer CORS hatası alırsan php dosyanın başına şunu eklemeyi unutma

header("Access-Control-Allow-Origin: *");

Örnek demo: https://stackblitz.com/edit/react-php-ornek?file=src/App.js

Bir diğer konuda bunu nasıl yayınlacağın? Önce react projeni build ediyorsun.

yarn build

Ve build klasöründe aslında html, css ve javascript dosyaların var. Bunu sunucuna atacaksın, herhangi bir sunucuda hiçbir ayar yapmadan çalıştırabilirsin sonuçta javascript projesi çıkartıyorsun.

siteni pwa yaptıktan sonra beforeinstallprompt eventını dinleyip işlem yapabilirsin. Örneğin;

const installButton = document.querySelector('.install-app'); // uygulamayı yükle butonu

let beforeInstallPromptEvent
window.addEventListener("beforeinstallprompt", function(e) {
    e.preventDefault();
    beforeInstallPromptEvent = e
    installButton.style.display = 'block'
    installButton.addEventListener("click", function(mouseEvent) {
        e.prompt();
    });
    installButton.hidden = false;
});
installButton.addEventListener("click", function(mouseEvent) {
    beforeInstallPromptEvent.prompt();
});

options'ları çekeceksin öncelikle

$options = $db->query('SELECT * FROM ozelliklers')->fetchAll(PDO::FETCH_ASSOC);

function filterType($options, $type) {
    return array_filter($options, function($option) use ($type) {
        return $option['ozellik_tip'] === $type;
    });
}

$colors = filterType($options, 'renk');
$sizes = filterType($options, 'beden');
$numbers = filterType($options, 'ayakkabi');

artık tablona şöyle bastırabilirsin

<table>
    <thead>
        <tr>
            <th>Renk</th>
            <th>Beden</th>
            <th>Numara</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach($colors as $key => $color): ?>
            <tr>
                <tr><?=$color['ozellik']?></tr>
                <tr><?=$sizes[$key]['ozellik']?></tr>
                <tr><?=$numbers[$key]['ozellik']?></tr>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>