Import React

React kullanarak bir bileşen oluştururken, işe React kütüphanesini projeye dahil ederek başlanır. Bakınız:

import React from 'react';

React’i içe aktardığınızda, kütüphanenin temel özelliklerini kullanmaya başlamak mümkün hale gelir. Örneğin, bileşenler ve daha sonra detaylı şekilde inceleyeceğimiz Hooks gibi güçlü araçlar bu şekilde kullanılabilir.

React uygulamalarını yeni öğrenmeye başladıysanız dosya adlandırmalarınıza App.js ve index.js adını vererek işe başlayabilirsiniz. Bu yapıda, App.js uygulamanın ana bileşenlerini barındırır. index.js ise uygulamanın giriş noktasıdır ve tarayıcıda görüntülenmesini sağlar.

App.js dosyasında bir bileşen tanımlayıp onu index.js dosyasında çağırdığımız basit bir örnek üzerinden gösterelim:

Bu kod, App.js dosyasında tanımlanan bileşeni alır ve index.js üzerinden DOM’a ekler. Bu gördüğünüz süreç, React uygulamasının temel çalışma yapısını oluşturmaktadır.

Import ReactDOM

Yukarıdaki kodu incelediğinizde, React’in yanı sıra ReactDOM’un da projeye dahil edildiğini görebilirsiniz:

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

ReactDOM, DOM (Document Object Model) ile etkileşim kurmamızı sağlayan yöntemler içerir. Ancak, React’ten gelen yöntemler tamamen React’e özgüdür ve doğrudan DOM ile çalışmaz. ReactDOM’un asıl görevi, React bileşenlerini alıp DOM ile buluşturmaktır.