React kullanıcı arayüzleri geliştirebileceğiniz bir javascript kütüphanesidir. Daha modern ve zengin kullanıcı arayüzlerini daha kolay oluşturabilmeye imkan verdiği için pure javascript yerine kullanılır.

Yeni bir react projesini otomatik olarak oluşturmak için:

https://create-react-app.dev/docs/getting-started adresine git. Terminalde npm install -g create-react-app komutunu çalıştır. Projeyi oluşturacağın konuma git ve npm init react-app my-app komutunu çalıştır. Projeyi visual studio code içinde (open folder diyerek) aç. App.js dosyasını görüntüle. VS Code içinde terminali açarak npm start komutunu çalıştır.

Genel olarak bir tane ROOT component bulunur. Index.js içinde bu root component tanımlanır.

Dinamik değerleri ekrana yazdırmak için:

const deger = getSomeDegerFromServer();
//deger isminde bir değişken olsun. Bu şekilde her ekran yenilendiğinde değişen bir değeri parantez içine alarak sayfada gösteririz.
<div>
<p>{deger}</p>
</div>

Component’ları tekrar kullanmak istediğimiz durumlarda tek başlarına kullanamayız. Bir root eleman içinde kullanmak zorundayız. <comment> component’ı return içinde birden fazla kullanılacaksa:

<React.Fragment></React.Fragment> ya da <></> tagleri arasına eklenir.

props kullanarak bir component’a veri göndermek istediğimizde,

function Comment(props){
return (
       <div>
      <p>{props.text}</p>
      <p>{props.date}</p>
      </div>
);
}

function App(){
return (
    <main>
     <Comment text="some text" date="10-10-2025" />
     <Comment text="some text 2" date="10-10-2026" />
    </main>

);

Bir web sayfasının görüntülenmesi ile ilgili kısa bir açıklama ve rendering kavramı:

• Browser serverdan html, css ve javascript kodlarını alır ve çözümler. Bu şekilde DOM(Document Object Model) ağacını oluşturur. DOM bir web sayfasının ana yapısıdır.
• Browser CSS stillerini DOM node’larına uygulayarak her bir elemanın ekranda nasıl görüneceğini belirler.

Bu şekilde client-side çözümleme ve çalıştırma ile kullanıcı arayüzünün görsel hale getirilmesi olayına rendering denir.

Reactta rendering, bir react component’ının çıktısının oluşturulması işlemine denir. Bir react component’ının state ya da propları değiştiğinde react bu değişiklikleri ekrana yansıtabilmek için componentı re-render eder. Bu render işlemini daha verimli bir hale getirmek için react bir sanal DOM kullanır. Böylece yeni state ya da propları uygulamak için gerekli minimum sayıda DOM node’u güncellenebilir.

Component uygulama içinde tekrar kullanılabilen UI elemanıdır.

React component isimleri büyük harfle başlamalıdır.

Birden fazla component aynı dosyada tutulabilir. Birbirleriyle ilişkili olan componentları bu şekilde tutmak kullanışlıdır.

import { Button } from ‘./Button.js’; -> named import

import Button from ‘./Button.js’; -> default import

Export ve import ederken karışıklığa yol açmamak için her durumda default ya da her durumda named import/export kullanılmalı.