Çözüldü React ile Sayfayı bölme işlemi nasıl yapılır?

Flex yada grid body yada div içine sağ ve sol şeklinde koyarsan olur iki adet div atar ve onların içine ayarlarsan olur. İkisine de width 50% verirsin. Div'in birinin soluna diğerinin sağına border eklersen ortada da seperator olmuş olur.

Zaten bu kadar kolay olmasını beklememek lazımdı

Bunların hepsini önceden yükleyip, display hidden, ve block şeklinde yapabilirim. Ama bu sayfayı yavaştır mı? Veya sizin farklı bir yöntem tavsiyeniz var mıdır?

TheAny dedi:

Flex'ya da Grid body ya da div içine sağ ve sol şeklinde koyarsan olur iki adet div atar ve onların içine ayarlarsan olur. İkisine de width 50% verirsin. Div'in birinin soluna diğerinin sağına border eklersen ortada da seperator olmuş olur.

Genişletmek için tıkla...

Ben solda ki linklere tıkladığımda sağ'da başka bir sayfa görmek istiyorum.

iFrame kullanabilirsin yada; Çözüldü: HTML sayfa değiştirmeden içerik değiştirme

Konu ne kadar React olsada hala yapmak istediğin şey temelde zaten HTML'in ve JS'in sunduğu bir beceri. React server side, senin isteğin client side. Client bir linke tıkladığında diğer divin içerisinde istenilen sayfa olsun istiyorsan yapacağın şey ya ajax veya jquery veya benzeri bir yöntem ile sayfayı yükleyip bir dive aktarmak yada iFrame kullanmak. Server tarafında yapacağın bir şey değil bu.

TheAny dedi:

iFrame kullanabilirsin yada; Çözüldü: HTML sayfa değiştirmeden içerik değiştirme

Konu ne kadar React olsada hala yapmak istediğin şey temelde zaten HTML'in ve JS'in sunduğu bir beceri. React server side, senin isteğin client side. Client bir linke tıkladığında diğer divin içerisinde istenilen sayfa olsun istiyorsan yapacağın şey ya ajax veya jquery veya benzeri bir yöntem ile sayfayı yükleyip bir dive aktarmak yada iFrame kullanmak. Server tarafında yapacağın bir şey değil bu.

Genişletmek için tıkla...

Hocam bu tam anlamıyla sorunumu çözmüyor. Ben yukarı da url nin de değişmesini istiyorum.

Mesela sol tarafta ürün 1 ve ürün 2 linkleri olacak;
Sağ taraf ise şuan boş. Url ise şuan => siteadi.com/urunler

Ben ürün 1'e bastığımda. Sol taraf sabit kalacak. Sağ tarafta ise ürün 1 sayfası gelecek. Url ise siteadi.com/urunler/urun-1 şeklinde güncellenecek.

Bu url değişiminde sol taraf tekrar update olmasın.

Aslında sorunumun çözümü, react router. Ama bu yöntem şuan çalışmıyor.



Seçtiğim içeriye görede boş kısım dolsun işte. Örnek şablon böyle gösterebilirim sanırım.

Routelarla çözüleceğini düşünüyorum. React'ta nasıl çalışır tam bilmiyorum ama PHP'de şöyle yapardım ben; Sol menüyü db'den dolayısıyla serverdan getireceğim, garanti. Seçili olan ürünün aktif olması kısmını client tarafında JS ile yapabiliriz yada listelerken ürün id'sinden aktif ekleriz, fark etmez. Sağ taraf içinde oluşturduğum düzenleme sayfasını ekler ve id'den getiririm ürünü ardından ne yapcaksam yaparım. Yani full çalışan bir örnek sunmam uzun sürer diye 5-10 dakikada şöyle bir şey hazırladım. Daha iyi yazılabilir mantık muhtemelen ama aşağı yukarı böyle bir şey işine yaramalı.

Bu aşağıdaki return view(); React'takine benziyor olmalı. Yanılmıyorsam TS ile return {//Page content }
şeklinde döndürülüyor.

Ürün sayfası.

Route kısmı.

RaSGooL dedi:

Yapmak istediğin şey Layout.

Basit bir şekilde;

JSX:Panoya kopyala

import React from 'react'
import { Outlet } from 'react-router'

export const Layout = () => {
   
    return (
        <div>
            bla bla
           
            {/*Outlet kısmı sayfaların geleceği alan.*/}
            <Outlet />
        </div>
    )
}

Router;

JSX:Panoya kopyala

import React from 'react'
import {Route, Routes} from 'react-router'

export const Router = () => {
   
    return (
        <Routes>
            <Route path="no-layout" element={<NoLayoutPage />} />
            <Route path="/" element={<Layout />}>
                <Route path="about" element={<AboutPage />} />
                <Route path="" exact element={<HomeLandingPage />} />
        </Routes>
    )

}

Bu çok basit bir örnek. Authentication ve Authorize işleri girince karışıyor biraz. Ben şu şekil kullanmışım;

JSX:Panoya kopyala

<Route element={<ProtectedRoute roles={[ROLES.admin]} />}>
    <Route
        path='dashboard/*'
        element={
            <React.Suspense fallback={<AdminLoading />}>
                <AdminRouter />
            </React.Suspense>
        }
    />
</Route>

Genişletmek için tıkla...

Yarın deniycem hocam çok sağolun.

Hocam şuan ben e ticaret sitesine backend bağlamayacağım. Router'de auth işlemlerini yaptırayım mı? Çünkü auth konusunda hiç bir şey bilmiyorum. Projeyi de biraz hızlı bitirmek istiyorum. Ama auth işlemlerini de öğrenmem lazım, bu projede işler çok karışır diye korkuyorum.

mahmutxd07 dedi:

Yarın deniycem hocam çok sağolun.

Hocam şuan ben e ticaret sitesine backend bağlamayacağım. Router'de auth işlemlerini yaptırayım mı? Çünkü auth konusunda hiç bir şey bilmiyorum. Projeyi de biraz hızlı bitirmek istiyorum. Ama auth işlemlerini de öğrenmem lazım, bu projede işler çok karışır diye korkuyorum.

Genişletmek için tıkla...

Sen bilirsin. Sana güzel deneyimler katar. Ama biraz uğraştırır tabi. Şu anlık es de geçebilirsin. İleriki fazlarda eklersin.