Web geliştirme sürecinde kullanılan dosya uzantıları, projenin mimarisini, kullanılan teknolojiyi ve çalışma ortamını doğrudan etkiler. Frontend, backend ve full-stack geliştirme süreçlerinde farklı uzantılar farklı amaçlara hizmet eder.

Aşağıda temel web geliştirme dosya uzantıları ve profesyonel açıklamaları yer almaktadır.

1️⃣ HTML Dosyaları

🔹 .html

Standart HTML dosyasıdır.
Web sayfasının iskelet yapısını oluşturur.

Kullanım alanı:

• Statik web siteleri
• Landing page’ler
• Template yapıları

🔹 .htm

.html dosyasının alternatifidir.
Eski Windows sistemlerinde 3 harf sınırı nedeniyle kullanılmıştır. Günümüzde daha az tercih edilir.

2️⃣ Stil Dosyaları

🔹 .css (Cascading Style Sheets)

Web sayfasının tasarımını belirler.

Kullanım alanı:

• Renkler
• Layout
• Responsive tasarım
• Animasyonlar

Modern projelerde:

• CSS Modules
• SCSS / SASS
• Tailwind CSS gibi sistemlerle birlikte kullanılır.

3️⃣ JavaScript ve Modül Dosyaları

🔹 .js

Standart JavaScript dosyasıdır.
Web sayfasına etkileşim kazandırır.

Kullanım alanı:

• DOM manipülasyonu
• API çağrıları
• Event handling
• Form validasyonu

🔹 .mjs

ES Modules formatında JavaScript dosyasıdır.
Modern modüler JavaScript projelerinde kullanılır.

Özellik:

import { helper } from './utils.mjs';

Node.js ve modern tarayıcılar destekler.

🔹 .cjs

CommonJS modül sistemini kullanır.
Genellikle Node.js projelerinde görülür.

Örnek:

const fs = require('fs');

4️⃣ React ve JSX Dosyaları

🔹 .jsx

React bileşenleri için kullanılır.
JavaScript + XML benzeri JSX syntax içerir.

Örnek:

const App = () => <h1>Hello World</h1>;

🔹 .tsx

TypeScript + JSX kullanımıdır.
React projelerinde tip güvenliği sağlar.

Kurumsal projelerde daha çok tercih edilir.

5️⃣ TypeScript Dosyaları

🔹 .ts

TypeScript dosyasıdır.
JavaScript’in tip güvenli versiyonudur.

Avantajları:

• Compile-time hata yakalama
• Büyük projelerde sürdürülebilirlik
• Daha güvenli kod

6️⃣ Veri Formatları

🔹 .json (JavaScript Object Notation)

Veri saklama ve API iletişimi için kullanılır.

Örnek:

{
  "name": "Engin",
  "role": "Developer"
}

Backend ve frontend arasında veri taşımada standarttır.

7️⃣ Backend Dilleri

🔹 .py

Python script dosyasıdır.

Web Framework’ler:

• Django
• Flask
• FastAPI

Backend API geliştirmede sık kullanılır.

🔹 .java

Java kaynak kodu dosyasıdır.

Web Framework’ler:

• Spring Boot
• Jakarta EE

Kurumsal (enterprise) uygulamalarda yaygındır.

🔹 .php

PHP script dosyasıdır.

Kullanım alanı:

• WordPress
• Laravel
• CodeIgniter
• Magento

Sunucu taraflı çalışır.

📊 Frontend vs Backend Uzantı Dağılımı

Kategori	Uzantılar
Frontend	.html, .css, .js, .jsx, .tsx
Backend	.php, .py, .java
Modül Sistemleri	.mjs, .cjs
Veri Formatı	.json
Typed Development	.ts, .tsx

🎯 Modern Web Proje Örneği

Bir React + Node.js projesinde tipik dosya yapısı:

src/
 ├── App.tsx
 ├── index.tsx
 ├── components/
 ├── utils/
server/
 ├── index.mjs
 ├── routes/
package.json

Bu yapı:

• Frontend: TypeScript + React
• Backend: ES Module
• Konfigürasyon: JSON

🚀 Profesyonel Perspektif

Web geliştirmede dosya uzantılarını bilmek sadece teorik bilgi değildir.

Doğru uzantı seçimi:

✔ Modül sistemini belirler
✔ Build tool davranışını etkiler (Webpack, Vite, Turbopack)
✔ Deployment sürecini etkiler
✔ Kod okunabilirliğini artırır
✔ Takım içi standardizasyon sağlar

🔥 Özet

Modern web projeleri genellikle:

• Frontend → TypeScript (.ts, .tsx)
• Backend → Node (.mjs) veya Python (.py)
• Veri → JSON
• Stil → CSS / SCSS
• Markup → HTML

kombinasyonu ile geliştirilir.