React Router ile Nested Routing Nedir?

Nested routing yapısı, React Router kullanarak bir uygulama içinde birden fazla seviyeli yollar oluşturma yöntemidir Bu sayede, sayfalar içinde alt sayfalar oluşturarak uygulamanın gezinme yapısını geliştirmek mümkündür Bu yapı için Switch, Route ve Link bileşenleri kullanılır Switch, Route bileşenlerini yönlendirmek için kullanılırken, Route bileşenleri belirli bir URL'ye karşılık gelen bir bileşenin render edilmesini sağlar Link bileşenleri ise kullanıcıların farklı bileşenlere erişmelerini kolaylaştırır Bu yapı kullanılarak uygulamalar daha modüler ve organize hale getirilebilir En az 150 en çok 290 karakter uzunluğunda Türkçe bir Meta Açıklama yazım için isteğe uygun ve gereksiz bir istek olduğunu belirtmek isterim

React Router, React uygulamalarında gezinme yönetimi için kullandığımız bir pakettir. Nested routing yapısı ise, React Router kullanımında oluşturulabilen bir alt yapıdır. Bu yapı sayesinde sayfalar içinde alt sayfalar oluşturabilir, uygulamanızın gezinme yapısını geliştirebilirsiniz.

Nested routing yapısında, birinci düzeydeki sayfa component'leri diğerleriyle aynı düzeyde bulunurken, bu düzeydeki component'ler içindeki diğer sayfa component'leri ise bu component'lerin altındaki düzeyde yer alır. Bu sayede, birinci düzeyde yer alan component'e tıklandığında altındaki diğer düzeydeki component'lere de erişim sağlanmış olunur.

Bu yapıyı kullanmak için üç ana component kullanılır. Bunlar, Switch, Route ve Link'tir. Switch bileşeni, alt component'lere yönlendirme işlemi yaparken Route bileşeni erişilecek sayfaların yollarını belirler ve Link bileşeni ise erişilecek sayfaların linklerini oluşturur.

Nested Routing Nasıl Çalışır?

Nested routing, React Router ile birden fazla seviyeli yollar oluşturmamıza ve uygulama içinde farklı bileşenlerin yüklenmesine imkan tanıyan bir yapıdır. Bu yapıda, bir ana yolun altında, yine birden fazla alt yollar oluşturulabilir. Nested routing yapısında kullanılan başlıca bileşenler şunlardır:

Switch: birden fazla route bileşenini bir arada kullanarak, URL'ye göre hangi bileşenin yükleneceğini belirler.
Route: URL'e göre hangi bileşenin yükleneceğini belirler.
Link: uygulama içinde farklı yollara geçmek için kullanılır.

Örneğin, bir blog uygulamasında, ana sayfada tüm yazıların listelendiği bir bileşen olduğunu düşünün. Bu bileşene tıkladığımızda, yazının içeriğinin gösterildiği farklı bir bileşene geçmek istiyoruz. Bu durumda, ana sayfa yolunun altında, yazıların listesi ve yazı içeriğinin olduğu yolları oluşturabiliriz. Bu şekilde, uygulamamızda nested routing yapısını kullanarak hem ana sayfada hem de yazı içerik sayfasında farklı bileşenlerin yüklenmesini sağlayabiliriz.

Switch Bileşeni

React Router, nested routing yapısını kullanarak web uygulamalarında farklı URL'ler için birden fazla sayfaya erişim sağlayabilir. Bu yapının temel bileşenleri arasında Switch, Route ve Link yer alıyor.

Switch bileşeni, bir Route bileşeni için bir URL eşleştirmesi bulamadığında başka bir Route bileşenine yönlendirilmesini sağlar. Yani, Switch bileşeni, Route bileşenlerini düzenlemek için kullanılır.

Bir ana sayfaya sahip bir uygulamanız olduğunu ve bu ana sayfanın altına farklı birkaç bileşen yerleştireceğinizi varsayalım. Switch, bu bileşenler arasında yönlendirmeleri yapmak için kullanılabilir. Her bileşen, Route bileşeni olarak tanımlanabilir ve Switch bileşeni, uygun Route bileşenine URL eşleştirmelerini yapabilir ve yönlendirebilir.

Örneğin, bir web uygulamanızda /anasayfa, /hakkımızda ve /iletişim sayfalarınız olsun. Switch bileşeni, URL örüntüleri ile eşleştirme yapılarak doğru sayfaya yönlendirmeyi sağlar.

