0Pricing
React Academy · Ders

Klasör Yapısı ve Adlandırma Kuralları

Bir React projesini özellik tabanlı klasörler ve anlaşılır dosya adlarıyla düzenleyin.

Klasör Yapısı ve Adlandırma Kuralları, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste React projeleri için yaygın klasör yapılarını inceleyecek, dosyalar ve bileşenler için adlandırma kurallarını öğrenecek ve proje büyüdükçe kodu nasıl düzenleyeceğinizi anlayacaksınız.

Varsayılan Yapı

Minimal bir Vite + React projesinde `src/App.jsx` ve `src/main.jsx` bulunur. Bu, küçük demolar için yeterlidir ancak ölçeklenebilir değildir. Özellikler ekledikçe, ilişkili kodları bir arada tutmak için özel klasörler oluşturun.
src/
  main.jsx
  App.jsx
  index.css

Özellik Tabanlı Yapı

Dosyaları türlerine göre değil, özelliklerine göre gruplandırın. Her özellik klasörü kendi bileşenini, stillerini, testlerini ve yardımcı işlevlerini içerir. Böylece bir özelliğin tamamını tek seferde eklemek veya silmek kolaylaşır.
src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Bileşen Dosyalarını Adlandırma

Bileşen dosyalarını, bileşen adıyla eşleşecek şekilde **PascalCase** kullanarak adlandırın: `UserCard.jsx`, `NavigationBar.jsx`. Her dosyada tek bir bileşen bulunması standart yaklaşımdır. `.jsx` (veya `.tsx`) kullanılması, düzenleyicilere dosyanın JSX içerdiğini bildirir.

Bileşen Olmayan Dosyaları Adlandırma

Kancalar, yardımcı programlar ve sabitler için **camelCase** kullanın: `useAuth.js`, `formatDate.js`, `apiClient.js`. Test dosyaları, `.test` veya `.spec` uzantısıyla kaynak dosyayı yansıtır: `useAuth.test.js`.

Düzenli İçe Aktarmalar için Index Dosyaları

Bir klasöre `index.js` eklemek, tam dosya yolu yerine klasör yolundan içe aktarma yapmanızı sağlar. Index dosyalarını yalnızca yeniden dışa aktarmalar için kullanın; mantık içermemelidir.
// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Yol Takma Adlarıyla Mutlak İçe Aktarmalar

`vite.config.js` ve `tsconfig.json` içinde `src/` konumunu gösteren bir `@/` takma adı yapılandırın. Bu, `../../../../components/Button` gibi kırılgan göreli yollardan kaçınmanızı sağlar.
// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Paylaşılan Bileşenler ve Özellik Bileşenleri

Yalnızca bir özellikte kullanılan bileşenleri o özelliğin klasöründe tutun. Bir bileşeni yalnızca iki veya daha fazla özellik ihtiyaç duyduğunda `src/components/` klasörüne taşıyın. Gereğinden önce ayıklama yapmaktan kaçının.

Sabit ve Yapılandırma Dosyaları

Sihirli dizeleri, API temel URL'lerini ve ortam değişkeni sarmalayıcılarını `src/lib/constants.js` veya `src/config.js` içinde saklayın. `process.env.VITE_API_URL` dizelerini birçok dosyaya asla dağınık biçimde yerleştirmeyin.
// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Türler ve Arayüzler (TypeScript)

TypeScript projelerinde türleri, onları kullanan özellik veya bileşenin yanında tutun. Birçok özellik tarafından kullanılan paylaşılan türler için, her alan için bir dosya olacak şekilde `src/types/` klasörü oluşturun.

Kısa Kontrol

Özellik tabanlı bir klasör yapısının tür tabanlı bir yapıya göre temel avantajı nedir?

Özet

Özellik tabanlı klasörler kullanın, bileşen dosyalarında PascalCase, kancalar ve yardımcı programlarda camelCase tercih edin, düzenli içe aktarmalar için index.js yeniden dışa aktarmalarını kullanın ve uzun göreli yolları ortadan kaldırmak için @/ gibi bir yol takma adı tanımlayın.

Kurs Tamamlandı

Tebrikler! **React Strict Mode ve En İyi Uygulamalar** konusunu tamamladınız. Artık StrictMode davranışını, saf oluşturma işlevlerinin nasıl yazılacağını, anahtarların ve ref'lerin doğru kullanımını ve ölçeklenebilir bir klasör yapısını anlıyorsunuz.

Sıkça Sorulan Sorular

“Klasör Yapısı ve Adlandırma Kuralları” dersi ücretsiz mi?

Evet — “Klasör Yapısı ve Adlandırma Kuralları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Klasör Yapısı ve Adlandırma Kuralları” dersinde ne öğreneceğim?

Bir React projesini özellik tabanlı klasörler ve anlaşılır dosya adlarıyla düzenleyin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Klasör Yapısı ve Adlandırma Kuralları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. StrictMode Ne Yapar
  2. Saf Bileşenler ve Oluşturma Sırasında Yan Etkilerden Kaçınma
  3. Key ve Ref için En İyi Uygulamalar
  4. Klasör Yapısı ve Adlandırma Kuralları
← React Academy Sayfasına Dön