Adı : React Router ve MongoDB Nedir?

React Router

React Router, React uygulamalarında sayfaların yönlendirme ve düzenlemelerini kolaylaştırmak için kullanılan bir kütüphanedir. React Router, modern SPA'ların (Single Page Application) en yaygın kullanılan yöntemidir ve kullanıcıların web sayfaları arasında gezinmelerini sağlar.

React Router, bir sayfada bulunan tüm bileşenleri (component) yönetebilir. Ayrıca, URL üzerinde yapılan herhangi bir değişiklik, React Router tarafından algılanabilir ve sayfa içeriği dinamik olarak değiştirilir. Bu şekilde, uygulama kullanıcısına dinamik bir deneyim sunar.

React Router kullanarak, ana sayfa, uygulama yapısı, tab menüler, navigasyon çubukları, breadcrumb ve daha birçok navigasyon ögesi oluşturabilirsiniz. Geleneksel bir web sitesi yerine, yüksek performanslı, hızlı ve duyarlı bir SPA sunabilirsiniz.

Örnek:

React Router kullanarak çok basit bir SPA (Single Page Application) örneği oluşturalım. Bu örnekte, 'Ana Sayfa' ve 'Hakkımızda' sayfaları bulunacak ve bir menüde yer alacaklar.

1. İlk olarak, React Router kütüphanesini yükleyin.

npm install react-router-dom

2. Ana sayfa ve Hakkımızda bileşenlerimiz:

import React from 'react';

const Home = () => {
return (

);
};

const About = () => {
return (

);
};

3. React Router yönlendirmeleri ve menu bileşenimiz:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import Home from './Home';
import About from './About';

const App = () => {
return (

);
};

export default App;

Yukarıdaki örnekte, React Router, bileşeni aracılığıyla yönlendirmeleri işlemektedir. Yönlendirmede, bileşeni kullanılmıştır. Her bir sayfa için bir anahtar kelime oluşturulmuştur (/about ve /). Menü öğeleri, bileşenleri kullanılarak oluşturulmuştur.

MongoDB

MongoDB, modern web uygulamalarına uygun olan bir NoSQL veritabanıdır. MongoDB, verilerin kaydedilmesi, yönetilmesi ve sorgulanması için kullanılır. Geleneksel SQL tabanlı veritabanlarına göre bazı farklılıkları vardır ve bu nedenle, birçok uygulama geliştiricisi tarafından tercih edilir. MongoDB, JSON benzeri bir veri formatı olan BSON'i kullanır.

Birçok veri modeli, gereksinimlerine uygun şekilde birbirine bağlandığı için MongoDB'ye uygun olur. MongoDB, belge tabanlı bir veritabanı olduğu için, karmaşık veri yapısı oluşturmanın kolay olması nedeniyle sevilir. İhtiyaçlarınıza uygun bir şekilde veri modelleme yapabilir ve ilerideki değişikliklere uyum sağlar.

Örnek:

MongoDB kullanarak, öğrencilerin verilerini kaydetmek için basit bir uygulama oluşturalım. Bu uygulamada, öğrencilerin adı, yaşları ve sınıf bilgileri içereceğiz.

1. MongoDB'ye bağlanmak için dışa aktarılan bir veritabanı objesi oluşturun.

const MongoClient = require('mongodb').MongoClient;
const uri = 'mongodb://localhost:27017/test';
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

let collection;
client.connect(err => {
collection = client.db(\"test\").collection(\"students\");
});

2. Örnek öğrenci verilerini ekleme:

const data = [
{
name: 'Ayşe',
age: 20,
grade: '12',