React
Kullacı arayüzleri oluşturmak için kullanılan JavaScript kütüphanesi Vikipedi'den, özgür ansiklopediden
Kullacı arayüzleri oluşturmak için kullanılan JavaScript kütüphanesi Vikipedi'den, özgür ansiklopediden
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]
 | |
| 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) |
| 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 | |
React'i kullananlar arasında Khan Academy,[3] Netflix,[4] Yahoo,[5] Facebook, Instagram, Sony[6] ve Atlassian[7] örnek gösterilebilir.
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]
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]
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>
);
}
}
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'ler, geriye JSX döndüren JavaScript fonksiyonlarıyla tanımlanır:
const Greeter = () => <div>Merhaba Dünya</div>;
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} />
);
}
}
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>
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
