Azərbaycanca
Беларускі
Dansk
Deutsch
Española
Français
Indonesia
Italiana
日本語
Қазақ
Lietuvos
Nederlands
Português
Русский
සිංහල
แบบไทย
Türkçe
Українська
中國人
United State
Afrikaans
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.
 | |
| 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,Netflix,Yahoo,Facebook, Instagram, Sony ve ö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
- ^ "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld. 15 Aralık 2015 tarihinde kaynağından . Erişim tarihi: 13 Mayıs 2015.
- ^ "React (JavaScript_library)". 16 Mart 2015 tarihinde kaynağından arşivlendi.
- ^ . Joel Burget. 6 Aralık 2015 tarihinde kaynağından arşivlendi. Erişim tarihi: 13 Mayıs 2015.
- ^ . 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 . 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 . Erişim tarihi: 13 Mayıs 2015.
- ^ "React Native: Bringing modern web techniques to mobile". 1 Ocak 2016 tarihinde kaynağından . Erişim tarihi: 13 Ocak 2016.
- ^ . reactjs.org (İngilizce). 3 Ekim 2017 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.
- ^ . reactjs.org (İngilizce). 25 Ekim 2018 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.
- ^ . reactjs.org (İngilizce). 10 Ağustos 2020 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.
- ^ . reactjs.org (İngilizce). 29 Mart 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 29 Ekim 2022.
wikipedia, wiki, viki, vikipedia, oku, kitap, kütüphane, kütübhane, ara, ara bul, bul, herşey, ne arasanız burada,hikayeler, makale, kitaplar, öğren, wiki, bilgi, tarih, yukle, izle, telefon için, turk, türk, türkçe, turkce, nasıl yapılır, ne demek, nasıl, yapmak, yapılır, indir, ücretsiz, ücretsiz indir, bedava, bedava indir, mp3, video, mp4, 3gp, jpg, jpeg, gif, png, resim, müzik, şarkı, film, film, oyun, oyunlar, mobil, cep telefonu, telefon, android, ios, apple, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, pc, web, computer, bilgisayar
React ReactJS veya React js olarak da bilinir kullanici arayuzu olusturmaya yarayan acik kaynak kodlu bir javascript kutuphanesidir Facebook onderliginde bir gelistirici grubu tarafindan gelistirilmekte olan React Model View Controller prensibine uygun olarak olusturulmustur React ile single page olarak adlandirilan sayfalar gelistirilebilecegi gibi React Native ile mobil uygulamalar da gelistirilebilir ReactGelistirici ler Facebook ve gelistirici grubuIlk yayinlanmaMayis 2013 2013 05 Guncel surum17 0 2 22 Mart 2021 3 yil once 2021 03 22 Gelistirme durumuAktifProgramlama diliJavaScriptPlatformCross platformBoyut128 KiB production 559 KiB developmentTurJavaScript kutuphanesiResmi sitesireactjs comKod deposugithub com facebook react React i kullananlar arasinda Khan Academy Netflix Yahoo Facebook Instagram Sony ve ornek gosterilebilir React Native2015 yilinda Facebook iOS ve Android isletim sistemlerine yonelik React altyapisi kullanilarak uygulama gelistirme platformu React Native i duyurdu TarihiReact Facebook ta bir yazilim muhendisi olan Jordan Walke tarafindan gelistirildi ve FaxJS adli React in erken bir prototipini yayinladi PHP icin bir HTML bilesen kutuphanesi olan XHP den etkilendi Ilk olarak 2011 yilinda Facebook un Haber Kaynaginda ve daha sonra 2012 yilinda Instagram da kullanildi Mayis 2013 te ABD de duzenlenen JSConf da acik kaynakli olarak tanitildi 26 Eylul 2017 de React 16 0 surumu yayimlandi 16 Subat 2019 da React 16 8 yayimlandi Bu surumde React Hooks tanitildi 10 Agustos 2020 de React ekibi React gelistiriciye yonelik API de buyuk degisiklikler yapilmayan ilk buyuk surum olarak dikkat ceken React v17 0 icin ilk surum adayini acikladi 29 Mart 2022 de yeni bir eszamanli isleyici otomatik toplu isleme ve Suspense ile sunucu tarafi olusturma destegi sunan React 18 piyasaya suruldu Temel ozellikleriJSX JSX veya JavaScript Sozdizimi Uzantisi JavaScript dili sozdiziminin bir uzantisidir HTML e benzer bir sekilde bircok gelistiricinin asina oldugu sozdizimini kullanarak component olusturmayi saglar React component leri genellikler JSX ile yazilir ancak JavaScript dilinin kendisi kullanilarak da yazilabilir JSX kodu ornegi class App extends React Component render return lt div gt lt p gt Header lt p gt lt p gt Content lt p gt lt p gt Footer lt p gt lt div gt Component React kodu component adi verilen varliklardan olusur Bu component ler bircok kez kullanilabilir ve adlandirma olarak Pascal Case tercih edilir Component ler src klasorunde tutulur Bu component ler ReactDOM kutuphanesi araciligiyla bir HTML elementine render edilir Component ler arasindaki degerler props araciligiyla gecilir import React from react import Tool from Tool const Example gt return lt gt lt div className app gt lt Tool name Gulshan gt lt div gt lt gt export default Example Functional Component Functional component ler geriye JSX donduren JavaScript fonksiyonlariyla tanimlanir const Greeter gt lt div gt Merhaba Dunya lt div gt Class based Component Class tabanli component ler ES6 siniflari araciligiyla olusturulur class ParentComponent extends React Component state color green render return lt ChildComponent color this state color gt OrnekAsagidaki kodlar JSX ve JavaScript ile yazilmis web icin React kullaniminin temel bir ornegidir import React from react import ReactDOM from react dom client const Greeting gt return lt div className hello world gt lt h1 gt Merhaba dunya lt h1 gt lt div gt const App gt return lt Greeting gt const root ReactDOM createRoot document getElementById root root render lt React StrictMode gt lt App gt lt React StrictMode gt ReactJS component leri index html dosyasina render edilir lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset utf 8 gt lt title gt React App lt title gt lt head gt lt body gt lt noscript gt Bu uygulamayi calistirmak icin JavaScript i etkinlestirmelisin lt noscript gt lt div id root gt lt div gt lt body gt lt html gt Ustteki ornekte Greeting fonksiyonu ekrana Merhaba Dunya yaziran bir ReacJS component idir Web sayfasinin kaynak kodlarina bakildiginda sonuc asagidaki gibi olacaktir lt div class hello world gt lt h1 gt Merhaba Dunya lt h1 gt lt div gt Ayrica bakinizAngularJS Backbone js Ember js Meteor Vue js Javascript kutuphaneleri listesiKaynakca React Making faster smoother UIs for data driven Web apps InfoWorld 15 Aralik 2015 tarihinde kaynagindan Erisim tarihi 13 Mayis 2015 React JavaScript library 16 Mart 2015 tarihinde kaynagindan arsivlendi Joel Burget 6 Aralik 2015 tarihinde kaynagindan arsivlendi Erisim tarihi 13 Mayis 2015 React js 17 Kasim 2015 tarihinde kaynagindan arsivlendi Erisim tarihi 13 Mayis 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 kaynagindan Erisim tarihi 13 Mayis 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 kaynagindan Erisim tarihi 13 Mayis 2015 React Native Bringing modern web techniques to mobile 1 Ocak 2016 tarihinde kaynagindan Erisim tarihi 13 Ocak 2016 reactjs org Ingilizce 3 Ekim 2017 tarihinde kaynagindan arsivlendi Erisim tarihi 29 Ekim 2022 reactjs org Ingilizce 25 Ekim 2018 tarihinde kaynagindan arsivlendi Erisim tarihi 29 Ekim 2022 reactjs org Ingilizce 10 Agustos 2020 tarihinde kaynagindan arsivlendi Erisim tarihi 29 Ekim 2022 reactjs org Ingilizce 29 Mart 2022 tarihinde kaynagindan arsivlendi Erisim tarihi 29 Ekim 2022