Merhabalar.
React ile gelen klasörleri ve dosyaları neden var olduklarını anlamaya devam ediyoruz. Bu yazımızın konusu index.html dosyası.
public klasörünü açarsanız index.html dosyasını göreceksiniz.
Normal bir web geliştirme projesinde her sayfa için ayrı ayrı html dosyaları yazardık. Ancak React ile beraber gelen SPA yaklaşımı artık projelerimizde var olacak onlarca yüzlerce html dosyasından bizi kurtardı. Ancak şunu unutmamalıyız ki bir browser kendisine gönderilen bir html dokümanını okuyabilir ve içinde bulunan js ve css dosyalarını çözümleyip ekrana yansıtabilir. O yüzden react projemizde ekranda bir şeyler gösterebilmek için bir tane html dosyasına mutlaka ihtiyacımız olacaktı. İşte o dosya bu index.html dosyası.
Burada anlattığımı kısaca şöyle daha teknik ele alayım.
React projelerinde genellikle public klasörü içinde bulunan index.html dosyası, uygulamanın başlangıç HTML dosyasını temsil eder. Bu dosya, React uygulamasının kök HTML şablonunu içerir ve genellikle src klasöründeki JavaScript dosyalarıyla birleştirilir.
Şimdi bu dosyanın içeriğindeki kodlara göz atacağız.
<!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" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Bu HTML dosyasının önemli noktaları şunlardır:
<!DOCTYPE html>: HTML5 belgesi olarak sayfanın doğru bir şekilde tarif edildiğini belirtir.
<html lang="en">: Sayfanın dilini belirtir (genellikle İngilizce). Türkçe yapmak isterseniz tr yazınız.
<head> bölümü: Sayfanın başlık, karakter seti, favicon ve meta etiketleri gibi genel bilgilerini içerir.
<meta charset="utf-8">: Sayfanın karakter setini UTF-8 olarak belirtir.
<link rel="icon" href="%PUBLIC_URL%/favicon.ico">: Sayfanın faviconunu belirtir. %PUBLIC_URL% değişkeni, build işlemi sırasında public klasörünün yoluyla değiştirilir.
<meta name="viewport" content="width=device-width, initial-scale=1">: Mobil cihazlarda daha iyi görüntüleme için viewport konfigürasyonunu belirtir.
<title>React Uygulaması</title>: Sayfanın başlığını belirtir. Bu başlık tarayıcı sekmesinde görünür.
<body> bölümü: Uygulamanın içeriğini içerir. Genellikle React uygulamasının kök elemanını (genellikle <div id="root"></div>) içerir.
Burada bulunan root elementine index.js dosyasından erişeceğiz ve bütün componentlerimizi buraya yerleştireceğiz.
<noscript> bölümü: Tarayıcıda JavaScript devre dışı bırakıldığında görüntülenecek bir uyarıdır.
React uygulamanız genellikle bu temel yapıya ek bilgiler ekleyerek ve JavaScript dosyalarını bu temel HTML şablonuyla birleştirerek çalışır. Bu dosyanın içeriği, proje bağlamına ve ihtiyaçlara bağlı olarak değişebilir.
Burayı da anladıysak index.js dosyamıza doğru yol alabiliriz.
Bir sonraki yazımda görüşmek üzere.
