Refactor blog posts with code snippets and formatting improvements for better readability and consistency across various topics including Chakra UI, Materialize, Docker, Jest, Cypress, Next.js, Svelte, Tailwind CSS, Three.js, and TypeScript.
This commit is contained in:
Poyraz Avsever
@@ -12,7 +12,6 @@ canonicalUrl: "https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoru
|
||||
|
||||
# CSS Frameworkleri Tanıyoruz | 1. Bölüm: Bootstrap
|
||||
|
||||
|
||||
|
||||
|
||||
CSS Frameworkleri, artık modern web geliştirme süreçlerinde hayat kurtarıcı oluyor. Kendi css dosyalarımızı sıfırdan yazmak yerine, önceden hazırlanmış, optimize edilmiş ve test edilmiş kodlardan faydalanabiliyoruz. Bu yazı serisi boyunca, en popüler frameworkleri adım adım birlikte öğreneceğiz. Serimizin ilk konuğu: **Bootstrap**!
|
||||
@@ -21,18 +20,18 @@ CSS Frameworkleri, artık modern web geliştirme süreçlerinde hayat kurtarıc
|
||||
|
||||
Bootstrap, Twitter mühendisleri tarafından geliştirilen, açık kaynaklı bir CSS frameworküdür. Temel amacı, hızlı ve uyumlu (responsive) web siteleri oluşturmayı kolaylaştırmaktır.
|
||||
|
||||
* **İlk Çıkış Yılı:** 2011
|
||||
* **Geliştiriciler:** Mark Otto ve Jacob Thornton
|
||||
* **Ana Özellikleri:** Responsive grid sistemi, hazır UI bileşenleri, JavaScript pluginleri ve hızlı prototipleme imkanı.
|
||||
- **İlk Çıkış Yılı:** 2011
|
||||
- **Geliştiriciler:** Mark Otto ve Jacob Thornton
|
||||
- **Ana Özellikleri:** Responsive grid sistemi, hazır UI bileşenleri, JavaScript pluginleri ve hızlı prototipleme imkanı.
|
||||
|
||||
## Neden Bootstrap?
|
||||
|
||||
Günümüzde hangi kurumdan, videodan ya da dökümantasyonlardan front-end öğrenmeye çalışıyorsanız karşınıza kesinlikle “Bootstrap” çıkmıştır çünkü:
|
||||
|
||||
* **Kolay Başlangıç:** CDN üzerinden birkaç satır kodla hızlıca çalışmaya başlayabilirsin.
|
||||
* **Mobil Öncelikli:** Tüm tasarımlar mobil uyumlu düşünülerek geliştirilmiştir.
|
||||
* **Topluluk Desteği:** Sorun yaşadığında veya geliştirmek istediğinde çok geniş bir kaynak ve topluluk seni bekliyor.
|
||||
* **Kapsamlı Bileşenler:** Düğmeler, formlar, modallar, navigasyon barları ve daha fazlası hazır halde gelir.
|
||||
- **Kolay Başlangıç:** CDN üzerinden birkaç satır kodla hızlıca çalışmaya başlayabilirsin.
|
||||
- **Mobil Öncelikli:** Tüm tasarımlar mobil uyumlu düşünülerek geliştirilmiştir.
|
||||
- **Topluluk Desteği:** Sorun yaşadığında veya geliştirmek istediğinde çok geniş bir kaynak ve topluluk seni bekliyor.
|
||||
- **Kapsamlı Bileşenler:** Düğmeler, formlar, modallar, navigasyon barları ve daha fazlası hazır halde gelir.
|
||||
|
||||
## Nasıl Başlıyoruz?
|
||||
|
||||
@@ -40,36 +39,41 @@ Günümüzde hangi kurumdan, videodan ya da dökümantasyonlardan front-end öğ
|
||||
|
||||
HTML dosyana sadece şu satırları eklemen yeterli:
|
||||
|
||||
<link href\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel\="stylesheet"\>
|
||||
```html
|
||||
<link href\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel\="stylesheet"\>
|
||||
<script src\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"\></script\>
|
||||
```
|
||||
|
||||
**2\. Yöntem: NPM Üzerinden Kurulum**
|
||||
|
||||
|
||||
Projeni biraz daha büyük ölçekli yönetmek istersen:
|
||||
|
||||
```bash
|
||||
npm install bootstrap
|
||||
```
|
||||
|
||||
## İlk Bootstrap Deneyimimiz: Basit Bir Sayfa
|
||||
|
||||
Şimdi Bootstrap’ı küçük bir örnekle kullanalım:
|
||||
|
||||
<!DOCTYPE html\>
|
||||
<html lang\="tr"\>
|
||||
<head\>
|
||||
<meta charset\="UTF-8"\>
|
||||
<meta name\="viewport" content\="width=device-width, initial-scale=1.0"\>
|
||||
<title\>Bootstrap Başlangıç</title\>
|
||||
<link href\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel\="stylesheet"\>
|
||||
</head\>
|
||||
<body\>
|
||||
<div class\="container mt-5"\>
|
||||
<h1 class\="text-center"\>Merhaba Bootstrap!</h1\>
|
||||
<p class\="lead text-center"\>CSS frameworkleri serimizin ilk adımındasınız 🎉</p\>
|
||||
<button class\="btn btn-primary d-block mx-auto"\>Bana Tıkla!</button\>
|
||||
</div\>
|
||||
</body\>
|
||||
```html
|
||||
<!DOCTYPE html\>
|
||||
<html lang\="tr"\>
|
||||
<head\>
|
||||
<meta charset\="UTF-8"\>
|
||||
<meta name\="viewport" content\="width=device-width, initial-scale=1.0"\>
|
||||
<title\>Bootstrap Başlangıç</title\>
|
||||
<link href\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel\="stylesheet"\>
|
||||
</head\>
|
||||
<body\>
|
||||
<div class\="container mt-5"\>
|
||||
<h1 class\="text-center"\>Merhaba Bootstrap!</h1\>
|
||||
<p class\="lead text-center"\>CSS frameworkleri serimizin ilk adımındasınız 🎉</p\>
|
||||
<button class\="btn btn-primary d-block mx-auto"\>Bana Tıkla!</button\>
|
||||
</div\>
|
||||
</body\>
|
||||
</html\>
|
||||
```
|
||||
|
||||
Ve işte bu kadar.
|
||||
|
||||
@@ -77,23 +81,27 @@ Ve işte bu kadar.
|
||||
|
||||
Bootstrap projeleri, genellikle şu 3 temel yapı üzerine kuruludur:
|
||||
|
||||
* **Container:** İçerikleri sınırlamak ve hizalamak için kullanılır.
|
||||
* **Row:** Satır oluşturur. Grid sisteminin temel taşıdır.
|
||||
* **Col:** Sütunları ifade eder. Responsive tasarımın kalbidir.
|
||||
- **Container:** İçerikleri sınırlamak ve hizalamak için kullanılır.
|
||||
- **Row:** Satır oluşturur. Grid sisteminin temel taşıdır.
|
||||
- **Col:** Sütunları ifade eder. Responsive tasarımın kalbidir.
|
||||
|
||||
## Container Nedir?
|
||||
|
||||
`container` sınıfı, içerikleri ortalamak ve belirli bir genişlikte tutmak için kullanılır.
|
||||
|
||||
<div class\="container"\>
|
||||
İçerik burada yer alacak.
|
||||
```html
|
||||
<div class\="container"\>
|
||||
İçerik burada yer alacak.
|
||||
</div\>
|
||||
```
|
||||
|
||||
İstersen tam genişlikte bir container da kullanabilirsin:
|
||||
|
||||
<div class\="container-fluid"\>
|
||||
Bu container ekranın tamamını kaplar.
|
||||
```html
|
||||
<div class\="container-fluid"\>
|
||||
Bu container ekranın tamamını kaplar.
|
||||
</div\>
|
||||
```
|
||||
|
||||
## 2\. Bootstrap Grid Sistemi
|
||||
|
||||
@@ -101,13 +109,15 @@ Bootstrap’ın en güçlü özelliklerinden biri: **12 kolonlu grid sistemi**.
|
||||
|
||||
### Basit Grid Kullanımı
|
||||
|
||||
<div class\="container"\>
|
||||
<div class\="row"\>
|
||||
<div class\="col"\>Sütun 1</div\>
|
||||
<div class\="col"\>Sütun 2</div\>
|
||||
<div class\="col"\>Sütun 3</div\>
|
||||
</div\>
|
||||
```html
|
||||
<div class\="container"\>
|
||||
<div class\="row"\>
|
||||
<div class\="col"\>Sütun 1</div\>
|
||||
<div class\="col"\>Sütun 2</div\>
|
||||
<div class\="col"\>Sütun 3</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
Yukarıdaki kod 3 eşit genişlikte sütun oluşturuyor.
|
||||
|
||||
@@ -115,23 +125,27 @@ Yukarıdaki kod 3 eşit genişlikte sütun oluşturuyor.
|
||||
|
||||
İstersen sütunlara özel genişlikler de verebilirsin:
|
||||
|
||||
<div class\="row"\>
|
||||
<div class\="col-6"\>%50 genişlik</div\>
|
||||
<div class\="col-3"\>%25 genişlik</div\>
|
||||
<div class\="col-3"\>%25 genişlik</div\>
|
||||
```html
|
||||
<div class\="row"\>
|
||||
<div class\="col-6"\>%50 genişlik</div\>
|
||||
<div class\="col-3"\>%25 genişlik</div\>
|
||||
<div class\="col-3"\>%25 genişlik</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
### Responsive Grid
|
||||
|
||||
Farklı ekran boyutlarına göre farklı genişlikler ayarlayabilirsin:
|
||||
|
||||
<div class\="row"\>
|
||||
<div class\="col-12 col-md-8"\>Büyük ekranlarda 8 birim</div\>
|
||||
<div class\="col-6 col-md-4"\>Büyük ekranlarda 4 birim</div\>
|
||||
```html
|
||||
<div class\="row"\>
|
||||
<div class\="col-12 col-md-8"\>Büyük ekranlarda 8 birim</div\>
|
||||
<div class\="col-6 col-md-4"\>Büyük ekranlarda 4 birim</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
* `col-12`: Küçük ekranlarda tüm satırı kapla.
|
||||
* `col-md-8`: Orta ve daha büyük ekranlarda 8 kolon kapla.
|
||||
- `col-12`: Küçük ekranlarda tüm satırı kapla.
|
||||
- `col-md-8`: Orta ve daha büyük ekranlarda 8 kolon kapla.
|
||||
|
||||
## 3\. Bootstrap Bileşenleri
|
||||
|
||||
@@ -139,98 +153,106 @@ Bootstrap, tonlarca hazır bileşen sunuyor. Birkaç önemli bileşene beraber b
|
||||
|
||||
### Düğmeler (Buttons)
|
||||
|
||||
<button class\="btn btn-primary"\>Primary Düğme</button\>
|
||||
<button class\="btn btn-success"\>Success Düğme</button\>
|
||||
```html
|
||||
<button class\="btn btn-primary"\>Primary Düğme</button\>
|
||||
<button class\="btn btn-success"\>Success Düğme</button\>
|
||||
<button class\="btn btn-danger"\>Danger Düğme</button\>
|
||||
```
|
||||
|
||||
Renk kodları ile istediğin tarzı seçebilirsin.
|
||||
|
||||
### Kartlar (Cards)
|
||||
|
||||
<div class\="card" style="width: 18rem;"\>
|
||||
<img src\="https://via.placeholder.com/150" class\="card-img-top" alt\="..."\>
|
||||
<div class\="card-body"\>
|
||||
<h5 class\="card-title"\>Kart Başlığı</h5\>
|
||||
<p class\="card-text"\>Bu bir Bootstrap kart bileşenidir.</p\>
|
||||
<a href\="#" class\="btn btn-primary"\>Bir yere git</a\>
|
||||
</div\>
|
||||
```html
|
||||
<div class\="card" style="width: 18rem;"\>
|
||||
<img src\="https://via.placeholder.com/150" class\="card-img-top" alt\="..."\>
|
||||
<div class\="card-body"\>
|
||||
<h5 class\="card-title"\>Kart Başlığı</h5\>
|
||||
<p class\="card-text"\>Bu bir Bootstrap kart bileşenidir.</p\>
|
||||
<a href\="#" class\="btn btn-primary"\>Bir yere git</a\>
|
||||
</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
Kartlar, görsel + içerik kombinasyonları için çok ideal.
|
||||
|
||||
### Navigasyon Bar (Navbar)
|
||||
|
||||
<nav class\="navbar navbar-expand-lg navbar-light bg-light"\>
|
||||
<a class\="navbar-brand" href\="#"\>Logo</a\>
|
||||
<button class\="navbar-toggler" type\="button" data-bs-toggle\="collapse" data-bs-target\="#navbarNav"\>
|
||||
<span class\="navbar-toggler-icon"\></span\>
|
||||
</button\>
|
||||
<div class\="collapse navbar-collapse" id\="navbarNav"\>
|
||||
<ul class\="navbar-nav"\>
|
||||
<li class\="nav-item"\>
|
||||
<a class\="nav-link active" href\="#"\>Ana Sayfa</a\>
|
||||
</li\>
|
||||
<li class\="nav-item"\>
|
||||
<a class\="nav-link" href\="#"\>Hakkında</a\>
|
||||
</li\>
|
||||
</ul\>
|
||||
</div\>
|
||||
```html
|
||||
<nav class\="navbar navbar-expand-lg navbar-light bg-light"\>
|
||||
<a class\="navbar-brand" href\="#"\>Logo</a\>
|
||||
<button class\="navbar-toggler" type\="button" data-bs-toggle\="collapse" data-bs-target\="#navbarNav"\>
|
||||
<span class\="navbar-toggler-icon"\></span\>
|
||||
</button\>
|
||||
<div class\="collapse navbar-collapse" id\="navbarNav"\>
|
||||
<ul class\="navbar-nav"\>
|
||||
<li class\="nav-item"\>
|
||||
<a class\="nav-link active" href\="#"\>Ana Sayfa</a\>
|
||||
</li\>
|
||||
<li class\="nav-item"\>
|
||||
<a class\="nav-link" href\="#"\>Hakkında</a\>
|
||||
</li\>
|
||||
</ul\>
|
||||
</div\>
|
||||
</nav\>
|
||||
```
|
||||
|
||||
## Mini Proje: Bootstrap ile Basit Bir İletişim Sayfası
|
||||
|
||||
Öğrendiklerimizi pekiştirmek için birlikte küçük bir iletişim sayfası tasarlayalım.
|
||||
|
||||
<!DOCTYPE html\>
|
||||
<html lang\="tr"\>
|
||||
<head\>
|
||||
<meta charset\="UTF-8"\>
|
||||
<meta name\="viewport" content\="width=device-width, initial-scale=1"\>
|
||||
<title\>İletişim Formu</title\>
|
||||
<link href\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel\="stylesheet"\>
|
||||
</head\>
|
||||
<body\>
|
||||
|
||||
<div class\="container py-5"\>
|
||||
<h2 class\="text-center mb-4"\>Bize Ulaşın</h2\>
|
||||
|
||||
<form class\="mx-auto" style\="max-width: 600px;"\>
|
||||
<div class\="mb-3"\>
|
||||
<label for\="name" class\="form-label"\>Adınız</label\>
|
||||
<input type\="text" class\="form-control" id\="name" placeholder\="Adınızı girin"\>
|
||||
</div\>
|
||||
<div class\="mb-3"\>
|
||||
<label for\="email" class\="form-label"\>E-posta Adresiniz</label\>
|
||||
<input type\="email" class\="form-control" id\="email" placeholder\="E-posta adresinizi girin"\>
|
||||
</div\>
|
||||
<div class\="mb-3"\>
|
||||
<label for\="message" class\="form-label"\>Mesajınız</label\>
|
||||
<textarea class\="form-control" id\="message" rows\="4" placeholder\="Mesajınızı yazın"\></textarea\>
|
||||
</div\>
|
||||
<button type\="submit" class\="btn btn-primary w-100"\>Gönder</button\>
|
||||
</form\>
|
||||
</div\>
|
||||
|
||||
</body\>
|
||||
```html
|
||||
<!DOCTYPE html\>
|
||||
<html lang\="tr"\>
|
||||
<head\>
|
||||
<meta charset\="UTF-8"\>
|
||||
<meta name\="viewport" content\="width=device-width, initial-scale=1"\>
|
||||
<title\>İletişim Formu</title\>
|
||||
<link href\="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel\="stylesheet"\>
|
||||
</head\>
|
||||
<body\>
|
||||
|
||||
<div class\="container py-5"\>
|
||||
<h2 class\="text-center mb-4"\>Bize Ulaşın</h2\>
|
||||
|
||||
<form class\="mx-auto" style\="max-width: 600px;"\>
|
||||
<div class\="mb-3"\>
|
||||
<label for\="name" class\="form-label"\>Adınız</label\>
|
||||
<input type\="text" class\="form-control" id\="name" placeholder\="Adınızı girin"\>
|
||||
</div\>
|
||||
<div class\="mb-3"\>
|
||||
<label for\="email" class\="form-label"\>E-posta Adresiniz</label\>
|
||||
<input type\="email" class\="form-control" id\="email" placeholder\="E-posta adresinizi girin"\>
|
||||
</div\>
|
||||
<div class\="mb-3"\>
|
||||
<label for\="message" class\="form-label"\>Mesajınız</label\>
|
||||
<textarea class\="form-control" id\="message" rows\="4" placeholder\="Mesajınızı yazın"\></textarea\>
|
||||
</div\>
|
||||
<button type\="submit" class\="btn btn-primary w-100"\>Gönder</button\>
|
||||
</form\>
|
||||
</div\>
|
||||
|
||||
</body\>
|
||||
</html\>
|
||||
```
|
||||
|
||||
### Bu Mini Projede Neler Öğrendik?
|
||||
|
||||
* Container ve grid yapısını kullanarak belli bir düzen oluşturduk.
|
||||
* Form elemanlarını Bootstrap ile daha şık hale getirdik.
|
||||
* Button ve spacing (boşluk) classlarını (py-5, mb-3, w-100) kullandık.
|
||||
- Container ve grid yapısını kullanarak belli bir düzen oluşturduk.
|
||||
- Form elemanlarını Bootstrap ile daha şık hale getirdik.
|
||||
- Button ve spacing (boşluk) classlarını (py-5, mb-3, w-100) kullandık.
|
||||
|
||||
Bu küçük örnek, Bootstrap ile bir tasarımın ne kadar hızlı oluşturabileceğinizi gösteriyor. Yukarıdaki kodları inceleyerek bir çok noktayı anlayabilirsiniz.
|
||||
|
||||
## Bootstrap’ı Daha İyi Öğrenmek İçin Ne Yapabilirsin?
|
||||
|
||||
* **Bootstrap Resmi Dokümantasyonu** sürekli güncelleniyor ve harika örneklerle dolu, inceleyebilirsiniz. ([https://getbootstrap.com/](https://getbootstrap.com/))
|
||||
* **Kendi Küçük Projelerini Yap:** Mini portföyler, basit blog tasarımları, admin panelleri denemek çok öğretici olur.
|
||||
* **Responsive Tasarımlar Üzerinde Çalış:** Farklı ekran boyutlarına uyum sağlamak için grid ve flex yapılarını bol bol kullan. Bunları ne kadar çok kullanırsan aşinalığın o kadar artacak.
|
||||
* **Bootstrap Temalarına Göz At:** Ücretsiz tema sitelerinden ilham alabilirsin, kodlarını incele ve kendin tekrar kurmaya çalış. (Örneğin: [https://startbootstrap.com/](https://startbootstrap.com/))
|
||||
* **Ekstra Bileşenleri Kullanmayı Öğren:** Modals, Toasts, Offcanvas gibi daha ileri seviye bileşenleri projelerinde deneyerek Bootstrap bilgin kat kat artar.
|
||||
- **Bootstrap Resmi Dokümantasyonu** sürekli güncelleniyor ve harika örneklerle dolu, inceleyebilirsiniz. ([https://getbootstrap.com/](https://getbootstrap.com/))
|
||||
- **Kendi Küçük Projelerini Yap:** Mini portföyler, basit blog tasarımları, admin panelleri denemek çok öğretici olur.
|
||||
- **Responsive Tasarımlar Üzerinde Çalış:** Farklı ekran boyutlarına uyum sağlamak için grid ve flex yapılarını bol bol kullan. Bunları ne kadar çok kullanırsan aşinalığın o kadar artacak.
|
||||
- **Bootstrap Temalarına Göz At:** Ücretsiz tema sitelerinden ilham alabilirsin, kodlarını incele ve kendin tekrar kurmaya çalış. (Örneğin: [https://startbootstrap.com/](https://startbootstrap.com/))
|
||||
- **Ekstra Bileşenleri Kullanmayı Öğren:** Modals, Toasts, Offcanvas gibi daha ileri seviye bileşenleri projelerinde deneyerek Bootstrap bilgin kat kat artar.
|
||||
|
||||
## Kapanış
|
||||
|
||||
Bu bölümde Bootstrap’ın temel yapı taşlarını ve ilk bileşenlerini tanıdık.
|
||||
Bir sonraki yazımda Foundation ile tanışmaya gideceğiz. Daha fazla framework tanımak için takipte kalın, hoşçakalın.
|
||||
Bir sonraki yazımda Foundation ile tanışmaya gideceğiz. Daha fazla framework tanımak için takipte kalın, hoşçakalın.
|
||||
|
||||
@@ -12,7 +12,6 @@ canonicalUrl: "https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoru
|
||||
|
||||
# CSS Frameworkleri Tanıyoruz | 2. Bölüm: Foundation
|
||||
|
||||
|
||||
Merhaba arkadaşlar, bugün yeni konuğumuz “Foundation”. Gelin hep beraber tanışalım.
|
||||
|
||||
|
||||
@@ -21,9 +20,9 @@ Merhaba arkadaşlar, bugün yeni konuğumuz “Foundation”. Gelin hep beraber
|
||||
|
||||
**Foundation**, ZURB tarafından geliştirilmiş, responsive web tasarımını ön planda tutan bir CSS framework’üdür. Modern web tasarımları için güçlü bir altyapı sanan ve projenizin hızlıca şekillendirilmesini sağlayan bir framework ‘tür.
|
||||
|
||||
* **Responsive Design**: Mobil uyumlu, masaüstü uyumlu web siteleri oluşturur.
|
||||
* **Flexbox ve Grid Sistemleri**: Kullanımı kolay grid ve flexbox destekleri sunar.
|
||||
* **Özelleştirilebilir Bileşenler**: Kendi tasarımınızı oluşturabileceğiniz hazır bileşenlerle gelir.
|
||||
- **Responsive Design**: Mobil uyumlu, masaüstü uyumlu web siteleri oluşturur.
|
||||
- **Flexbox ve Grid Sistemleri**: Kullanımı kolay grid ve flexbox destekleri sunar.
|
||||
- **Özelleştirilebilir Bileşenler**: Kendi tasarımınızı oluşturabileceğiniz hazır bileşenlerle gelir.
|
||||
|
||||
## 1\. Foundation’ın Temel Yapısı
|
||||
|
||||
@@ -33,17 +32,19 @@ Foundation ile bir sayfa tasarlarken, diğer framework’lerde olduğu gibi **gr
|
||||
|
||||
Örneğin bir sayfada 2 sütunlu bir düzen oluşturmak için:
|
||||
|
||||
<div class\="grid-x"\>
|
||||
<div class\="cell small-12 medium-6"\>Sütun 1</div\>
|
||||
<div class\="cell small-12 medium-6"\>Sütun 2</div\>
|
||||
```html
|
||||
<div class\="grid-x"\>
|
||||
<div class\="cell small-12 medium-6"\>Sütun 1</div\>
|
||||
<div class\="cell small-12 medium-6"\>Sütun 2</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
Burada;
|
||||
|
||||
* `grid-x`: Grid sistemini x ekseninde başlatır.
|
||||
* `cell`: Her bir hücreyi tanımlar.
|
||||
* `small-12`: Mobilde 12 sütun kullan, tam genişlik ver anlamına geliyor.
|
||||
* `medium-6`: Masaüstünde 6 sütun, yani 2 sütunlu bir yapı anlamına geliyor.
|
||||
- `grid-x`: Grid sistemini x ekseninde başlatır.
|
||||
- `cell`: Her bir hücreyi tanımlar.
|
||||
- `small-12`: Mobilde 12 sütun kullan, tam genişlik ver anlamına geliyor.
|
||||
- `medium-6`: Masaüstünde 6 sütun, yani 2 sütunlu bir yapı anlamına geliyor.
|
||||
|
||||
Daha detaylı incelemek için [Foundation Framework Doc](https://get.foundation/sites/docs/index.html) sayfasından dökümantasyonu inceleyebilirsin.
|
||||
|
||||
@@ -53,7 +54,13 @@ Daha detaylı incelemek için [Foundation Framework Doc](https://get.foundation/
|
||||
|
||||
Eğer hemen başlamak istiyorsan:
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css"\>
|
||||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css"
|
||||
\
|
||||
/>
|
||||
```
|
||||
|
||||
Ardından HTML dosyanda Foundation class’larını kullanmaya başlayabilirsin.
|
||||
|
||||
@@ -61,11 +68,15 @@ Ardından HTML dosyanda Foundation class’larını kullanmaya başlayabilirsin.
|
||||
|
||||
Daha kapsamlı projelerde `npm` ile kurulumunu öneririm:
|
||||
|
||||
```bash
|
||||
npm install foundation-sites
|
||||
```
|
||||
|
||||
Sonrasında:
|
||||
|
||||
```bash
|
||||
npx foundation new
|
||||
```
|
||||
|
||||
Bu komutla, sana temel bir Foundation projesi kurabilirsin.
|
||||
|
||||
@@ -77,53 +88,56 @@ Bu kısımda, Foundation’ın sunduğu **callout** bileşenini kullanarak **duy
|
||||
|
||||
Foundation’da duyuru, uyarı ya da önemli bilgileri vurgulamak için **callout** bileşeni kullanılabiliriz. **Callout** bileşeni, dikkat çekici bir stil sunarak mesajları öne çıkarır. Hadi hemen bir örnek üzerinden başlayalım:
|
||||
|
||||
<!DOCTYPE html\>
|
||||
<html lang\="tr"\>
|
||||
<head\>
|
||||
<meta charset\="UTF-8"\>
|
||||
<meta name\="viewport" content\="width=device-width, initial-scale=1.0"\>
|
||||
<title\>Foundation Duyuru Kutusu</title\>
|
||||
<link rel\="stylesheet" href\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css"\>
|
||||
</head\>
|
||||
<body\>
|
||||
<!-- Duyuru Kutusu -->
|
||||
<div class\="callout primary"\>
|
||||
<h5\>Yeni Özellik Duyurusu!</h5\>
|
||||
<p\>Web sitemizde yeni özellikler eklendi. Hızlıca göz atın ve denemek için tıklayın!</p\>
|
||||
<a href\="#" class\="button"\>Özellikleri Keşfedin</a\>
|
||||
</div\>
|
||||
|
||||
<!-- Foundation Scripts -->
|
||||
<script src\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"\></script\>
|
||||
</body\>
|
||||
```html
|
||||
<!DOCTYPE html\>
|
||||
<html lang\="tr"\>
|
||||
<head\>
|
||||
<meta charset\="UTF-8"\>
|
||||
<meta name\="viewport" content\="width=device-width, initial-scale=1.0"\>
|
||||
<title\>Foundation Duyuru Kutusu</title\>
|
||||
<link rel\="stylesheet" href\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css"\>
|
||||
</head\>
|
||||
<body\>
|
||||
<!-- Duyuru Kutusu -->
|
||||
<div class\="callout primary"\>
|
||||
<h5\>Yeni Özellik Duyurusu!</h5\>
|
||||
<p\>Web sitemizde yeni özellikler eklendi. Hızlıca göz atın ve denemek için tıklayın!</p\>
|
||||
<a href\="#" class\="button"\>Özellikleri Keşfedin</a\>
|
||||
</div\>
|
||||
|
||||
<!-- Foundation Scripts -->
|
||||
<script src\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"\></script\>
|
||||
</body\>
|
||||
</html\>
|
||||
```
|
||||
|
||||
### Açıklamalar:
|
||||
|
||||
* `**callout primary**`: `callout` bileşeni ile duyuru kutusunun stilini tanımlıyoruz. `primary` sınıfı ise kutunun rengini belirler (genellikle mavi tonlarında oluyor.).
|
||||
- `**callout primary**`: `callout` bileşeni ile duyuru kutusunun stilini tanımlıyoruz. `primary` sınıfı ise kutunun rengini belirler (genellikle mavi tonlarında oluyor.).
|
||||
|
||||
### Adım 2: Duyuru Kutusunu Responsive Yapma
|
||||
|
||||
Bu proje, mobil uyumlu bir duyuru kutusu oluşturmayı da içeriyor. Foundation, **grid sistemi** ve **responsive utilities** ile sayfanın farklı ekran boyutlarına göre nasıl uyumlu hale getirileceğini gayet kolaylaştırır.
|
||||
|
||||
|
||||
Örneğin, duyuru kutusunun genişliğini ekran boyutuna göre değiştirebiliriz:
|
||||
|
||||
<div class\="callout primary grid-container"\>
|
||||
<div class\="grid-x grid-padding-x"\>
|
||||
<div class\="cell small-12 medium-8 large-6"\>
|
||||
<h5\>Yeni Özellik Duyurusu!</h5\>
|
||||
<p\>Web sitemizde yeni özellikler eklendi. Hızlıca göz atın ve denemek için tıklayın!</p\>
|
||||
<a href\="#" class\="button"\>Özellikleri Keşfedin</a\>
|
||||
</div\>
|
||||
</div\>
|
||||
```html
|
||||
<div class\="callout primary grid-container"\>
|
||||
<div class\="grid-x grid-padding-x"\>
|
||||
<div class\="cell small-12 medium-8 large-6"\>
|
||||
<h5\>Yeni Özellik Duyurusu!</h5\>
|
||||
<p\>Web sitemizde yeni özellikler eklendi. Hızlıca göz atın ve denemek için tıklayın!</p\>
|
||||
<a href\="#" class\="button"\>Özellikleri Keşfedin</a\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
### Açıklamalar:
|
||||
|
||||
* `**grid-container**`: Container sınıfı, grid sisteminin düzenli çalışmasını sağlar.
|
||||
* `**grid-x grid-padding-x**`: `grid-x` tüm satırı tanımlar, `grid-padding-x` ise yatay boşluk ekler.
|
||||
* `**cell small-12 medium-8 large-6**`: Burada, duyuru kutusunun küçük ekranlarda tam genişlikte (12 sütun), orta boy ekranlarda 8 sütun ve büyük ekranlarda ise 6 sütun genişliğinde olmasını sağlıyoruz.
|
||||
- `**grid-container**`: Container sınıfı, grid sisteminin düzenli çalışmasını sağlar.
|
||||
- `**grid-x grid-padding-x**`: `grid-x` tüm satırı tanımlar, `grid-padding-x` ise yatay boşluk ekler.
|
||||
- `**cell small-12 medium-8 large-6**`: Burada, duyuru kutusunun küçük ekranlarda tam genişlikte (12 sütun), orta boy ekranlarda 8 sütun ve büyük ekranlarda ise 6 sütun genişliğinde olmasını sağlıyoruz.
|
||||
|
||||
Bu düzen sayesinde duyuru kutusu, ekran boyutuna göre daha rahat yerleşim alacak ve kullanıcının her cihazda düzgün görüntülenmesini sağlayacaktır.
|
||||
|
||||
@@ -133,45 +147,49 @@ Foundation, **temalar** ve **renkler** konusunda da özelleştirme imkanı sunar
|
||||
|
||||
Örneğin:
|
||||
|
||||
<div class\="callout alert"\>
|
||||
<h5\>Önemli Uyarı!</h5\>
|
||||
<p\>Web sitemiz geçici olarak bakıma alındı. Lütfen daha sonra tekrar deneyin.</p\>
|
||||
```html
|
||||
<div class\="callout alert"\>
|
||||
<h5\>Önemli Uyarı!</h5\>
|
||||
<p\>Web sitemiz geçici olarak bakıma alındı. Lütfen daha sonra tekrar deneyin.</p\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
* `**alert**`: Bu sınıf, **kırmızı** bir arka plan rengini ifade eder ve genellikle uyarılar için kullanılır.
|
||||
* `**secondary**`: Duyuru kutusunun renk paletini değiştirir, farklı bir ton verir.
|
||||
- `**alert**`: Bu sınıf, **kırmızı** bir arka plan rengini ifade eder ve genellikle uyarılar için kullanılır.
|
||||
- `**secondary**`: Duyuru kutusunun renk paletini değiştirir, farklı bir ton verir.
|
||||
|
||||
### Adım 4: İnteraktif Özellikler Eklemek
|
||||
|
||||
Foundation ile basit **modal pencereler** ve **accordion** gibi interaktif özellikler de ekleyebilirsiniz. Örneğin, kullanıcı butona tıkladığında bir **modal pencere** açılmasını sağlayabiliriz:
|
||||
|
||||
<!-- Button to trigger modal -->
|
||||
<a href\="#" class\="button" data-open\="duyuruModal"\>Daha Fazla Bilgi</a\>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class\="reveal" id\="duyuruModal" data-reveal\>
|
||||
<h2\>Detaylı Özellikler</h2\>
|
||||
<p\>Bu özellikler hakkında daha fazla bilgi almak için web sitemizi inceleyebilirsiniz.</p\>
|
||||
<button class\="close-button" data-close aria-label\="Close reveal" type\="button"\>
|
||||
<span aria-hidden\="true"\>×</span\>
|
||||
</button\>
|
||||
</div\>
|
||||
|
||||
<!-- Foundation Scripts -->
|
||||
<script src\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"\></script\>
|
||||
```html
|
||||
<!-- Button to trigger modal -->
|
||||
<a href\="#" class\="button" data-open\="duyuruModal"\>Daha Fazla Bilgi</a\>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class\="reveal" id\="duyuruModal" data-reveal\>
|
||||
<h2\>Detaylı Özellikler</h2\>
|
||||
<p\>Bu özellikler hakkında daha fazla bilgi almak için web sitemizi inceleyebilirsiniz.</p\>
|
||||
<button class\="close-button" data-close aria-label\="Close reveal" type\="button"\>
|
||||
<span aria-hidden\="true"\>×</span\>
|
||||
</button\>
|
||||
</div\>
|
||||
|
||||
<!-- Foundation Scripts -->
|
||||
<script src\="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"\></script\>
|
||||
<script\> $(document).foundation();</script\>
|
||||
```
|
||||
|
||||
Burada reveal sınıfını kullanarak bir modal pencere oluşturuyoruz. data-open özelliği ile, butona tıklandığında ilgili modal pencerenin açılmasını sağlıyoruz.
|
||||
|
||||
## 4\. Foundation Öğrenmek İçin İpuçları
|
||||
|
||||
* **Resmi Dokümantasyon:** [https://get.foundation/](https://get.foundation/)
|
||||
* **Flexbox Kullanımı:** Flexbox ile düzenleme yapmayı öğrenmelesin, Foundation ile çok güçlü düzenler oluşturabilirsin.
|
||||
* **Proje Bileşenleri:** Formlar, butonlar, modal pencereler gibi bileşenleri kullanarak projeni hızlıca inşa et. Kendine bir tasarım, bir proje belirle ve onu foundation ile inşa et.
|
||||
* **Responsive Tasarımlar Yap:** Foundation’ın responsive özelliklerini keşfederek, sitenizin tüm cihazlarla uyumlu olmasını sağlayın. Ne kadar çok pratik yaparsanız o kadar hızlanır ve aşina olursunuz.
|
||||
* **Özelleştirme Yap:** Foundation’un css dosyalarını özelleştirerek, projene özel bir tema oluştur. Dosyaları kurcalamak foundation’ı çok daha iyi anlamana sebep olacaktır.
|
||||
- **Resmi Dokümantasyon:** [https://get.foundation/](https://get.foundation/)
|
||||
- **Flexbox Kullanımı:** Flexbox ile düzenleme yapmayı öğrenmelesin, Foundation ile çok güçlü düzenler oluşturabilirsin.
|
||||
- **Proje Bileşenleri:** Formlar, butonlar, modal pencereler gibi bileşenleri kullanarak projeni hızlıca inşa et. Kendine bir tasarım, bir proje belirle ve onu foundation ile inşa et.
|
||||
- **Responsive Tasarımlar Yap:** Foundation’ın responsive özelliklerini keşfederek, sitenizin tüm cihazlarla uyumlu olmasını sağlayın. Ne kadar çok pratik yaparsanız o kadar hızlanır ve aşina olursunuz.
|
||||
- **Özelleştirme Yap:** Foundation’un css dosyalarını özelleştirerek, projene özel bir tema oluştur. Dosyaları kurcalamak foundation’ı çok daha iyi anlamana sebep olacaktır.
|
||||
|
||||
## Kapanış
|
||||
|
||||
Bu bölümde Foundation’ın temel yapı taşlarını ve ilk bileşenlerini tanıdık.
|
||||
Bir sonraki yazımda **Bulma** ile tanışmaya gideceğiz. Benim favorilerimden biri kendisi. Daha fazla framework tanımak için takipte kalın, hoşçakalın.
|
||||
Bir sonraki yazımda **Bulma** ile tanışmaya gideceğiz. Benim favorilerimden biri kendisi. Daha fazla framework tanımak için takipte kalın, hoşçakalın.
|
||||
|
||||
@@ -12,7 +12,6 @@ canonicalUrl: "https://medium.com/@poyrazavsever/css-frameworkleri-tan%C4%B1yoru
|
||||
|
||||
# CSS Frameworkleri Tanıyoruz | 3. Bölüm: Bulma
|
||||
|
||||
|
||||
|
||||
|
||||
Bu seride amacımız, popüler CSS framework’lerini sade bir dille tanıtmak, nasıl kullanılacaklarını göstermek ve küçük projelerle öğrenmeyi desteklemek. İlk iki bölümde **Bootstrap** ve **Foundation** ile temel yapıları öğrendik. Şimdi sırada, sadeliği ve esnekliğiyle öne çıkan **Bulma** var. Açıkçası ben uzun zamandır **Bulma’yı** incelemek istiyordum. Bugüne nasip oldu.
|
||||
@@ -33,23 +32,27 @@ Bulma’nın temel felsefesi, “**kodu anlamak kolay olmalı**” yaklaşımıd
|
||||
|
||||
Bulma’nın layout sistemi tamamen Flexbox üzerine kuruludur. Bu sayede hem yatay hem de dikey hizalama işlemleri oldukça esnektir. Karmaşık grid yapıları bile birkaç satır sınıf ile kolayca oluşturulabilir.
|
||||
|
||||
<div class\="columns"\>
|
||||
<div class\="column"\>İçerik 1</div\>
|
||||
<div class\="column"\>İçerik 2</div\>
|
||||
```html
|
||||
<div class\="columns"\>
|
||||
<div class\="column"\>İçerik 1</div\>
|
||||
<div class\="column"\>İçerik 2</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
### 1.2 - Kolay Öğrenilebilir Sınıf Sistemi
|
||||
|
||||
Sınıf isimleri açık ve anlamlıdır:
|
||||
|
||||
* `is-primary`, `is-success`, `is-warning` gibi görsel sınıflar, bir bakışta ne işe yaradığını belli eder.
|
||||
* `has-text-centered`, `is-fullwidth`, `is-size-4` gibi yapılar, stil vermek için CSS yazmadan işleri halletmenizi sağlar.
|
||||
- `is-primary`, `is-success`, `is-warning` gibi görsel sınıflar, bir bakışta ne işe yaradığını belli eder.
|
||||
- `has-text-centered`, `is-fullwidth`, `is-size-4` gibi yapılar, stil vermek için CSS yazmadan işleri halletmenizi sağlar.
|
||||
|
||||
### 1.3 - Responsive Tasarımlarda Büyük Kolaylık
|
||||
|
||||
Mobil öncelikli yaklaşımı benimseyen Bulma, farklı ekran boyutları için özelleştirme yapmayı oldukça kolaylaştırır. Örneğin:
|
||||
|
||||
<div class\="column is-full-mobile is-half-tablet is-one-third-desktop"\>
|
||||
```html
|
||||
<div class\="column is-full-mobile is-half-tablet is-one-third-desktop" \></div>
|
||||
```
|
||||
|
||||
Bu yapı, mobilde tam genişlik, tablette yarım, masaüstünde üçte bir genişlik anlamına gelir.
|
||||
|
||||
@@ -71,24 +74,33 @@ Bulma’yı en hızlı şekilde projene dahil etmek için **CDN** (Content Deliv
|
||||
|
||||
İhtiyacın olan tek şey HTML dosyanıza şu satırı eklemek:
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"\>
|
||||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
|
||||
\
|
||||
/>
|
||||
```
|
||||
|
||||
### 2.2- npm ile Kurulum
|
||||
|
||||
Projenin bir Node.js tabanlı yapısı varsa, npm ile Bulma’yı projenize dahil edebilirsin. Bu, özellikle projeyi daha profesyonel şekilde yönetmek isteyenler için iyi bir seçenek. Adımlar:
|
||||
|
||||
|
||||
1 — Projende npm’i başlat:
|
||||
|
||||
```bash
|
||||
npm init -y
|
||||
```
|
||||
|
||||
2 — Bulma’yı kur:
|
||||
|
||||
```bash
|
||||
npm install bulma
|
||||
```
|
||||
|
||||
3 — `node_modules` klasöründen Bulma stil dosyasını projene import et:
|
||||
|
||||
@import 'node\_modules/bulma/css/bulma.min.css';
|
||||
@import 'node_modules/bulma/css/bulma.min.css';
|
||||
|
||||
Bu yöntemle, projenin gereksinimlerine göre daha esnek bir kurulum yapmış olursun. Ayrıca, Bulma’nın özelleştirilmiş sürümleri için Sass kullanabilirsin.
|
||||
|
||||
@@ -98,7 +110,7 @@ Bulma, Sass ile özelleştirilebilirsin. Özellikle tasarımın bazı kısımlar
|
||||
|
||||
1- Sass dosyasını import et:
|
||||
|
||||
@import 'node\_modules/bulma/bulma';
|
||||
@import 'node_modules/bulma/bulma';
|
||||
|
||||
2- Bulma’nın sunduğu değişkenleri ve mixin’leri kullanarak renk, yazı tipi, buton boyutları gibi tasarım öğelerini özelleştirebilirsin. Örneğin:
|
||||
|
||||
@@ -116,94 +128,96 @@ Bu projede, temel HTML yapısını kullanarak Bulma framework’ü ile şık bir
|
||||
|
||||
Öncelikle, temel HTML yapısını oluşturalım. Bulma’nın sunduğu `hero` sınıfını kullanarak bir başlık bölümü ekleyeceğiz ve altında birkaç kart bileşeni olacak.
|
||||
|
||||
<!DOCTYPE html\>
|
||||
<html lang\="en"\>
|
||||
<head\>
|
||||
<meta charset\="UTF-8"\>
|
||||
<meta name\="viewport" content\="width=device-width, initial-scale=1.0"\>
|
||||
<title\>Bulma Landing Page</title\>
|
||||
<link rel\="stylesheet" href\="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"\>
|
||||
</head\>
|
||||
<body\>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class\="hero is-primary is-fullheight"\>
|
||||
<div class\="hero-body"\>
|
||||
<div class\="container"\>
|
||||
<h1 class\="title"\>
|
||||
Hoş Geldiniz
|
||||
</h1\>
|
||||
<h2 class\="subtitle"\>
|
||||
Bulma ile Basit Bir Landing Page Tasarımı
|
||||
</h2\>
|
||||
</div\>
|
||||
</div\>
|
||||
</section\>
|
||||
|
||||
<!-- Feature Section -->
|
||||
<section class\="section"\>
|
||||
<div class\="container"\>
|
||||
<div class\="columns is-multiline"\>
|
||||
<div class\="column is-4"\>
|
||||
<div class\="card"\>
|
||||
<div class\="card-content"\>
|
||||
<h3 class\="title is-4"\>Özellik 1</h3\>
|
||||
<p\>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
<div class\="column is-4"\>
|
||||
<div class\="card"\>
|
||||
<div class\="card-content"\>
|
||||
<h3 class\="title is-4"\>Özellik 2</h3\>
|
||||
<p\>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
<div class\="column is-4"\>
|
||||
<div class\="card"\>
|
||||
<div class\="card-content"\>
|
||||
<h3 class\="title is-4"\>Özellik 3</h3\>
|
||||
<p\>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
</section\>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<footer class\="footer"\>
|
||||
<div class\="content has-text-centered"\>
|
||||
<p\>
|
||||
<strong\>Bulma Landing Page</strong\> by <a href\="https://github.com/yourusername"\>Your Name</a\>.
|
||||
</p\>
|
||||
</div\>
|
||||
</footer\>
|
||||
|
||||
</body\>
|
||||
```html
|
||||
<!DOCTYPE html\>
|
||||
<html lang\="en"\>
|
||||
<head\>
|
||||
<meta charset\="UTF-8"\>
|
||||
<meta name\="viewport" content\="width=device-width, initial-scale=1.0"\>
|
||||
<title\>Bulma Landing Page</title\>
|
||||
<link rel\="stylesheet" href\="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"\>
|
||||
</head\>
|
||||
<body\>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class\="hero is-primary is-fullheight"\>
|
||||
<div class\="hero-body"\>
|
||||
<div class\="container"\>
|
||||
<h1 class\="title"\>
|
||||
Hoş Geldiniz
|
||||
</h1\>
|
||||
<h2 class\="subtitle"\>
|
||||
Bulma ile Basit Bir Landing Page Tasarımı
|
||||
</h2\>
|
||||
</div\>
|
||||
</div\>
|
||||
</section\>
|
||||
|
||||
<!-- Feature Section -->
|
||||
<section class\="section"\>
|
||||
<div class\="container"\>
|
||||
<div class\="columns is-multiline"\>
|
||||
<div class\="column is-4"\>
|
||||
<div class\="card"\>
|
||||
<div class\="card-content"\>
|
||||
<h3 class\="title is-4"\>Özellik 1</h3\>
|
||||
<p\>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
<div class\="column is-4"\>
|
||||
<div class\="card"\>
|
||||
<div class\="card-content"\>
|
||||
<h3 class\="title is-4"\>Özellik 2</h3\>
|
||||
<p\>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
<div class\="column is-4"\>
|
||||
<div class\="card"\>
|
||||
<div class\="card-content"\>
|
||||
<h3 class\="title is-4"\>Özellik 3</h3\>
|
||||
<p\>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
</div\>
|
||||
</section\>
|
||||
|
||||
<!-- Footer Section -->
|
||||
<footer class\="footer"\>
|
||||
<div class\="content has-text-centered"\>
|
||||
<p\>
|
||||
<strong\>Bulma Landing Page</strong\> by <a href\="https://github.com/yourusername"\>Your Name</a\>.
|
||||
</p\>
|
||||
</div\>
|
||||
</footer\>
|
||||
|
||||
</body\>
|
||||
</html\>
|
||||
```
|
||||
|
||||
### 2\. Açıklamalar
|
||||
|
||||
* **Hero Section**: Bulma’nın `hero` sınıfı ile ekranın tamamını kaplayan bir başlık bölümümüz var. Burada `is-primary` sınıfı, başlık kısmına ana renk tonunu verir
|
||||
* **Feature Section**: Bu bölümde üç adet kart kullanıyoruz. Her kart, bir özellik tanıtımı yapacak şekilde tasarlandı. `columns` sınıfı ile kartları hizalıyoruz.
|
||||
* **Footer Section**: Sayfanın alt kısmında, sayfa hakkında kısa bir bilgi veren basit bir footer bulunuyor.
|
||||
- **Hero Section**: Bulma’nın `hero` sınıfı ile ekranın tamamını kaplayan bir başlık bölümümüz var. Burada `is-primary` sınıfı, başlık kısmına ana renk tonunu verir
|
||||
- **Feature Section**: Bu bölümde üç adet kart kullanıyoruz. Her kart, bir özellik tanıtımı yapacak şekilde tasarlandı. `columns` sınıfı ile kartları hizalıyoruz.
|
||||
- **Footer Section**: Sayfanın alt kısmında, sayfa hakkında kısa bir bilgi veren basit bir footer bulunuyor.
|
||||
|
||||
### 3\. CSS Özelleştirmeleri (isteğe bağlı)
|
||||
|
||||
Eğer özelleştirmek istersen, Bulma’nın sunduğu renkleri veya tasarım ögelerini değiştirebilirsin. Örneğin, `hero` kısmının rengini değiştirebilir veya kartların stilini özelleştirebilirsin.
|
||||
|
||||
<section class\="hero is-link is-fullheight"\>
|
||||
```html
|
||||
<section class\="hero is-link is-fullheight" \></section>
|
||||
```
|
||||
|
||||
### 4\. Responsive Tasarım
|
||||
|
||||
Bulma, mobil öncelikli tasarım sunar. Bu nedenle tasarım, mobil cihazlarda düzgün bir şekilde görüntülenir. `columns` sınıfı ve `is-multiline` sayesinde, ekran boyutuna göre kartlar düzgün bir şekilde yerleşir. Küçük ekranlarda her kart bir satıra düşer, büyük ekranlarda ise yan yana yer alırlar.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Sonuç
|
||||
@@ -212,5 +226,5 @@ Bu projede, Bulma’nın **kolay kullanımı**, **responsive özellikleri** ve *
|
||||
|
||||
### Daha İleri Gitmek İçin
|
||||
|
||||
* Bulma’nın **belgelerini** ([bulma.io](https://www.bulma.io)) inceleyerek daha fazla bileşen ve özelleştirme hakkında bilgi edinebilirsin.
|
||||
* Bulma’yı projende Sass ile kullanarak stil dosyalarını daha detaylı şekilde yönetebilirsin.
|
||||
- Bulma’nın **belgelerini** ([bulma.io](https://www.bulma.io)) inceleyerek daha fazla bileşen ve özelleştirme hakkında bilgi edinebilirsin.
|
||||
- Bulma’yı projende Sass ile kullanarak stil dosyalarını daha detaylı şekilde yönetebilirsin.
|
||||
|
||||
@@ -38,18 +38,26 @@ Chakra UI, yalnızca **React** projeleriyle çalışır. Bu nedenle, öncelikle
|
||||
|
||||
### 2.1. React projesi oluştur (Vite ile öneriyorum)
|
||||
|
||||
```bash
|
||||
npm create vite@latest my\-chakra-app -- --template react
|
||||
```
|
||||
cd my\-chakra-app
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
veya
|
||||
|
||||
```bash
|
||||
npx create-react-app my\-chakra-app
|
||||
```
|
||||
cd my\-chakra-app
|
||||
|
||||
### 2.2. Chakra UI’yi yükle
|
||||
|
||||
```bash
|
||||
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
|
||||
```
|
||||
|
||||
Burada yüklediğimiz framer-motion doc ‘da zorunlu koşulmuyor fakat tavsiye ediyorum.
|
||||
|
||||
@@ -57,28 +65,34 @@ Burada yüklediğimiz framer-motion doc ‘da zorunlu koşulmuyor fakat tavsiye
|
||||
|
||||
`main.jsx` (veya `index.js`) dosyanı şu şekilde güncelle:
|
||||
|
||||
```ts
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { ChakraProvider } from '@chakra-ui/react'
|
||||
import App from './App'
|
||||
```
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
```html
|
||||
<React.StrictMode\>
|
||||
<ChakraProvider\>
|
||||
<App />
|
||||
</ChakraProvider\>
|
||||
</React.StrictMode\>
|
||||
```
|
||||
)
|
||||
|
||||
### Artık hazırsın!
|
||||
|
||||
Chakra UI bileşenlerini kullanmaya başlayabilirsin. Örnek:
|
||||
|
||||
```tsx
|
||||
import { Button } from '@chakra-ui/react'
|
||||
|
||||
function MyButton() {
|
||||
return <Button colorScheme\="teal"\>Merhaba Chakra!</Button\>
|
||||
}
|
||||
```
|
||||
|
||||
Bunun çalışıp çalışmadığını kontrol et. Eğer çalışıyorsa sağlıklı bir şekilde yüklemişsindir.
|
||||
|
||||
@@ -89,7 +103,9 @@ Bu küçük projede, Chakra UI bileşenleriyle şık ve responsive bir **profil
|
||||
* `Box`, `Image`, `Text`, `Stack`, `Button`, `Flex`, `Avatar`
|
||||
* Chakra UI’nin **temaya dayalı renk sistemi** ve **spacing sistemini** kullanacağız.
|
||||
|
||||
```ts
|
||||
import {
|
||||
```
|
||||
Box,
|
||||
Flex,
|
||||
Avatar,
|
||||
@@ -99,10 +115,12 @@ import {
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
```tsx
|
||||
function ProfileCard() {
|
||||
return (
|
||||
<Flex align\="center" justify\="center" minH\="100vh" bg\={useColorModeValue("gray.100", "gray.900")}>
|
||||
<Box
|
||||
```
|
||||
maxW\="sm"
|
||||
w\="full"
|
||||
bg\={useColorModeValue("white", "gray.800")}
|
||||
@@ -111,6 +129,7 @@ function ProfileCard() {
|
||||
p\={6}
|
||||
textAlign\="center"
|
||||
>
|
||||
```html
|
||||
<Avatar size\="xl" src\="https://i.pravatar.cc/300" mb\={4} />
|
||||
<Text fontSize\="2xl" fontWeight\="bold"\>
|
||||
Ayşe Yılmaz
|
||||
@@ -129,13 +148,18 @@ function ProfileCard() {
|
||||
</Box\>
|
||||
</Flex\>
|
||||
);
|
||||
```
|
||||
}
|
||||
|
||||
```ts
|
||||
export default ProfileCard;
|
||||
```
|
||||
|
||||
### 1\. `Flex`
|
||||
|
||||
```html
|
||||
<Flex align\="center" justify\="center" minH\="100vh" bg\={...}\>
|
||||
```
|
||||
|
||||
Sayfanın tamamında kartı **ortalamak** için kullanılıyoruz.
|
||||
|
||||
@@ -146,6 +170,7 @@ Sayfanın tamamında kartı **ortalamak** için kullanılıyoruz.
|
||||
|
||||
### 2\. `Box`
|
||||
|
||||
```html
|
||||
<Box
|
||||
maxW\="sm"
|
||||
w\="full"
|
||||
@@ -155,6 +180,7 @@ Sayfanın tamamında kartı **ortalamak** için kullanılıyoruz.
|
||||
p\={6}
|
||||
textAlign\="center"
|
||||
\>
|
||||
```
|
||||
|
||||
Tüm profil kartının çerçevesini oluşturuyor bu eleman. Atr ‘ları ise:
|
||||
|
||||
@@ -167,7 +193,9 @@ Tüm profil kartının çerçevesini oluşturuyor bu eleman. Atr ‘ları ise:
|
||||
|
||||
### 3\. `Avatar`
|
||||
|
||||
```html
|
||||
<Avatar size\="xl" src\="https://i.pravatar.cc/300" mb\={4} />
|
||||
```
|
||||
|
||||
Adından da anlaşılacağı üzere kullanıcının fotoğrafını gösteriyor.
|
||||
|
||||
@@ -177,6 +205,7 @@ Adından da anlaşılacağı üzere kullanıcının fotoğrafını gösteriyor.
|
||||
|
||||
### 4\. `Stack` + `Button`
|
||||
|
||||
```html
|
||||
<Stack direction\="row" spacing\={4} justify\="center"\>
|
||||
<Button colorScheme\="teal" variant\="solid"\>
|
||||
Takip Et
|
||||
@@ -185,6 +214,7 @@ Adından da anlaşılacağı üzere kullanıcının fotoğrafını gösteriyor.
|
||||
Mesaj Gönder
|
||||
</Button\>
|
||||
</Stack\>
|
||||
```
|
||||
|
||||
`Stack`: Chakra’nın **dikey veya yatay sıralama** komponentidir.
|
||||
|
||||
|
||||
@@ -42,10 +42,12 @@ Materialize, sadece şık görünüm sunmakla kalmaz; aynı zamanda geliştirici
|
||||
|
||||
Materialize, 12 sütunlu, esnek ve mobil uyumlu bir grid sistemi sunar. Bu yapı sayesinde sayfa düzenleri kolayca planlanabilir ve responsive tasarımlar rahatlıkla oluşturulabilir.
|
||||
|
||||
```html
|
||||
<div class\="row"\>
|
||||
<div class\="col s6"\>Sütun 1</div\>
|
||||
<div class\="col s6"\>Sütun 2</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
## 2\. Hazır UI Bileşenleri
|
||||
|
||||
@@ -79,7 +81,9 @@ Bunlar sadece HTML yapısıyla değil, JS üzerinden de kolayca yönetilebilir.
|
||||
|
||||
Materialize, Google’ın Material Icons kütüphanesini doğal olarak destekler. Böylece ekstra bir ikon kütüphanesi aramadan projene kolayca ikon ekleyebilirsin.
|
||||
|
||||
```html
|
||||
<i class\="material-icons"\>home</i\>
|
||||
```
|
||||
|
||||
Materialize’ın sunduğu bu temel özellikler, hızlı ve etkileyici kullanıcı arayüzleri geliştirmek isteyenler için büyük kolaylık sağlar. Özellikle yeni başlayanlar için kurulum ve kullanım açısından oldukça kullanıcı dostudur.
|
||||
|
||||
@@ -91,11 +95,13 @@ Materialize’ı projene entegre etmek oldukça basit. İster hızlıca denemek
|
||||
|
||||
Sadece birkaç satır HTML koduyla Materialize’ı projenize entegre edebilirsiniz:
|
||||
|
||||
```html
|
||||
<!-- Materialize CSS -->
|
||||
<link rel\="stylesheet" href\="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"\>
|
||||
|
||||
<!-- Materialize JS -->
|
||||
<script src\="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"\></script\>
|
||||
```
|
||||
|
||||
Bu yöntem, özellikle küçük çaplı projeler ve hızlı prototipleme için oldukça idealdir.
|
||||
|
||||
@@ -103,16 +109,22 @@ Bu yöntem, özellikle küçük çaplı projeler ve hızlı prototipleme için o
|
||||
|
||||
Daha profesyonel bir yapı kurmak istersen, Materialize’ı NPM aracılığıyla kurabilirsin:
|
||||
|
||||
```bash
|
||||
npm install materialize-css
|
||||
```
|
||||
|
||||
Ardından `import` komutlarıyla projenin ilgili dosyalarında kullanabilirsin:
|
||||
|
||||
```ts
|
||||
import "materialize-css/dist/css/materialize.min.css";
|
||||
import "materialize-css/dist/js/materialize.min.js";
|
||||
```
|
||||
|
||||
### Örnek Kullanım
|
||||
|
||||
```html
|
||||
<a class\="waves-effect waves-light btn"\>Tıkla</a\>
|
||||
```
|
||||
|
||||
Materialize’ın `waves-effect` sınıfı sayesinde butona tıklama efekti otomatik olarak eklenir. Küçük ama etkili detaylar ile kullanıcı deneyimi artırılır.
|
||||
|
||||
@@ -128,10 +140,12 @@ Materialize CSS’in güçlü yönlerinden biri, sade yapısı ve örneklerle h
|
||||
|
||||
Responsive tasarımlar için kullanılan sütun yapısı oldukça esnektir:
|
||||
|
||||
```html
|
||||
<div class\="row"\>
|
||||
<div class\="col s6"\>Sol Alan</div\>
|
||||
<div class\="col s6"\>Sağ Alan</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
* `s6` sınıfı, küçük ekranlarda 12 sütunluk yapının yarısını kaplayacak şekilde ayarlanır.
|
||||
* `row` sınıfı satır başlatır, `col` ise sütunu temsil eder.
|
||||
@@ -140,23 +154,28 @@ Responsive tasarımlar için kullanılan sütun yapısı oldukça esnektir:
|
||||
|
||||
Kullanıcıya içerik sunmak için oldukça şık bir bileşen:
|
||||
|
||||
```html
|
||||
<div class\="card"\>
|
||||
<div class\="card-content"\>
|
||||
<span class\="card-title"\>Başlık</span\>
|
||||
<p\>Bu bir kart açıklamasıdır.</p\>
|
||||
</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
## Butonlar
|
||||
|
||||
Basit ama şık butonlar tek satırda oluşturulabilir:
|
||||
|
||||
```html
|
||||
<a class\="waves-effect waves-light btn"\>Tıkla</a\>
|
||||
```
|
||||
|
||||
`waves-effect` ve `waves-light` sınıfları sayesinde tıklama animasyonu eklenir.
|
||||
|
||||
## Modal
|
||||
|
||||
```html
|
||||
<!-- Tetikleyici -->
|
||||
<a class\="waves-effect waves-light btn modal-trigger" href\="#demoModal"\>Aç</a\>
|
||||
|
||||
@@ -167,6 +186,7 @@ Basit ama şık butonlar tek satırda oluşturulabilir:
|
||||
<p\>Bu bir modal içeriktir.</p\>
|
||||
</div\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
Modal’ın çalışması için JS dosyalarının yüklü olması ve `M.Modal.init()` ile başlatılması gerekir.
|
||||
|
||||
|
||||
@@ -82,13 +82,17 @@ Teori güzel, ama pratik olmadan biraz anlamsız kalıyor her şey. Şimdi Docke
|
||||
|
||||
İlk adım olarak sisteminde Docker kurulu mu kontrol et. Terminal veya komut satırına şu komutu yaz:
|
||||
|
||||
```bash
|
||||
docker \--version
|
||||
```
|
||||
|
||||
Eğer kurulu değilse [aha da buradan](https://www.docker.com/products/docker-desktop/) Docker Desktop’u indirip yükleyebilirsin. Kurulum sonrası bilgisayarı yeniden başlatmak gerekebilir.
|
||||
|
||||
### 2\. İlk Docker Komutu: Hello World
|
||||
|
||||
```bash
|
||||
docker run hello-world
|
||||
```
|
||||
|
||||
Bu ne yapar dersen:
|
||||
|
||||
@@ -123,11 +127,15 @@ CMD \["python", "app.py"\]
|
||||
|
||||
Terminale şunu yaz:
|
||||
|
||||
```bash
|
||||
docker build -t merhaba-dunya .
|
||||
```
|
||||
|
||||
Uygulamayı çalıştır:
|
||||
|
||||
```bash
|
||||
docker run merhaba-dunya
|
||||
```
|
||||
|
||||
Ve boom! Terminalde şunu göreceksin:
|
||||
|
||||
|
||||
@@ -31,13 +31,17 @@ Peki, Jest’i ne zaman kullanmalısın? Eğer React componentleri üzerinde ça
|
||||
|
||||
Kurulum ise oldukça basit. Tek bir komutla Jest’i projene ekleyebilirsin:
|
||||
|
||||
```bash
|
||||
npm install \--save-dev jest
|
||||
```
|
||||
|
||||
Kurulumdan sonra, Jest’i kullanmaya başlamak için birkaç temel ayar yapman yeterli. Şimdi, basit bir test örneğiyle devam edelim.
|
||||
|
||||
```ts
|
||||
function toplama(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
```
|
||||
|
||||
Bu fonksiyonu test etmek için Jest ile şöyle bir test yazabilirsin:
|
||||
|
||||
@@ -74,12 +78,16 @@ Bazen test ettiğin kod, dış bağımlılıklara (örneğin, API isteklerine) i
|
||||
jest.mock('axios'); // axios kütüphanesini mockladık
|
||||
|
||||
it('API çağrısı başarılı olursa veriyi döndürmeli', async () => {
|
||||
```ts
|
||||
const veriler = { data: { isim: 'Ali' } };
|
||||
```
|
||||
axios.get.mockResolvedValue(veriler); // Mock cevap
|
||||
|
||||
```ts
|
||||
const cevap = await apiCagir(); // Api istek atıyoruz
|
||||
expect(cevap.isim).toBe('Ali');
|
||||
});
|
||||
```
|
||||
|
||||
## Snapshot Testing
|
||||
|
||||
@@ -88,6 +96,7 @@ Snapshot testing, bileşenlerinin görsel çıktılarının kaydedilmesi ve daha
|
||||
|
||||
Bir bileşeni snapshot ile test etmek için, şu şekilde yazabilirsin:
|
||||
|
||||
```tsx
|
||||
import { render } from '@testing-library/react';
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
@@ -95,6 +104,7 @@ test('MyComponent snapshot testi', () => {
|
||||
const { asFragment } = render(<MyComponent />);
|
||||
expect(asFragment()).toMatchSnapshot(); // Componentin çıktısını kaydediyor
|
||||
});
|
||||
```
|
||||
|
||||
## Cypress Nedir?
|
||||
|
||||
@@ -107,7 +117,9 @@ Cypress ile test yazmak oldukça keyifli, çünkü her şey anlık geri bildirim
|
||||
|
||||
Cypress’i projene eklemek de oldukça basit. Tek bir komutla kurulumunu gerçekleştirebilirsin:
|
||||
|
||||
```bash
|
||||
npm install cypress \--save-dev
|
||||
```
|
||||
|
||||
Kurulumdan sonra, `npx cypress open` komutunu çalıştırarak Cypress arayüzünü açabilirsin. Buradan test senaryolarını kolayca yazmaya başlayabilirsin.
|
||||
|
||||
|
||||
@@ -66,7 +66,9 @@ Aşağıdaki API’ler artık asenkron çalışıyor:
|
||||
|
||||
Bu API’leri kullanırken `await` yazman şart. Yani şöyle şeyler artık gerekiyor:
|
||||
|
||||
```ts
|
||||
const cookies = await cookies()
|
||||
```
|
||||
|
||||
## Nereleri etkiliyor?
|
||||
|
||||
@@ -83,7 +85,9 @@ Yani bu dosyaların içinde yukarıdaki API’leri kullanıyorsan hepsini async
|
||||
|
||||
Neyse ki Next.js ekibi bizi unutmamış ve bu geçişi kolaylaştırmak için bir araç sunmuş:
|
||||
|
||||
```bash
|
||||
npx @next/codemod@latest async\-request\-apis
|
||||
```
|
||||
|
||||
Bu komut sayesinde projenin içindeki eski kullanım biçimleriniz otomatik olarak async hale getirilebiliyor. Yine de kodu gözden geçirmek şart, çünkü her proje özelinde ufak dokunuşlar gerekebilir.
|
||||
|
||||
@@ -107,7 +111,9 @@ Bu durum, bazı projeler için performans düşüşüne neden olabilir. Ama mera
|
||||
|
||||
Eğer bir verinin cache’lenmesini ve static hale gelmesini istiyorsan artık bunu **açıkça belirtmen gerekiyor**.
|
||||
|
||||
```ts
|
||||
export const dynamic = 'force-static'
|
||||
```
|
||||
|
||||
veya daha esnek bir yapı istersen, `next.config.js` dosyasına aşağıdaki gibi bir ayar da ekleyebilirsin:
|
||||
|
||||
@@ -174,7 +180,9 @@ Next.js projeni yeni sürüme geçirirken en büyük yardımcın olacak araç bu
|
||||
|
||||
Kullanımı çok basit:
|
||||
|
||||
```bash
|
||||
npx @next/codemod@latest async\-request\-apis
|
||||
```
|
||||
|
||||
Sadece async dönüşümü değil, başka dönüşümler için de bu aracı kullanabilirsin. Kod tabanını hızlıca yeni sürüme uygun hale getiriyor.
|
||||
|
||||
@@ -215,11 +223,15 @@ Bu dosya, uygulamanın sunucu tarafında gerçekleşen istekleri izlemeni ve ger
|
||||
* Hata loglama sistemleri (örn: request bazlı loglama)
|
||||
|
||||
// instrumentation.ts
|
||||
```ts
|
||||
export function register() {
|
||||
```
|
||||
console.log('Server started')
|
||||
}
|
||||
|
||||
```ts
|
||||
export function onRequestError(error) {
|
||||
```
|
||||
console.error('Request error:', error)
|
||||
}
|
||||
|
||||
|
||||
@@ -55,12 +55,14 @@ Bu yaklaşım şu avantajları sağlar:
|
||||
* **Daha iyi kullanıcı deneyimi:** Sayfalar ve API yanıtları daha hızlı yüklenir.
|
||||
* **Global ölçeklenebilirlik:** Dünyanın her yerindeki kullanıcılar benzer hızda erişim sağlar.
|
||||
|
||||
```ts
|
||||
export const runtime = 'edge';
|
||||
|
||||
export async function GET(req: Request) {
|
||||
const country = req.headers.get('x-vercel-ip-country') || 'US';
|
||||
|
||||
return new Response(
|
||||
```
|
||||
JSON.stringify({ currency: country === 'TR' ? '₺' : '$' }),
|
||||
{ headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
@@ -79,10 +81,12 @@ Next.js, Edge Functions kullanmayı son derece kolay hale getiriyor sağ olsun.
|
||||
|
||||
Örnek olarak `app/api/hello/route.ts` dosyası oluşturalım:
|
||||
|
||||
```ts
|
||||
export const runtime = 'edge';
|
||||
|
||||
export async function GET() {
|
||||
return new Response(
|
||||
```
|
||||
JSON.stringify({ message: 'Merhaba Edge!' }),
|
||||
{ headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
@@ -100,6 +104,7 @@ Next.js middleware yapısı **varsayılan olarak edge üzerinde çalışır.**
|
||||
Örneğin kullanıcıyı oturum durumuna göre yönlendirmek için:
|
||||
|
||||
// middleware.ts
|
||||
```ts
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export function middleware(req: Request) {
|
||||
@@ -109,6 +114,7 @@ export function middleware(req: Request) {
|
||||
}
|
||||
return NextResponse.next();
|
||||
}
|
||||
```
|
||||
|
||||
Bu middleware, kullanıcıya en yakın edge node’da çalışır, bu sayede yönlendirmeler çok daha hızlıdır.
|
||||
|
||||
@@ -130,6 +136,7 @@ Burada amaç kullanıcının ülkesi veya şehri bazında anında içerik/pref s
|
||||
|
||||
_Örnek (app/api/prefs/route.ts):_
|
||||
|
||||
```ts
|
||||
export const runtime = 'edge';
|
||||
|
||||
export async function GET(req: Request) {
|
||||
@@ -139,6 +146,7 @@ export async function GET(req: Request) {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Bu kod ile Türkiye’den gelen kullanıcı **₺** görürken, ABD’den gelen kullanıcı **$** görecektir.
|
||||
|
||||
@@ -146,6 +154,7 @@ Bu kod ile Türkiye’den gelen kullanıcı **₺** görürken, ABD’den gelen
|
||||
|
||||
Amacımız yeni bir özelliği kullanıcıların belirli bir yüzdesine göstermek. Mesela bir şeyi test etmek istiyor ya da bölge bazlı özellik geliştirmek istiyor olabilirsiniz.
|
||||
|
||||
```ts
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export const config = { matcher: \['/'\] };
|
||||
@@ -155,9 +164,12 @@ export function middleware(req: Request) {
|
||||
const variant = /variant=(A|B)/.exec(cookie)?.\[1\] || (Math.random() < 0.5 ? 'A' : 'B');
|
||||
|
||||
const res = NextResponse.next();
|
||||
```
|
||||
res.headers.append('Set-Cookie', \`variant=${variant}; Path=/; Max-Age=2592000; SameSite=Lax\`);
|
||||
```ts
|
||||
return res;
|
||||
}
|
||||
```
|
||||
|
||||
Bu örnek kullanıcıya A veya B varyantını atar ve tüm isteklerde tutarlı kalmasını sağlar.
|
||||
|
||||
@@ -165,6 +177,7 @@ Bu örnek kullanıcıya A veya B varyantını atar ve tüm isteklerde tutarlı k
|
||||
|
||||
Burada ise amacımız yeni özellikleri %10 / %50 gibi kademelerle yayına almak. Yukarıdaki ile benzer sebeplerden bunu yapmak istiyor olabilirsiniz.
|
||||
|
||||
```ts
|
||||
export const runtime = 'edge';
|
||||
|
||||
export async function GET() {
|
||||
@@ -173,6 +186,7 @@ export async function GET() {
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Gerçekte kullanıcı kimliğine göre hash alırsan, aynı kullanıcı her zaman aynı sonucu görür.
|
||||
|
||||
@@ -180,6 +194,7 @@ Gerçekte kullanıcı kimliğine göre hash alırsan, aynı kullanıcı her zama
|
||||
|
||||
Okuma ağırlıklı API’leri CDN üzerinde önbelleğe almak için bu tarz bir ihtiyacınız olabilir.
|
||||
|
||||
```ts
|
||||
export const runtime = 'edge';
|
||||
|
||||
export async function GET() {
|
||||
@@ -191,6 +206,7 @@ export async function GET() {
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Bu sayede kullanıcılar her istekte milisaniyeler içinde yanıt alır.
|
||||
|
||||
|
||||
@@ -79,11 +79,13 @@ src/
|
||||
|
||||
* Bir `data.js` dosyası oluşturarak mock veriler eklemek:
|
||||
|
||||
```ts
|
||||
export cocst userData = {
|
||||
name: "Poyraz Avsever",
|
||||
bio: "Yazılım geliştirici ve Tasarımcı",
|
||||
photo: "/images/profile.jpg",
|
||||
education: \[
|
||||
```
|
||||
{ id: 1, degree: "Yazılım Mühendisliği", institution: "OSTİM Teknik Üniversitesi" },
|
||||
\],
|
||||
products: \[{ id: 1, name: "CRM Yazılımı", price: "$100" }\],
|
||||
@@ -99,6 +101,7 @@ export cocst userData = {
|
||||
|
||||
### 4.1. ProfileHeader.jsx
|
||||
|
||||
```tsx
|
||||
const ProfileHeader = ({ name, bio, photo }) => (
|
||||
<div className="profile-header">
|
||||
<img src={photo} alt="Profile" />
|
||||
@@ -107,9 +110,11 @@ const ProfileHeader = ({ name, bio, photo }) => (
|
||||
</div>
|
||||
);
|
||||
export default ProfileHeader;
|
||||
```
|
||||
|
||||
### 4.2. Dinamik Liste Bileşeni: ProductsList.jsx
|
||||
|
||||
```tsx
|
||||
const ProductsList = ({ products }) => (
|
||||
<div className="products-list">
|
||||
{products.map(product => (
|
||||
@@ -121,11 +126,13 @@ const ProductsList = ({ products }) => (
|
||||
</div>
|
||||
);
|
||||
export default ProductsList;
|
||||
```
|
||||
|
||||
## 5\. Veri Çekme ve Kullanıcı Arayüzünü Tamamlama
|
||||
|
||||
* **useEffect** ile veri çekme:
|
||||
|
||||
```ts
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
@@ -133,6 +140,7 @@ const \[data, setData\] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get("/api/user").then(response => setData(response.data));
|
||||
```
|
||||
}, \[\])
|
||||
|
||||
* **Props Drilling** veya **Context API** kullanarak verilerin bileşenlere aktarımı.
|
||||
|
||||
@@ -88,6 +88,7 @@ Aşağıdaki kategorilerden birini seçmen çoğu kullanıcı için yeterlidir.
|
||||
Bir blog yazılarını programatik olarak RSS’e dökmek istersen, en yalın şablon aşağıdaki gibidir. (RSS 2.0 örneği)
|
||||
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
```xml
|
||||
<rss version\="2.0"\>
|
||||
<channel\>
|
||||
<title\>Ornek Blog</title\>
|
||||
@@ -104,6 +105,7 @@ Bir blog yazılarını programatik olarak RSS’e dökmek istersen, en yalın ş
|
||||
</item\>
|
||||
</channel\>
|
||||
</rss\>
|
||||
```
|
||||
|
||||
### **Üretim seçenekleri:**
|
||||
|
||||
@@ -119,6 +121,7 @@ Aşağıdaki iskelet, birkaç feed’i okuyup son 7 günün başlıklarını top
|
||||
// package.json: rss-parser ve nodemailer ekleyin
|
||||
// npm i - pnpm add - yarn i rss-parser nodemailer
|
||||
|
||||
```ts
|
||||
const Parser = require('rss-parser');
|
||||
const nodemailer = require('nodemailer');
|
||||
const parser = new Parser();
|
||||
@@ -126,8 +129,10 @@ const parser = new Parser();
|
||||
const FEEDS = \[
|
||||
'https://ornek.site/rss.xml',
|
||||
'https://baska.site/feed'
|
||||
```
|
||||
\];
|
||||
|
||||
```ts
|
||||
async function fetchItemsLast7Days() {
|
||||
const now = new Date();
|
||||
const weekAgo = new Date(now.getTime() - 7\*24\*60\*60\*1000);
|
||||
@@ -138,12 +143,14 @@ async function fetchItemsLast7Days() {
|
||||
for (const item of feed.items) {
|
||||
const d = new Date(item.isoDate || item.pubDate || 0);
|
||||
if (d >= weekAgo) {
|
||||
```
|
||||
items.push({ title: item.title, link: item.link, date: d, source: feed.title });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tarihe göre yeni → eski
|
||||
```tsx
|
||||
return items.sort((a, b) => b.date - a.date);
|
||||
}
|
||||
|
||||
@@ -173,6 +180,7 @@ function renderHtml(items){
|
||||
const html = renderHtml(items);
|
||||
if (items.length) await sendEmail(html);
|
||||
})();
|
||||
```
|
||||
|
||||
> P_oyraz’ın İpucusu: Bunu bir zamanlayıcıyla (cron, GitHub Actions, serverless scheduler) haftada 1 kez tetikle._
|
||||
|
||||
|
||||
@@ -50,6 +50,7 @@ Svelte, özellikle performansın kritik olduğu projelerde (örneğin düşük p
|
||||
React’ta bir bileşen oluşturmak ve state yönetmek için genellikle `useState` hook'u kullanılır. İşte basit bir sayaç bileşeni örneği:
|
||||
|
||||
// React'ta sayaç bileşeni
|
||||
```tsx
|
||||
import React, { useState } from 'react';
|
||||
function Counter() {
|
||||
const \[count, setCount\] = useState(0);
|
||||
@@ -57,12 +58,17 @@ return (
|
||||
<div>
|
||||
<p>Count: {count}</p>
|
||||
<button onClick={() => setCount(count + 1)}>
|
||||
```
|
||||
Increase
|
||||
```html
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
);
|
||||
}
|
||||
```ts
|
||||
export default Counter;
|
||||
```
|
||||
|
||||
Burada React’in `useState` hook'u ile state yönetimi sağlanır. `onClick` olayında state güncellenir ve bileşen yeniden render edilir. Peki bunu svelte ile nasıl yapıyoruz?
|
||||
|
||||
@@ -70,6 +76,7 @@ Burada React’in `useState` hook'u ile state yönetimi sağlanır. `onClick` ol
|
||||
|
||||
Svelte’de aynı işlevselliği elde etmek çok daha basit ve doğrudan olur. State yönetimi doğrudan JavaScript değişkenleri üzerinden yapılır ve Svelte reaktif yapısı sayesinde değişiklikler otomatik olarak bileşenleri yeniden render eder:
|
||||
|
||||
```html
|
||||
<!-- Svelte'te sayaç bileşeni -->
|
||||
<script\> let count = 0;</script\>
|
||||
|
||||
@@ -79,6 +86,7 @@ Svelte’de aynı işlevselliği elde etmek çok daha basit ve doğrudan olur. S
|
||||
Increase
|
||||
</button\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
Bu daha büyük projelerde dez avantaj yaratabilir fakat küçük çaplı projelerde sürecin hızlanmasına olanak tanır.
|
||||
|
||||
@@ -89,6 +97,7 @@ Bu daha büyük projelerde dez avantaj yaratabilir fakat küçük çaplı projel
|
||||
React’ta bir bileşene `props` geçirerek veri aktarımı şu şekilde yapılır:
|
||||
|
||||
// React'ta parent bileşen
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import Greeting from './Greeting';
|
||||
|
||||
@@ -97,13 +106,16 @@ function App() {
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
// React'ta child bileşen
|
||||
```tsx
|
||||
function Greeting({ name }) {
|
||||
return <p>Hello, {name}!</p>;
|
||||
}
|
||||
|
||||
export default Greeting;
|
||||
```
|
||||
|
||||
Burada `Greeting` bileşenine `props` olarak `name` değerini geçiyoruz ve bu props'u child bileşende kullanıyoruz.
|
||||
|
||||
@@ -111,6 +123,7 @@ Burada `Greeting` bileşenine `props` olarak `name` değerini geçiyoruz ve bu p
|
||||
|
||||
Svelte’de props kullanımı ise daha basit ve doğrudandır:
|
||||
|
||||
```html
|
||||
<!-- Svelte'te parent bileşen -->
|
||||
<script\> import Greeting from './Greeting.svelte';</script\>
|
||||
|
||||
@@ -120,6 +133,7 @@ Svelte’de props kullanımı ise daha basit ve doğrudandır:
|
||||
<script\> export let name;</script\>
|
||||
|
||||
<p\>Hello, {name}!</p\>
|
||||
```
|
||||
|
||||
Svelte’de bir değişkeni `export` ederek dışarıdan bileşene veri aktarılabilir. Bu, React'taki `props` yapısına karşılık gelir ve çok daha sade bir kullanım sunar. Aslında yine aynı yere varıyoruz. Daha komplike projelerde tercih edilmeyebilir.
|
||||
|
||||
@@ -129,6 +143,7 @@ Svelte’de bir değişkeni `export` ederek dışarıdan bileşene veri aktarıl
|
||||
|
||||
React’ta formlarda state yönetimi ve event handling biraz daha karmaşık olabilir:
|
||||
|
||||
```tsx
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function Form() {
|
||||
@@ -147,6 +162,7 @@ function Form() {
|
||||
}
|
||||
|
||||
export default Form;
|
||||
```
|
||||
|
||||
Her input değişikliğinde state güncellenir ve render tetiklenir.
|
||||
|
||||
@@ -154,12 +170,14 @@ Her input değişikliğinde state güncellenir ve render tetiklenir.
|
||||
|
||||
Svelte’de form kontrolü ve event yönetimi ise çok daha basit:
|
||||
|
||||
```html
|
||||
<script\> let inputValue = '';</script\>
|
||||
|
||||
<div\>
|
||||
<input type\="text" bind:value\={inputValue} />
|
||||
<p\>Input: {inputValue}</p\>
|
||||
</div\>
|
||||
```
|
||||
|
||||
Svelte’de `bind` ifadesi ile bir input elemanını doğrudan bir değişkene bağlayabilirsiniz. Bu, iki yönlü veri bağlamayı (two-way binding) çok basit hale getirir. Gelin burada ki ana mantığı anladığımıza göre biraz daha Svelte’e odaklanalım ve Svelte’in özelliklerini daha derinlemesine inceleyelim.
|
||||
|
||||
@@ -176,20 +194,26 @@ Svelte’de lifecycle metotları, bileşenlerin yaşam döngüsü içinde belirl
|
||||
|
||||
Svelte’de bir bileşenin DOM’a eklenmesiyle birlikte yapılacak işlemleri `onMount` fonksiyonu ile tanımlayabilirsiniz:
|
||||
|
||||
```html
|
||||
<script\> import { onMount } from 'svelte';
|
||||
```
|
||||
|
||||
```ts
|
||||
let data;
|
||||
|
||||
onMount(async () => {
|
||||
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
|
||||
```
|
||||
data = await res.json();
|
||||
});</script\>
|
||||
|
||||
```html
|
||||
<div\>
|
||||
{#if data}
|
||||
<p\>{data.title}</p\>
|
||||
{/if}
|
||||
</div\>
|
||||
```
|
||||
|
||||
Bu örnekte `onMount`, bileşen DOM’a yerleştiği anda bir API çağrısı yapar ve sonuçları ekranda görüntüler.
|
||||
|
||||
@@ -202,15 +226,19 @@ Svelte’de reaktiviteyi tetiklemek için sadece bir değişkenin değerini gün
|
||||
|
||||
**Reaktif İfadeler:**
|
||||
|
||||
```html
|
||||
<script\> let count = 0;
|
||||
let doubled;
|
||||
```
|
||||
|
||||
// $: ifadesi, reaktif bir bloğu işaretler
|
||||
$: doubled = count \* 2;</script\>
|
||||
|
||||
```html
|
||||
<p\>Count: {count}</p\>
|
||||
<p\>Doubled: {doubled}</p\>
|
||||
<button on:click\={() => count++}>Increase</button\>
|
||||
```
|
||||
|
||||
Bu örnekte, `count` değişkeni her arttığında `doubled` reaktif olarak güncellenir ve bu değişiklik ekrana yansır.
|
||||
|
||||
@@ -225,16 +253,22 @@ Svelte, küçük projeler için bileşenler arası veri paylaşımı amacıyla o
|
||||
|
||||
Writable store, bileşenler arasında güncellenebilir bir veri paylaşımı sağlar. Aşağıda bir sayaç uygulaması için writable store kullanımını görebilirsiniz:
|
||||
|
||||
```html
|
||||
<!-- store.js -->
|
||||
```
|
||||
```ts
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const count = writable(0);
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- App.svelte -->
|
||||
<script\> import { count } from './store';</script\>
|
||||
|
||||
<p\>Count: {$count}</p\>
|
||||
<button on:click\={() => count.update(n => n + 1)}>Increase</button\>
|
||||
```
|
||||
|
||||
Store değerine erişmek için `$` işaretini kullanarak reaktif bir bağlama yapabilirsiniz. Ayrıca, `count.update()` ile store değerini güncelleyebilirsiniz. Gördüğünüz gibi oldukça basit.
|
||||
|
||||
|
||||
@@ -35,7 +35,9 @@ CSS de her yeni stil için bir class yazman gerekiyor. Örneğin, bir butonun ar
|
||||
|
||||
Tailwind de ise aynı butonu şu şekilde oluşturabilirsin:
|
||||
|
||||
```html
|
||||
<button class\="bg-blue-500 text-white p-4"\>Click Me</button\>h
|
||||
```
|
||||
|
||||
Yani, her şey HTML içerisinde çok daha hızlı bir şekilde yönetilebiliyor. Bu da stili hızlıca oluşturmanı ve üzerinde anında değişiklik yapmanı sağlıyor. Üstelik terimler daha basite indirgendiği için kafa karışıklığından da kurtuluyoruz.
|
||||
|
||||
@@ -46,9 +48,11 @@ CSS’de büyük projelerde zamanla stil dosyaları karmaşık hale gelebilir. S
|
||||
**3- Responsive Tasarım Kolaylığı**
|
||||
CSS de her ekran boyutu için ayrı media query yazman gerekiyor fakat Tailwind’de bu iş çok daha kolay. Örneğin:
|
||||
|
||||
```html
|
||||
<div class\="text-sm md:text-lg lg:text-xl"\>
|
||||
Responsive Metin
|
||||
</div\>
|
||||
```
|
||||
|
||||
Bu kod, küçük ekranlarda `text-sm`, orta ekranlarda `text-lg`, büyük ekranlarda `text-xl` sınıflarını uygular. Media query yazmaya gerek yok. Bana kalırsa Tailwind’in sağladığı en büyük avantajlardan birisi de bu.
|
||||
|
||||
@@ -102,9 +106,11 @@ module.exports = {
|
||||
|
||||
Tailwind ile responsive tasarımlar oluşturmak çok basittir. Sınıfların başına `sm:`, `md:`, `lg:` gibi prefix'ler ekleyerek farklı ekran boyutlarına göre stilleri kolayca tanımlayabilirsin. Bu, mobil uyumluluğu hızla sağlamanın en etkili yollarından biri. Web sitesini tasarlamaya başlarken mobil versiyonlardan başlarsan daha rahat edersin. **Küçükten büyüğe**
|
||||
|
||||
```html
|
||||
<div class\="text-sm md:text-lg lg:text-xl"\>
|
||||
Responsive Metin
|
||||
</div\>
|
||||
```
|
||||
|
||||
6\. **Tailwind Eklentilerini Keşfet**
|
||||
|
||||
|
||||
@@ -35,7 +35,9 @@ Three.js, **JavaScript ile tarayıcı üzerinde 3D grafikler oluşturmak için k
|
||||
|
||||
Three.js, bir sahne (scene) oluşturmanıza olanak tanır. Sahne, 3D dünyanızı barındıran bir konteyner gibidir. İçine nesneler, ışıklar ve kameralar ekleyebilirsiniz.
|
||||
|
||||
```ts
|
||||
const scene = new THREE.Scene();
|
||||
```
|
||||
|
||||
### 2\. Kameralar
|
||||
|
||||
@@ -44,16 +46,20 @@ Kameralar, 3D sahnenizi “görmeyi” sağlar. Three.js’de iki ana kamera tü
|
||||
* **PerspectiveCamera**: İnsan gözünün görme şekline benzer. Uzak nesneler daha küçük görünür.
|
||||
* **OrthographicCamera**: Nesneler uzaklıklarına göre boyut değiştirmez. Teknik çizimler için kullanışlıdır.
|
||||
|
||||
```ts
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
```
|
||||
camera.position.z = 5;
|
||||
|
||||
### 3\. Geometri ve Malzeme (Geometry & Material)
|
||||
|
||||
Geometri, 3D dünyanızdaki nesnelerin şekillerini tanımlar: küreler, kutular, düzlemler… Malzeme ise bu şekillerin nasıl görüneceğini belirler. Örneğin, mat mı parlak mı, hangi renkte olacak?
|
||||
|
||||
```ts
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
```
|
||||
scene.add(cube);
|
||||
|
||||
### 4\. Işıklandırma (Lighting)
|
||||
@@ -64,7 +70,9 @@ Işık, sahnenizi gerçekçi hale getirir. Three.js, çeşitli ışık türleri
|
||||
* PointLight (Nokta ışığı)
|
||||
* DirectionalLight (Güneş gibi yönlendirilmiş ışık)
|
||||
|
||||
```ts
|
||||
const light = new THREE.PointLight(0xffffff, 1, 100);
|
||||
```
|
||||
light.position.set(10, 10, 10);
|
||||
scene.add(light);
|
||||
|
||||
@@ -72,7 +80,9 @@ scene.add(light);
|
||||
|
||||
Renderer, sahnenizi tarayıcıda görüntülemenizi sağlar. Three.js’nin WebGLRenderer’ı, GPU’nun gücünü kullanarak sahneleri hızlı bir şekilde çizer.
|
||||
|
||||
```ts
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
```
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
@@ -80,8 +90,10 @@ document.body.appendChild(renderer.domElement);
|
||||
|
||||
Three.js ile sahnenizi canlandırabilirsiniz. Bu, genellikle bir **animasyon döngüsü** kullanılarak yapılır:
|
||||
|
||||
```ts
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
```
|
||||
cube.rotation.x += 0.01;
|
||||
cube.rotation.y += 0.01;
|
||||
renderer.render(scene, camera);
|
||||
@@ -97,30 +109,42 @@ animate();
|
||||
|
||||
### Gelin bir önreğe bakalım
|
||||
|
||||
```ts
|
||||
import \* as THREE from 'three';
|
||||
```
|
||||
|
||||
// Sahne oluştur
|
||||
```ts
|
||||
const scene = new THREE.Scene();
|
||||
```
|
||||
|
||||
// Kamera ve ışık
|
||||
```ts
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
```
|
||||
camera.position.z = 5;
|
||||
|
||||
// Renderer
|
||||
```ts
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
```
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
// Geometri ve malzeme
|
||||
```ts
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
```
|
||||
|
||||
scene.add(cube);
|
||||
|
||||
// Animasyon
|
||||
```ts
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
```
|
||||
cube.rotation.x += 0.01;
|
||||
cube.rotation.y += 0.01;
|
||||
renderer.render(scene, camera);
|
||||
|
||||
@@ -38,6 +38,7 @@ Gelin küçük bir karşılaştırma yapalım.
|
||||
|
||||
JSX, React bileşenlerinde JavaScript kodunu HTML benzeri bir sözdizimi ile yazmamıza olanak tanır. Ancak, JSX’te tip kontrolü yapılmıyor.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
|
||||
const Greeting = ({ name }) => {
|
||||
@@ -45,14 +46,18 @@ const Greeting = ({ name }) => {
|
||||
};
|
||||
|
||||
export default Greeting;
|
||||
```
|
||||
|
||||
## TSX (TypeScript XML)
|
||||
|
||||
TSX ise, JSX’in TypeScript ile birleştirilmiş hali olup, tip kontrolü ve daha iyi hata ayıklama özellikleri sunuyor. Tip güvenliği sağlıyor ve bu, bileşenlerin beklenmedik hatalara karşı korunmasına yardımcı oluyor.
|
||||
|
||||
```ts
|
||||
import React from 'react';
|
||||
```
|
||||
|
||||
// Props için TypeScript ile tip tanımlaması
|
||||
```tsx
|
||||
interface GreetingProps {
|
||||
name: string;
|
||||
}
|
||||
@@ -62,6 +67,7 @@ const Greeting: React.FC<GreetingProps\> = ({ name }) => {
|
||||
};
|
||||
|
||||
export default Greeting;
|
||||
```
|
||||
|
||||
## Karşılaştırma
|
||||
|
||||
|
||||
Reference in New Issue
Block a user