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]
 | |
| 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.
React Native 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
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
JSX 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
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
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
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
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
Kaynakça 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.