Elementlerin Render Edilmesi

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach how to write JSX and show it on an HTML page:

Writing Markup with JSX

Add React to an Existing Project

Elementler, React uygulamalarının en küçük yapı birimidir.

Bir element, ekranda neyi görmek istiyorsanız onu tasvir eder:

const element = <h1>Hello, world</h1>;

Tarayıcının DOM elementlerinin aksine, React elementleri daha sade nesnelerdir ve oluşturulmaları daha kolaydır; çünkü React DOM, elementler ile eşleşmek için DOM’ın güncellenmesi işini kendisi halleder.

Not:

“Bileşen” (component) konsepti daha yaygın olarak bilindiği için, anlam bakımından elementler ile karıştırılabilir. Sonraki bölümde React bileşenlerine de değineceğiz. Fakat elementler, React bileşenlerinin en küçük yapı taşlarıdır. Bu nedenle sonraki bölüme atlamadan önce bu bölümü okumanızı tavsiye ederiz.

Bir Elementin DOM’a Render Edilmesi

HTML dosyanızın herhangi bir yerinde <div> olduğunu düşünelim:

<div id="root"></div>

Buna “root” (kök) düğüm denir; çünkü içerisindeki her şey React DOM tarafından yönetilir.

Genellikle React ile yazılan uygulamalar, sadece bir adet kök DOM düğümü içerirler. Eğer React’i mevcut uygulamanıza entegre ediyorsanız, birbirinden izole olacak şekilde dilediğiniz kadar kök DOM düğümüne sahip olabilirsiniz.

Bir React elementini render etmek istiyorsanız, öncelikle dom elemanı ile ReactDOM.createRoot() metodunu çağırın, ardından React elemanını, root.render() metoduna parametre olarak geçirmeniz gereklidir:

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);