kullanabilirsin, container için yazılan kodları aktarmış oluyorsun tekrar tekrar yazmamak adına, böyle bir ihtiyacın olursa kullanabilirsin ama sadece container'da yazılanlara ihtiyacın varsa yeni bir class türetip onu extend etmene gerek yok direk class'ı container olarakta kullanabilirsin

benim verdiğim kodda url'e gelen değeri yazdıracaksın o kadarınıda yaparsın diye düşündüm :)

<input type="text" placeholder="Linki yapıştırın" id="input">
<button id="btn">Sorgula</button>

<div id="result" style="display: none">
	<strong>Kullanıcı adı:</strong> <span id="username"></span> <br>
	<strong>Şifre:</strong> <span id="password"></span> <br>
	<strong>URL:</strong> <span id="url"></span>
</div>

<script>
const input = document.getElementById('input'),
		btn = document.getElementById('btn'),
		result = document.getElementById('result')

btn.addEventListener('click', () => {
	if (input.value) {
		const url = new URL(input.value);
		result.style.display = 'block'
		document.getElementById('username').innerText = url.searchParams.get('username');
		document.getElementById('password').innerText = url.searchParams.get('password');
		document.getElementById('url').innerHTML = `<a href="${url.origin}" target="_blank">${url.origin}</a>`;
	}
})
</script>

buyur dostum, örneklerle basit bir session sınıfı yazdım sana, artık nasıl kullanmak istiyorsan öyle kullan geliştir devamını, en fazla 2 boyutlu dizi oluşturabilirsin zaten session'da da daha fazlasına ihtiyacın olmayacaktır

<?php

session_start();

class Session {

    public static function get($key, $subKey = false) {
        return $_SESSION[$key][$subKey] ?? $_SESSION[$key] ?? false;
    }

    public static function create($key, $data) {
        $_SESSION[$key] = $data;
    }

    public static function append($key, $data, $singleData = false) {
        if ( !self::get($key) ) {
            throw new Exception('Ekleme yaptığın session oluşturulmamış');
        }
        if ( !is_array(self::get($key)) ) {
            throw new Exception('Ekleme yaptığın session dizi tipinde değil');
        }
        if (is_array($data)) {
            $_SESSION[$key] += $data;
        } else {
            $_SESSION[$key][$data] = $singleData;
        }
    }

    public static function prepend($key, $data) {
        if ( !self::get($key) ) {
            throw new Exception('Ekleme yaptığın session oluşturulmamış');
        }
        if ( !is_array(self::get($key)) ) {
            throw new Exception('Ekleme yaptığın session dizi tipinde değil');
        }
        if (is_array($data)) {
            $_SESSION[$key] = $data + $_SESSION[$key];
        } else {
            $_SESSION[$key]= [$data => $singleData] + $_SESSION[$key];
        }
    }

    public static function remove($key, $subKey = false) {
        if ($subKey) {
            if (is_array($subKey)) {
                array_map(function($k) use ($key) {
                    unset($_SESSION[$key][$k]);
                }, $subKey);
            } else {
                unset($_SESSION[$key][$subKey]);
            }
        } else {
            unset($_SESSION[$key]);
        }
    }

    public static function getAll() {
        return $_SESSION;
    }

    public static function dumpAll() {
        echo '<pre>';
        print_r(self::getAll());
    }

}

Session::create('user', [
    'name' => 'Tayfun'
]);

Session::dumpAll();

Session::append('user', [
    'email' => '[email protected]',
    'surname' => 'Erbilen'
]);

Session::append('user', 'anahtar', 'deger');
Session::prepend('user', [
    'id' => 1
]);

Session::dumpAll();

print_r(Session::get('user'));
echo Session::get('user', 'id');

// Session::remove('user');
// Session::remove('user', 'email');
Session::remove('user', ['email', 'anahtar', 'surname']);

Session::dumpAll();

Session::create('name', 'Tayfun');

try {
    Session::append('name', 'anahtar', 'deger'); // hatalı
} catch (Exception $e) {
    echo $e->getMessage();
}

Session::dumpAll();

kaynaktan başlık, görsel, url çekmek için kullanacağın fonksiyon

function getProducts($source) {
    preg_match_all('@<div class="pBox" data-title="[0-9a-zA-Z-_]+">(.*?)</div>@', $source, $items);
    if (isset($items[1])) {
        foreach($items[1] as $key => $item) {
            preg_match('@<img class="app-center" src="(.*?)" alt="(.*?)" >@', $item, $image);
            preg_match('@<a href="(.*?)">@', $item, $url);
            [, $image, $title] = $image;
            yield [
                'title' => $title,
                'url' => $url[1],
                'image' => $image
            ];
        }
    }
}

kullanırken

$url = 'https://www.gardrops.com/kawaicity';
$source = file_get_contents($url);
$products = getProducts($source);

foreach($products as $product) {
    print_r($product);
}

tabi ilk 12 ürünü gösteriyor, networkten bakınca sonraki ürünleri getirmek için şu adrese
https://www.gardrops.com/resources/pageFeed

şu bilgilerle

{
    page: 1,
    url: '/kawaicity'
}

POST isteği atılıyor. Sen de 2. sayfadaki ürünlerini almak için php curl ile bu isteği yaptığında, dönen kaynak kodunu yine fonksiyondan geçirip değişiklik yapmadan kullanabilirsin, o kadarınıda sana bırakıyorum :)

bence önce anlaman gereken, html ve react'in kıyaslanabilir şeyler olmadığı :)
neden kullanmalısın sorusu ise, kullanmak zorunda değilsin. ama SPA (single page application) geliştireceksen bu tarz çatıları kullanmak senin işini hızlandırır, düzenli kod yazmanı sağlar, bir sürü problemle kendi başına uğraşmak yerine (ki çoğu zaman bilgin yetersiz kalacaktır) çatılar bunu senin için zaten yapıyor. reactive kodlama yapabiliyorsun, performansı çok daha yüksek olur, çok daha düzenli ve herkesin bildiği bir şey üzerine inşa edebilirsin yapını, ayrıca community (topluluk) de çok önemli, react'inde çok ciddi bir topluluğu var ve aradığın her şeyi bulup yeniden yazmak zorunda kalmadan kullanman mümkün. Ek olarak react'i öğrenince birkaç farklı react native'de yazmaya başlayabilirsin ve mobil uygulamaları geliştirebilirsin.
tabi yazılacak çok şey olabilir, en basiti bir spa örneğini (örn: open.spotify.com) olabilir, html-css-js ve react'i kullanarak 2 farklı şekilde yazmayı dene, neden ihtiyacın olduğunu bir noktada anlayacaksın zaten :)

ace editor kullanıyoruz, ek olarak markdown yazım formatını kullanıyoruz

https://ace.c9.io/
https://github.com/markedjs/marked