ReactJS Hello World!

"ReactJS Hello World" temelde, ReactJS kullanarak basit bir uygulama oluşturmanın ilk adımıdır. ReactJS, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. "Hello World" programı, programlama öğreniminde genellikle ilk adım olarak kabul edilir ve yeni bir programlama dili veya teknolojisine giriş yapmak için kullanılır.

ReactJS'de "Hello World" programı genellikle şu adımları içerir:

1. React Kütüphanesinin Eklenmesi: React ve ReactDOM kütüphaneleri projeye dahil edilir. Bu, genellikle bir HTML dosyasına React kütüphanelerinin <script> etiketleri ile eklenmesi veya bir Node.js projesinde npm veya yarn ile kütüphanelerin kurulması ile yapılır.

2. Bir Root DOM Elemanının Oluşturulması: HTML'de, React bileşenlerinin eklenmesi için bir kök (root) DOM elemanı oluşturulur. Bu genellikle bir <div> etiketidir.

3. React Bileşeninin Yazılması: En basit haliyle bir React bileşeni, ekranda gösterilecek içeriği tanımlar. "Hello World" örneğinde, bu genellikle sadece "Hello, World!" metnini döndüren bir fonksiyondur.

4. ReactDOM ile Bileşenin Sayfaya Render Edilmesi: ReactDOM.createRoot() ile kök DOM elemanı için bir React kökü oluşturulur ve root.render() ile bileşen bu köke eklenir.

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

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

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

Bu kod, bir web sayfasında "Hello, World!" başlığını gösterir. Bu, ReactJS'nin temel kullanımını gösterir ve yeni başlayanlar için iyi bir başlangıç noktasıdır.

Not: React 18 öncesinde bileşenler ReactDOM.render(<HelloWorld />, document.getElementById('root')) ile render ediliyordu. Bu yöntem React 18'de kullanımdan kaldırıldı, React 19'da ise tamamen kaldırıldı.