React Tutorial 2023 14 – index.js Dosyasını Anlamak

Merhabalar.

React ile gelen klasörleri ve dosyaları neden var olduklarını anlamaya devam ediyoruz. Bu yazımızın konusu index.js dosyası.

src klasörünü açarsanız index.js dosyasını göreceksiniz.

React geliştirmelerini yapacağımız yer bu src klasörü. Genellikle js veya jsx dosyalarımızı ve css benzeri geliştirmelerimizi burada doğru bir mimaride kurgulayıp yazacağız.

index.js dosyası, geliştirdiğimiz birçok component’i bir araya getirir ve bunları ekranda göstermek için index.html dosyasındaki root id’li div elementine bağlar. Binlerce component’i farklı jsx dosyalarında yazsak bile, bunları index.html dosyasına entegre etmezsek, yaptığımız geliştirmeleri ekranda göremeyiz. Bu nedenle, index.js başlangıç dosyası oldukça kritiktir.

index.js dosyası genellikle bir React uygulamasının ana giriş noktasıdır. Bu dosya, React uygulamanızın başlangıç ​​noktasını belirler ve uygulamanızın ilk rendering işlemlerini yönetir.

index.js dosyasının içeriğine bir göz atalım.

React ve ReactDOM Importları:

import React from 'react';
import ReactDOM from 'react-dom/client';

Burada, React ve ReactDOM modüllerini projenize dahil ediyoruz. React, kullanıcı arayüzü oluşturmak için kullanılırken, ReactDOM, React uygulamasını HTML DOM’a bağlamak için kullanılır. Bunlar bir react uygulamasında olmazsa olmaz iki kütüphanemiz. (8.11.2023 itibariyle) Gelecekte bu durum güncellenebilir. Ana dokümanı her zaman takip ediniz.

CSS Dosyasının İmport Edilmesi:

Bu satır, projenizin kök dizininde bulunan “index.css” dosyasını içeri aktarır. Bu dosya, uygulamanızın genel stilini belirlemek için kullanılabilir. İhtiyaç duymadığınız durumda silmenizde bir sakınca yoktur.

import './index.css';

App Component’inin İmport Edilmesi:

“App” bileşeni, uygulamanızın ana bileşenidir. Burada, “App” bileşenini “./App” yoluyla içeri aktarıyoruz. Aynı kök dizinde App.js diye bir dosya göreceksiniz. Bu dosya içine girerseniz adı App olan bir fonksiyon görürsünüz. İşte bunu çağırabilmek için kullanıyoruz. App’i index.js’ye bileşen olarak gönderirken kendi yazdığımız componentlerin gerekli olanlarını App.js içine ekleyerek geliştirmelerimizi yapıyoruz. Ancak bu durumun böyle olmak zorunda olmadığını direkt index.js içine de ekleyebileceğimizin mantığını anlamanızı istiyorum.

import App from './App';

ReactDOM.createRoot ve Render İşlemi:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Bu kısımda, React uygulamanızı DOM’a bağlamak için createRoot ve render fonksiyonları kullanılır. “root” değişkeni, uygulamanızın HTML içindeki “root” elementine bağlanır. Ardından, render fonksiyonu ile “App” bileşeni bu “root” elementine render edilir. Böylece yaptığımız UI geliştirmeleri ekranda görünür olur.

React.StrickMode:

<React.StrictMode> bileşeni, uygulamanızdaki potansiyel problemleri belirlemek ve uygulamanızın genel performansını artırmak için kullanılan bir araçtır. Bu bileşen, geliştirme sırasında ekstra uyarıları ve hata mesajlarını etkinleştirerek, uygulamanızdaki olası problemleri tespit etmeye çalışır.

Bu blok içindeki bileşenler, geliştirme sırasında ekstra kontrollerden geçirilir. Özellikle, yan etkilerin iki kez çağrılması durumunda ve bazı eski yaşam döngü yöntemlerinin kullanılması gibi potansiyel sorunları belirlemek için ekstra uyarılar sağlar.

Bu mod, uygulamanın üretim ortamında çalıştığında devre dışı bırakılır, bu nedenle sadece geliştirme sırasında yardımcı olur. <React.StrictMode> eklemek, uygulamanızı daha sağlam ve gelecekteki React sürümlerine uyumlu hale getirmek için iyi bir uygulama olabilir.

Web Vitals Raporlama:

reportWebVitals();

Bu satır, web performansını ölçen ve raporlayan bir fonksiyon olan “reportWebVitals” fonksiyonunu çağırır.

reportWebVitals dosyası, React uygulamalarında performansı izlemek ve ölçmek için kullanılan bir araçtır. Bu dosya, uygulamanın performansını ölçen ve çeşitli metrikleri raporlayan bir dizi işlevi içerir. Bu metrikler arasında sayfa yükleme süresi, kullanıcı etkileşimleri ve diğer performans göstergeleri bulunabilir.

reportWebVitals dosyası genellikle src dizini altında bulunur ve index.js dosyasından içe aktarılır. Bu sayede uygulama başlatıldığında performans verileri toplanır ve uygun bir şekilde raporlanır.

React ekibi, kullanıcıların uygulamalarının performansını daha iyi anlamalarına ve izlemelerine yardımcı olmak amacıyla reportWebVitals dosyasını sunmuştur. Bu dosya, React uygulamalarının performansını optimize etmek ve geliştirmek için kullanışlı bilgiler sağlar.

İlk defa React öğreniyorsan, bu dosyanın anahtar kısımlarını anlamak önemlidir. React uygulamanızın giriş noktası olan “index.js”, genellikle uygulamanızın yapılandırılmasını ve başlatılmasını sağlar.

En önemli dosyalarımızdan birini daha öğrenmiş olduk. Aslında anlamlarını öğrendiğimizde yapı çok mantıklı ve çokta zor olmayan karmaşadan uzak olduğunu rahatlıkla görebiliyoruz.

Bir sonraki yazımda App.js dosyasına bakacağız.

Sonrasında yavaş yavaş React uygulamamızı nasıl çalıştırırız buna bakacağız.

Görüşmek üzere.