“React Componenet” Örneği

Aşağıdaki örnekte, HelloWorld.js bileşeni “Hello World!” mesajını döner, App.js bu bileşeni içine alarak üst düzey bileşen olarak yapılandırılır ve index.js bu yapıyı render ederek mesajın ekranda görüntülenmesini sağlar.

• HelloWorld.js
  • Bir başlık (Hello World!) döner.
  • Stateless bir bileşendir (durum tutmaz).
  • Diğer bileşenler içinde kullanılabilir.
  • export default HelloWorld; Bu sayede artık HelloWorld bileşeni başka dosyalarda kullanılabilir. Örneğin, App.js dosyasında import HelloWorld from './HelloWorld'; şeklinde kullanılabilir.
• App.js
  • Uygulamanın ana bileşeni olarak çalışır.
  • HelloWorld bileşenini çağırır ve organize eder.
  • import HelloWorld from "./HelloWorld"; HelloWorld bileşeni aynı dizindeki HelloWorld.js dosyasından alınır ve App bileşeninde kullanılır.
  • export default App; App bileşeni başka dosyalarda kullanılabilir. Örneğin, index.js dosyasında import App from './App'; şeklinde kullanılabilir.
• index.js
  • Uygulamanın başlangıç dosyasıdır.
  • React bileşenlerini HTML sayfasına yerleştirir.
  • App bileşenini tarayıcıdaki root div’ine render eder.
  • import App from "./App"; App bileşeni aynı dizindeki App.js dosyasından alınır ve index.js içinde kullanılır.
  • Export işlemi yapılmaz. index.js yalnızca uygulamanın başlatılmasını sağlar ve dışa aktarılacak bir şey içermez.