React

React
Geliştirici(ler)	Facebook ve geliştirici grubu
İlk yayınlanma	Mayıs 2013
Güncel sürüm	17.0.2 / 22 Mart 2021 (3 yıl önce)
Geliştirme durumu	Aktif
Programlama dili	JavaScript
Platform	Cross-platform
Boyut	128 KiB production; 559 KiB development
Tür	JavaScript kütüphanesi
Resmî sitesi	reactjs.com
Kod deposu	github.com/facebook/react;

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.^[1] React ile single-page olarak adlandırılan sayfalar geliştirilebileceği gibi React-Native ile mobil uygulamalar da geliştirilebilir.^[2]

React'i kullananlar arasında Khan Academy,^[3] Netflix,^[4] Yahoo,^[5] Facebook, Instagram, Sony^[6] ve Atlassian^[7] örnek gösterilebilir.

React Native[değiştir | kaynağı değiştir]

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.^[8]

Tarihi[değiştir | kaynağı değiştir]

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ı.^[9]

16 Şubat 2019'da React 16.8 yayımlandı. Bu sürümde, React Hooks tanıtıldı.^[10]

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ı.^[11]

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ü.^[12]

Temel özellikleri[değiştir | kaynağı değiştir]

JSX[değiştir | kaynağı değiştir]

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[değiştir | kaynağı değiştir]

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[değiştir | kaynağı değiştir]

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

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

Class-based Component[değiştir | kaynağı değiştir]

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[değiştir | kaynağı değiştir]

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[değiştir | kaynağı değiştir]

Kaynakça[değiştir | kaynağı değiştir]

^ "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld. 15 Aralık 2015 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.
^ "React (JavaScript_library)". 16 Mart 2015 tarihinde kaynağından arşivlendi.
^ "Backbone to React". Joel Burget. 6 Aralık 2015 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.
^ "React.js conf - schedule". React.js. 17 Kasım 2015 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.
^ "Yahoo Mail moving to React". Slideshare.
^ "Mikael Brassman on Twitter: "Sony's Lifelog newly released web interface is using #refluxjs and #reactjs on the client-side"". Twitter. 3 Mart 2016 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.
^ "Wesley Walser on Twitter: "React.js is now driving @atlassian OnDemand billing pages. Small project to start adoption, positive experiences thus far."". Twitter. 4 Mart 2016 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.
^ "React Native: Bringing modern web techniques to mobile". 1 Ocak 2016 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Ocak 2016.
^ "React v16.0 – React Blog". reactjs.org (İngilizce). 3 Ekim 2017 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.
^ "Introducing Hooks – React". reactjs.org (İngilizce). 25 Ekim 2018 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.
^ "React v17.0 Release Candidate: No New Features – React Blog". reactjs.org (İngilizce). 10 Ağustos 2020 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.
^ "React v18.0 – React Blog". reactjs.org (İngilizce). 29 Mart 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.

[1] "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld. 15 Aralık 2015 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.

[2] "React (JavaScript_library)". 16 Mart 2015 tarihinde kaynağından arşivlendi.

[3] "Backbone to React". Joel Burget. 6 Aralık 2015 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.

[4] "React.js conf - schedule". React.js. 17 Kasım 2015 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.

[5] "Yahoo Mail moving to React". Slideshare.

[6] "Mikael Brassman on Twitter: "Sony's Lifelog newly released web interface is using #refluxjs and #reactjs on the client-side"". Twitter. 3 Mart 2016 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.

[7] "Wesley Walser on Twitter: "React.js is now driving @atlassian OnDemand billing pages. Small project to start adoption, positive experiences thus far."". Twitter. 4 Mart 2016 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.

[8] "React Native: Bringing modern web techniques to mobile". 1 Ocak 2016 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Ocak 2016.

[9] "React v16.0 – React Blog". reactjs.org (İngilizce). 3 Ekim 2017 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.

[10] "Introducing Hooks – React". reactjs.org (İngilizce). 25 Ekim 2018 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.

[11] "React v17.0 Release Candidate: No New Features – React Blog". reactjs.org (İngilizce). 10 Ağustos 2020 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.

[12] "React v18.0 – React Blog". reactjs.org (İngilizce). 29 Mart 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

g t d Web uygulama çatıları
ASP.NET	ASP.NET Dynamic Data ASP.NET MVC ASP.NET Web Forms BFC DotNetNuke MonoRail OpenRasta Umbraco
ColdFusion	CFWheels ColdBox Platform ColdSpring Fusebox Mach-II Model-Glue
Common Lisp	CL-HTTP UnCommon Web Weblocks
C++	CppCMS Wt
Haskell	Happstack Yesod Snap
Java	AppFuse Flexive Grails GWT ICEfaces ItsNat JavaServer Faces Jspx Juzu Makumba OpenXava Play Reasonable Server Faces Remote Application Platform RIFE Seam Spring Stripes Struts Tapestry Vaadin WebWork Wicket WaveMaker ZK
JavaScript	Ample SDK AngularJS Backbone.js Chaplin.js Closure Dojo Toolkit Ember.js Ext JS jQuery Meteor Prototype ReactJS Rico script.aculo.us Sencha Touch SproutCore Wakanda
Perl	Catalyst Dancer Mason Maypole Mojolicious WebGUI
PHP	AppFlower CakePHP CodeIgniter Drupal eZ Publish Fat-Free FuelPHP Horde Joomla! Kohana Laravel Lithium Midgard MODX Nette Framework Phalcon PRADO Qcodo Seagull SilverStripe Symfony TYPO3 WordPress Xaraya XOOPS Yii Zend Framework
Python	BlueBream CherryPy Django Flask Grok Nevow Pyjamas Pylons Pyramid Quixote TACTIC Tornado TurboGears web2py Webware Zope 2
Ruby	Camping Merb Padrino Ruby on Rails Sinatra
Scala	Lift Play Scalatra
Smalltalk	AIDA/Web Seaside
Diğer	Application Express (PL/SQL) Grails (Groovy) Kepler (Lua) OpenACS (Tcl) SproutCore (JavaScript/Ruby) SymbolicWeb (Clojure) Yaws (Erlang)

React nedir?, React anlamı nedir?, React ne demektir?