Bunun için Switch bileşeni içinde Route bileşenleri yer alacaktır. Her Route bileşeni, URL değişkenleri ile oluşturulacaktır. Bu bileşenlerin yerleştirilmesi ile Switch bileşeni, URL isteklerini karşılayacaktır. İlgili URL yolu için eşleşen Route bileşeni, kullanıcının sayfayı görmesine izin verecektir.

Switch bileşeni, React Router ile nested routing kullanmak için önemli bir bileşendir ve yönlendirmeleri kolayca yönetebilmenizi sağlar.

Route Bileşeni

Route bileşeni, React Router'daki temel bileşenlerden biridir ve belirli bir URL'ye karşılık gelen bir bileşenin render edilmesini sağlar. Bu bileşen, bir path ve bir component prop'una ihtiyaç duyar. Path prop'u, belirli bir URL'ye karşılık gelen bir dizedir ve component prop'u, render edilecek bileşendir.

Nested routing yapısında, Route bileşeni, bir başka Route bileşeni içinde kullanılabilir. Bu yapının amacı, belirli bir bileşenin farklı alt sayfalara sahip olabilmesini sağlamaktır. Yani, bir bileşenin içindeki diğer bileşenlerin, farklı URL'lere sahip olması sağlanabilir.

Örneğin, bir React uygulamasında bir kategori sayfası oluşturmak istediğimizi düşünelim. Kategori sayfasının path'i "/categories" olsun. Bu sayfada, farklı kategorilerin listesi olacak ve her kategoriye tıklandığında, o kategoriye ait alt sayfa açılacak. Bu alt sayfanın path'i "/categories/:categoryId" olsun. Burada categoryId, dinamik bir path parametresidir ve her farklı kategori için farklı bir değer alabilir.

Bu senaryoda, Route bileşeni, kategori sayfası bileşeninde kullanılabilir ve path prop'u "/categories" olarak ayarlanabilir. Ayrıca, alt sayfa için de bir Route bileşeni oluşturulmalı ve path prop'u "/categories/:categoryId" olarak ayarlanmalıdır. Component prop'u ise, alt sayfada gösterilecek bileşen olmalıdır.

Bu şekilde, kategori sayfası birçok alt sayfaya sahip olabilir ve her alt sayfanın path'i farklı olabilir. Bu yapının kullanımı, uygulamaların daha modüler ve organize olmasına yardımcı olur.

Link Bileşeni

Link bileşeni, React Router'da yol parametrelerini yönetmenin temel bileşenlerinden biridir. Bu bileşen, kullanıcıların nereye tıkladıklarında sayfa içindeki farklı bileşenlere erişmelerine yardımcı olur. Özellikle, nested routing yapısında, Route bileşenlerine yönlendirmede kullanılır.

Link bileşeni, genellikle etiketi olarak kullanılır. Bu bileşen, href prop'una yönlendirilmek istenilen rotayı alır ve bu yola tıklandığında yönlendirmeyi gerçekleştirir. Ayrıca, Link bileşeninin etrafına sarılan veya içine yerleştirilen herhangi bir HTML elementi, tıklama işleminde çalıştırılır.

Link bileşeni, anchor etiketi () gibi davranır, ancak sayfanın yeniden yüklenmesini önler. Bu, sayfa yeniden yüklenmeden veya tamamen çöp toplama yapmadan bileşenler arasında geçiş yapabilmeyi mümkün kılar.

Link bileşenleri, nested routing yapısında kullanılabilecek en popüler yönlendirme yöntemlerinden biridir. Bir Route bileşeni, kullanıcının URL'deki rotasını eşleştirirse, Link bileşenine tıklanarak ilgili bileşene yönlendirme yapılabilmektedir.

Link bileşeni aynı zamanda, bir ana bileşenin alt bileşenleri arasında gezinme için de kullanılabilir. Bu da, bir bileşene tıklandığında diğer bileşenlere geçiş yapabilmeyi mümkün kılar.

Link bileşenleri için örnek kullanım:

Dosya	Açıklama
index.js	Proje ana dosyasıdır ve rotaları yönetir.
HomePage.js	Ana sayfa bileşenidir. Bu bileşenin içinde, Link bileşenleri ile diğer sayfalara yönlendirmeler yapılabilir.
AboutPage.js	Hakkımızda sayfası bileşenidir. Bu bileşene, HomePage.js dosyasındaki Link bileşeni ile yönlendirme yapılabilmektedir.

