react ne demek?

React (ReactJS veya React.js olarak da bilinir) kullanıcı arayüzü oluşturmaya yarayan açık kaynak kodlu bir javascript kütüphanesidir. Facebook önderliğinde bir geliştirici grubu tarafından geliştirilmekte olan React, Model-View-Controller prensibine uygun olarak oluşturulmuştur.¹ React ile single-page olarak adlandırılan sayfalar geliştirilebileceği gibi React-Native ile mobil uygulamalar da geliştirilebilir.²

React'i kullananlar arasında Khan Academy,³ Netflix,⁴ Yahoo,⁵ Facebook, Instagram.com, Sony⁶ ve Atlassian⁷ örnek gösterilebilir.

React Native

2015 yılında Facebook, iOS ve Android işletim sistemlerine yönelik, React altyapısı kullanılarak uygulama geliştirme platformu React Native'i duyurdu.⁸

Tarihi

React, Facebook'ta bir yazılım mühendisi olan Jordan Walke tarafından geliştirildi ve "FaxJS" adlı React'in erken bir prototipini yayınladı. PHP için bir HTML bileşen kütüphanesi olan XHP'den etkilendi. İlk olarak 2011 yılında Facebook'un Haber Kaynağında ve daha sonra 2012 yılında Instagram'da kullanıldı. Mayıs 2013'te ABD'de düzenlenen JSConf'da açık kaynaklı olarak tanıtıldı.

26 Eylül 2017'de React 16.0 sürümü yayımlandı.⁹

16 Şubat 2019'da React 16.8 yayımlandı. Bu sürümde, React Hooks tanıtıldı.¹⁰

10 Ağustos 2020'de React ekibi, React geliştiriciye yönelik API'de büyük değişiklikler yapılmayan ilk büyük sürüm olarak dikkat çeken React v17.0 için ilk sürüm adayını açıkladı.¹¹

29 Mart 2022'de, yeni bir eşzamanlı işleyici, otomatik toplu işleme ve Suspense ile sunucu tarafı oluşturma desteği sunan React 18 piyasaya sürüldü.¹²

Temel özellikleri

JSX

JSX veya JavaScript Sözdizimi Uzantısı, JavaScript dili sözdiziminin bir uzantısıdır. HTML'e benzer bir şekilde, birçok geliştiricinin aşina olduğu sözdizimini kullanarak component oluşturmayı sağlar. React component'leri genellikler JSX ile yazılır, ancak JavaScript dilinin kendisi kullanılarak da yazılabilir.

JSX kodu örneği:

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

Component

React kodu, component adı verilen varlıklardan oluşur. Bu component'ler birçok kez kullanılabilir ve adlandırma olarak Pascal Case tercih edilir. Component'ler "src" klasöründe tutulur. Bu component'ler ReactDOM kütüphanesi aracılığıyla bir HTML elementine render edilir. Component'ler arasındaki değerler "props" aracılığıyla geçilir.

import React from "react";
import Tool from "./Tool";
const Example = () => {
  return (
    <>
      <div className="app">
        <Tool name="Gulshan" />
      </div>
    </>
  );
};
  
export default Example;

Functional Component

Functional component'ler, geriye JSX döndüren JavaScript fonksiyonlarıyla tanımlanır:

const Greeter = () => <div>Merhaba Dünya</div>;

Class-based Component

Class tabanlı component'ler, ES6 sınıfları aracılığıyla oluşturulur:

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

Örnek

Aşağıdaki kodlar, JSX ve JavaScript ile yazılmış web için React kullanımının temel bir örneğidir.

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

const Greeting = () => {
    return (
        <div className="hello-world">
            <h1>Merhaba dünya!</h1>
        </div>
    );
};

const App = () => {
    return <Greeting />;
};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

ReactJS component'leri index.html dosyasına render edilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>React App</title>
</head>
<body>
  <noscript>Bu uygulamayı çalıştırmak için JavaScript'i etkinleştirmelisin.</noscript>
  <div id="root"></div>
</body>
</html>

Üstteki örnekte Greeting fonksiyonu, ekrana "Merhaba Dünya" yazıran bir ReacJS component'idir.

Web sayfasının kaynak kodlarına bakıldığında, sonuç aşağıdaki gibi olacaktır:

<div class="hello-world">
  <h1>Merhaba Dünya!</h1>
</div>

Ayrıca bakınız

Kaynakça

Orijinal kaynak: react. Creative Commons Atıf-BenzerPaylaşım Lisansı ile paylaşılmıştır.

Kategoriler

ajax

facebook tarafından geliştirilen yazılımlar

javascript kütüphaneleri

mıt lisansı kullanan yazılımlar

reacted to your message

read dead redemption 2 sistem gereksinimleri

read ingilizce anlamı

reading machine