Uygulama geliştirenler için kolaylıklar sağlayacak bir dizi özellik React ile birlikte gelmektedir. Özellikle create-react-app ile bir uygulama oluşturduğunuzda public klasör desteği ile gelir. Şimdi public klasörü nedir ve neden önemlidir inceleyelim.
React Public Klasörü Nedir?
Uygulama üzerinden ulaşılabilecek html, css, resim, javascript gibi dosyaların tutulduğu bir klasördür. React uygulamasının ana çatısı olan index.html de bu klasörde tutulur.
React son tahlilde bir html / javascript uygulaması geliştirmek için kullanılır. Mesela uygulama iconunu bu klasör içerisinde tutabiliriz ve index.html üzerinden kullanabiliriz.
React Public Klasörü Ne İşe Yarar?
React uygulaması bir web sayfasıdır. Web safyası içerisinde kullanılacak bazı dosyaları bu klasör içerisinde tutabiliriz. Mesela dışarıdan eklenecek bir stil dosyasını bu klasöre koyabiliriz. Sonrasında index.html dosyasına ekleyerek uygulamamız içerisinde kullanabiliriz.
Mesela elimizde stiller.css adında bir css stil dosyamız olsun. Bunu public klasörü içerisine koyalım. Sonrasında public klasörü içerisinde bulunan index.html dosyasına ekleyelim.
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
// Stil dosyamızı uygulamaya ekliyoruz.
<link rel="stylesheet" href="%PUBLIC_URL%/stiller.css">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>**NOT : ** %PUBLIC_URL% olarak tanımlanan bölüm ortam değişkenlerinde tanımlanmış public url adresidir. Ön tanımlı olarak bu public klasörüdür. İstenirse değiştirilebilir. Eğer değişiklik yapılmadı ise sadece dosya ismi ile de işlem yapılabilir.
Bu işlemden sonra bu sitil dosyasında tanımlanmış olan sitilleri uygulamamız içerisinde import etmeden kullanabiliriz. Çünkü son olarak üretilecek olan uygulama index.html içerisindeki root idsine sahip div içerisinde gösterilecektir.
Bunun gibi sayfa üzerinde sıklıkla kullanacağımız resimleri, videoları veya diğer dosyaları da public klasörü içerisinde kullanabilir.
Ne Zaman Public Klasörü Kullanılmadır?
Uygulama geliştirirken öncelik olarak eklemek istediklerimizi uygulamamız içerisinden import edilmesi tavsiye ediliyor. Bununla birlikte bazı durumlarda public klasörünün kullanılması gerekebilir. Birkaç sebep sayacak olursak.
- Build çıkışında belirli bir isime sahip bir dosyaya ihtiyaç olduğunda.
- Binlerce resim dosyası olduğunda. Bu durumda public klasörü içerisinde bir images klasörü oluşturarak resimler buraya eklenebilir.
- Ufak bir scriptin uygulama dışından eklenemsi gerekdiği durumlarda.
- Webpack iel uyumsuz paketlerin kullanılması gerektiğinde.
Public klasörü kullanmak tercih edilebilir.
Sonuç
Public klasörü React uygulaması içerisinde bir web safyası üzerinde kullanılıyormuşcasına kullanmak istediğimiz dosyaları saklamak için kullanılmaktadır.
React ile ilgili sorularınızı yorumlardan bize sorabilirsiniz.