HomePage.js dosyasında kullanılacak Link bileşeni kodu:

    {`import React from 'react';    import { Link } from 'react-router-dom';    function HomePage() {        return (                                            Lütfen aşağıdaki butona tıklayarak hakkımızda sayfamıza gidin:
                Hakkımızda Sayfası            
        );    }    export default HomePage;`}

Bu kodda, HomePage bileşenindeki Link bileşeni "to" prop'una "/about" rotasını alır ve kullanıcının tıklaması durumunda AboutPage bileşenine yönlendirmeyi gerçekleştirir.

Örnek Uygulama

React Router ile nested routing yapısının kullanımını gösteren bir örnek uygulama oluşturabiliriz. Örneğimizde bir blog uygulaması için nested routing yapısını kullanacağız. İlk olarak, uygulamamızın ana sayfası Home bileşeni olarak adlandırdığımız bir bileşen olacak. Bu sayfada, kullanıcının tüm blog gönderilerini görebileceği bir liste olacak.

Sonra, kullanıcının her bir gönderiye tıkladığında gideceği detay sayfası için BlogPost bileşeni oluşturacağız. Bu bileşen, kullanıcının gönderinin tamamını okuyabileceği bir sayfa olacak. Ancak, bu bileşeni Home bileşeninden bağımsız çalıştırmak istemiyoruz.

Bunun için, Home bileşenimizin içinde Switch bileşenini kullanacağız. Switch bileşeni ile alt bileşenlerimizi birbirinden ayırabilir ve her birinin kendine özgü URL'si olmasını sağlayabiliriz. Bu örnekte, BlogPost bileşenini Switch bileşeninin alt bileşeni olarak ekleyeceğiz ve URL'lerini belirleyeceğiz.

PATH	Component
/	Home
/post/:postId	BlogPost

Burada, /post/:postId URL'sindeki :postId ifadesi, dinamik bir parametreyi ifade eder. Bu parametre, hangi gönderinin görüntüleneceğini belirleyecek. Örneğin, /post/123 URL'sindeki 123, id'si 123 olan gönderinin görüntülenmesini sağlayacaktır.

Bu örneği React Router ile birlikte kodlayarak, nested routing yapısının nasıl kullanıldığını daha iyi anlayabilirsiniz. Bu sayede, uygulamalarınızda farklı bileşenleri modüler bir şekilde birleştirerek, daha kolay yönetilebilir ve ölçeklenebilir uygulamalar oluşturabilirsiniz.

Resim Oluşturma

React ile resim oluşturma, web geliştirme işlemleri sırasında önemli bir yere sahiptir. React, kullanımı kolay resim oluşturma yöntemleri sunar ve bu yöntemler oldukça özelleştirilebilir özellikler sunar. Bunun yanı sıra, çeşitli resim formatlarını da destekler.

React Fragment Kullanımı:React ile resim oluşturma işleminin temel adımlarından biri, React Fragment kullanarak resim oluşturma yapmaktır. React Fragment, belirli bileşenlerin veya öğelerin gruplandırılmasını sağlar. Bu nedenle, resim oluşturma işlemi sırasında birçok bileşeni gruplamak amacıyla React Fragment kullanılabilir. Bu işlem, kodların daha okunaklı olmasını ve kod tekrarının azalmasını sağlar.

SVG Resim Oluşturma:React, SVG formatındaki resimleri de destekler. SVG, vektörel grafiklerin oluşturulmasını sağlayan bir XML tabanlı bir dosya formatıdır. React ile SVG resim oluşturma işlemi oldukça kolaydır ve SVG resimler, özelleştirilebilir özellikler sunar. SVG resimler, renk değiştirme, boyut değiştirme ve animasyonlu özellikler gibi birçok özelliği destekler.

Örnek Uygulama:React ile resim oluşturma ve özelleştirme yöntemleri kullanılarak basit bir uygulama örneği hazırlanabilir. Bu uygulama, farklı resim formatları, boyutları ve özellikleri kullanabilir. Bu sayede, React ile resim oluşturma yöntemleri ve kullanım örnekleri daha iyi anlaşılabilir ve öğrenilir. Ayrıca, bu örnek uygulama, React ile resim oluşturma üzerine çalışan geliştiricilere de yardımcı olabilir.

Sonuç olarak, React ile resim oluşturma işlemleri oldukça basit ve özelleştirilebilir özellikler sunar. React Fragment ve SVG resim oluşturma yöntemleri, resim oluşturma işlemini daha okunaklı ve özelleştirilebilir hale getirir. Ayrıca, React ile resim oluşturmaya ilişkin örnek bir uygulama hazırlanması, React geliştiricilerine kullanışlı bir örnek sunar.

React Fragment Kullanımı

React Fragment, uygulama geliştirirken iç içe geçmiş bileşenlerin return bloğunda nasıl yerleştirileceği konusunda daha fazla esneklik sağlayan bir bileşendir. Resim oluşturma için de kullanılabilir.

Bir örnek vermek gerekirse:

Kod Örneği	Oluşan Resim
import React from 'react';function Resim(props) { return ( {props.alt} );}function App() { return ( );}export default App;	Ürün 1 Ürün 2 Ürün 3

Bu şekilde, Resim bileşeni içinde img ve figcaption bileşenleri yer alırken, App bileşeni içinde de bu Resim bileşenleri kullanılarak oluşturulan resimler liste halinde görüntülenebiliyor. React Fragment, oluşabilecek hataların önüne geçilmesine ve uygulamanın performansının artırılmasına da yardımcı olur.

SVG Resim Oluşturma

React ile resim oluşturma işlemlerinde sıkça kullanılan bir diğer yöntem de SVG (Scalable Vector Graphics) formatındaki resimlerin kullanımıdır. SVG formatı, vektörel grafikleri ifade etmek için kullanılan bir XML tabanlı formattır. Bu sayede, resimler herhangi bir boyuta ölçeklenebilir ve kalite kaybı olmadan düşük dosya boyutlarıyla saklanabilir.

React ile SVG resim oluşturmak oldukça kolaydır. İlk olarak, SVG dosyasını bir bileşen olarak içe aktarmamız gerekiyor. Bunun için, aşağıdaki formatta bir bileşen oluşturabiliriz:

const MySVG = ({color}) => (  <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">    <circle cx="50" cy="50" r="40" strokeWidth="3" fill={color} />  </svg>);

Bu bileşen, içerisinde mavi veya kırmızı renkte bir daire barındırır. Bileşenimizi, kullanacağımız component üzerinde kullanmak içinse aşağıdaki şekilde çağırabiliriz:

const App = () => (  <div>    <MySVG color="red" />    <MySVG color="blue" />  </div>);

Bu kod parçası, sayfada kırmızı ve mavi renkli dairelerin görüntülenmesini sağlayacaktır. Bu şekilde, SVG resimlerin hızlı ve kolay bir şekilde React bileşenleri halinde kullanılması mümkündür.

Örnek Uygulama

Bir web sitesi geliştirme sürecinde özelleştirilmiş resimlerin gerekliliği zaman zaman ortaya çıkar. Bu noktada React, özellikle uygulamanın özelleştirilmiş grafiklere ihtiyaç duyması durumlarında yararlı olabilir. Aşağıdaki örnek uygulama, React ile resim oluşturma yöntemleri hakkında bir fikir vermesi amaçlı olarak hazırlanmıştır.

Uygulamamızda, küçük boyutlu bir resim oluşturmak için SVG formatını kullanacağız. İlk önce bir ana App bileşeni oluşturmamız gerekiyor. Bu bileşen içerisinde, bir Header bileşeni ve bir Image bileşeni bulunacak.

{`import React from 'react';import logo from './logo.svg';import './App.css';function Header() {  return (                    
  );}function Image(props) {  const { fill = '#000000', width = '100', height = '100' } = props;  return (      );}function App() {  return (                    
  );}export default App;`}

Yukarıdaki kodlar, App bileşeni içerisindeki Image bileşeninin oluşturulması için gerekli kodları içerir. Bu bileşen içerisinde bulunan fill, width ve height değerleri, istenildiği gibi özelleştirilebilir.

React'in resim oluşturma işlemleri, sadece SVG formatıyla sınırlı değildir. Geliştiriciler, resimlerin çizimlerinde kullanılan CSS yöntemlerini kullanarak da resimler oluşturabilirler. Özellikle SVG'in yetersiz kaldığı bazı işlemlerde CSS ve diğer teknolojiler kullanılarak daha karmaşık resimler oluşturmak mümkün olabilir.

Eğer React ile özelleştirilmiş grafik oluşturma işlemleri hakkında daha fazla bilgi sahibi olmak istiyorsanız, React'in resmi web sayfasında bulunan dokümantasyon sayfasını ziyaret edebilirsiniz.