Kendi platformunda da bahsetti üzere react bir javascript kütüphanesidir. User interfaces(Kullanıcı Arayüzleri) oluşturmak için facebook yazılım ekibi tarafından geliştirilmiş açık kaynak kodlu bir javascript kütüphanesidir.
React Nedir?
Facebook yazılım ekibi milyonlarca kullanıcının http isteklerinin karşılanmasını ve yeni güncellemeleri anında kullanıcıya göstermek için birçok yazılım dili ile geliştirmeler yapmış. Php, Phyton vb. Son olarak kendi yazılım dilini geliştirme kararı almışlar. Adından da anlaşılacağı üzere React yani Tepki demişler.
Burada milyonlarca kullanıcıya en hızlı cevabı server tarafını yormadan dom(Html) tarafını kontrol etmek ve canlı düzenlemek bakın burası önemli canlı düzenlemek bu şu anlama geliyor sitede aktif milyonlarca kişi varken html'de bir düzenleme oluyor ve bu da canlı oluyor siz sayfayı yenilemeden facebook akışı, arkadaş listeniz, gelen bildirimler, mesajlar anlık olarak değişiyor. Değişen taraf sadece gelen veriler değil facebook tasarım değişikliğine gittiğinde bile siz sitedeyken canlı anlık sayfayı yenilenmeden sadece belirlenen html(dom'u) alanı değişiyor.
Reactjs'nin bu kadar popüler olmasını sağlayan avantajlari nelerdir?
Canlı değişimleri, düzenlemeleri realtime olarak yapabilmek için facebook yazılım ekibi reactjs javascript freamworkünü geliştirdikten sonra yayınlıyor. Popüler olmasını ve bu kadar hızlı büyümesini sağlayan şey ise canlı veri akışı ile birlikte sayfa yenilenmeden canlı html düzenlemesi bu çok büyük bir detay küçük firma sitelerinde html'de bir değişiklik yaptığınızda ftpye dosyayı yeniden yükler ve tüm html sayfayı refresh ederek yeniden çalıştırırsınız.
Fakat milyonlarca kullanıcı sitenizde online durumdayken bunu yapmak herkesin değişikliği görebilmesi için sayfayı yenilemesi gerekiyor. Buda serverda milyonlarca kullanıcının aynı anda yeniden bağlanmasına ve serverı yormasına neden olacağı için react javascipt freamwork'ünün en büyük avantajı html(dom) tarafında canlı düzenleme yapabilmesi ve sadece belirlenen alanın değişmesini sağlamasıdır.
Html ve Dom Nedir?
Tarayıcılar html sayfası olarak siteleri ve sayfalarını gelen kullanıcıya yorumlar. Yani siz url adresine bir siteadi.com diye yazdığınızda gördüğünüz html işaretleme dilinin tarayıcıda yorumlanması sonucunda oluşan bir yapıdır. Html yapısının yüklenme render edilme aşamasında her element (head,body,foto,video,yazı,div vb) ayrı ayrı bir nesne haline getiriliyor buna DOM deniyor. Nesnelerin bir bütün haline Html İşaretleme dili deniyor.
Dom sayesinde ayrıştırılan ve nesne olan herşeyi kontrol edebiliyor ve düzenleyebiliyoruz. Html içinde bulunan kod yapısında bölümler(head,body) ve bunları taglarle sınıflandırıp özelliklerini belirleyebiliyoruz. Html içindeki her parca bir nesne yani Document Object Model(Doküman Nesne Modeli)'in kısaltması olan DOM dokümanları oluyor.
Reacjs çalışma mantığı
Reacjs html içerisinde ki nesneleri yani dom dökümanlarını kontol etmeyi ve canlı canlı düzenlemeyi başarıyor. Çalışma mantığını yani bu başarıyı nasıl elde ediyor derseniz işte burada muazzam bir teknik devreye giriyor. Örnekleyerek anlatmak gerekirse bir insanın kalbi durduğunda veya çalışmaz hale geldiğinde aynısından bir tane yerine takmanız gerekiyor ki ölen, yok olan kalp yerine çalışan bir kalp takılarak insanı yaşatmaya devam etsin.
Dikkat ettiniz mi örneği kalp olarak verdim arabada bozulan motor veya ışık yada patlayan lastik demedim çünkü arabayı duruk halde çalışmıyorken tamir ediliyor. Araba çalışırken motorunu değiştirebilirmisiniz? Reactjs çalışan insan üzerinde ki kalbin canlı olarak değiştirilmesini yapıyor. Konuyu artık daha net anladığınızı varsayıyorum ve bunu nasıl bir teknikle yaptığına geçiyorum.
Kalp Örneğimizden devam edelim bozulan kalp yerine yeni bir kalp takılması için insanı uyutuyorlar ama hücreler beyin hala canlı ve aktif. Html tarafında canlıyken react bir değişiklik yapmayı javascript dili ile başarıyor ve bunu kütüphane haline getirip yayınlıyor.
Reacjs Nasıl Çalışıyor?
Reacjts Real Dom(Gerçek) ve Virtual Dom(Sanal) ile aralarındaki farkı yakalayarak çalışır.
Reactjs html içinde bulunan dom(Real) yapısını klonluyor yani kopyalıyor. Bunu sanal bir dom(Virtual) dökümenti olarak tek yapıda 2 adet dom dökümenti olarak yapıyor. Sanal dom(Virtual) ve gerçek dom(Real) dökümenti arasında ki değişmeleri yakalıyor. Kullanıcıya tek dom olarak sunum yapıyor fakat arkada server tarafında sanal bir DOM daha çalışıyor. Burası biraz karışık gelebilir fakat online kullanıcıya bir dom(Real) html gösteriyor. Sanal dom(Virtual)daki değişiklik server tarafında yapılıyor ve kullanıcıya canlı sunuluyor.
Sanal Dom(Virtual) ve Gerçek Dom(Real) arasında ki değişiklik yapılırken kalp örneğindeki gibi tüm html sayfası yeniden yüklenmiyor. Sadece kalp yani istenen yer düzenlenen bölüm değişiyor.
Html Dom(Real) yapısında sadece belirli alanı değiştirmeyi yapmak içinde komponent olarak html(domu)'u bölümlere ayırıyor. Facebook sayfa akışı, bildirimler, hikayeler vb hepsi ayrı ayrı komponent ve ReactJs sanal dom(Virtual) ile gerçek dom arasında ki canlı değişimleri komponentler ile yapıyor. Komple tüm domu html'i değiştirmiyor. Kalp bozuksa veya değişmesi gerekiyorsa oraya ilk olarak klonunu compile ediyor. Yani komponent değişikliğini anlık olarak sanal dom üzerinden gerçekleştiriyor.
Reactjs Komponentler sayesinde sanal dom üzerinden gerçek html(dom)'unda sadece ilgili yerin değişmesini yapıyor. Artık Reactjs kurulumuna, yapısına, proje yapabilecek ve çalıştırabilecek şekilde uygulamalı olarak anlatmaya başlıyorum. Hazırsanız başlayalım.
Hazır yazılmış Nodejs npm paketlerini projelerinizde kullanabilirsiniz, Npm paketlerinin kullanımını detaylı bir şekilde anllattığım konu mevcut incelemesini yapmanızı tavsiye ederim.
Ecmascript6 Modül Sistemi
Ecmascript6 ile hayatımıza giren bir çok yenilik oldu kod yazma, kod görünümü, yazım kuralları gibi ES6'yı tüm detayları ile anlattığım konuyu incelemenizi tavsiye ederim. Gelelim es6 modül sistemine:
//package.json dosyamıza type modül olarak belirtiyoruz. "type":"module" //Paketi projemize dahil etmeyi şöyle yapıyorduk var colors = require('colors'); //Ecmascript6 modül ile require yerine import yazarak kullanıyoruz. import colors from "colors";
Ecmascript6 hatalar alıyorsanız büyük ihtimalle nodejs 13. versiyondan küçük kullanıyorsunuz. ES6 yüklemeniz gerekiyor.
//Es6 yükleme Komutu npm install esm //node index.js dosyamızı çalıştıralım node -r esm index.js //package.json dosyası içine start olarak eklerseniz: "start": "node -r esm index.js" //node index.js dosyamızı çalıştırabiliriz npm start
Kendi modülünüzü yazarak projeyeye import dahil etme ise:
//modulum.js adında bir dosya oluşturup içine kodlarımızı yazalım function metin(sname){ return "İsmail " + sname; } export default metin; //modülümüzü index.js içinde çağırmak için import Modulum from './modulum.js'; console.log(Modulum("Gültekin")); //Ekrana çıktı olarak: ismail Gültekin
Javascipt Callback Kullanım Yöntemleri
Javascipt'te bir veri alışverişi sırasında bağlandığınız yerden gelen sonuc aşamasında ki olayların kontrolü diyebiliriz. Bağlandığınız yer fonksiyon, fetch, rest-api yada sonuç istediğiniz veritabanı bile olabilir. Çok kısaca Callback tanımı istek yaptıktan sonra ki gelen veriyi ve o aşamayı kontol etmeyi baz alır.
Peki Kontol dediğimiz mekanizma nedir ne işimize yarayacak javascipt asenkron olduğu için gelen tüm istekleri işler sıraya koymadan, fakat bize gelen sonuca göre başka bir sorgu daha yapmamız gerekiyorsa örneğin userları listelerken onların postları da lazım arka arkaya ilk olarak userlar listelenmesi gerekiyor bunu örnekle yapalım.
callback.js adında bir dosya oluşturarak içine kodlarımızı sonrada node callback ile dosyamızı terminalden çalıştıralım
//nodejs için fetch npm paketini projemize kuralım npm install node-fetch; //fetch paketini projemize dahil edelim const fetch = require("node-fetch"); //1.ci bağlantı ile userları veri olarak çekelim fetch("https://jsonplaceholder.typicode.com/users") .then((data) => data.json()) .then((users) => { console.log("Userlar Yüklendi", users); //2.ci bağlantı ile gelen veriden sonra yeni veri cektik fetch("https://jsonplaceholder.typicode.com/posts/1") .then((dposts) => dposts.json()) .then((posts) => console.log("Post Yüklendi:", posts)) }) .catch((error)=>{//Hata alırsak cath ile yakalıyoruz console.log(error); }) //Terminalden callback.js dosyamızı çalıştırıp sonucları görelim node callback.js
Javascipt Callback önemli bir konu sorgu, istek yaptığımızda gelen sonuca göre 2 adımda ne yapacağımızı ve hataları kontrol ettiğimiz bir yapıdır. Önemle üstünde durmanızı tavsiye ederim.
React Kurulumu Nasıl Yapılır?
React Kurulumuna geçmeden önce npx kurulu değilse kuralım. Npx Kurulum komutu:
npm i -g npx yada yarn global add npx
Npx kurulumunu yaptıktan sonra react projemizi kurarak çalıştıralım. Terminalden komutlarımız sırasıyla
npx create-react-app projeadi cd projeadi npm start
npm cache clear --force npm uninstall -g create-react-app yada yarn global remove create-react-app
Global ve cache hatalarını giderdikten sonra tekrar kuruluma gecelim. Sırasıyla komutları uygulayalım.
npx create-react-app projeadi
Eğer permission denied tarzı hata alırsanız. npx create komutunun başına sudo koyarak deneyin.
cd projeadi npm start
React projemizi kurarak çalıştırdığımızda bizi tarayıcıda 3000 portu boş ise yada başka boş olan port ile karşılayacak Örnek: http://localhost:3000/
You can now view projeadi in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.36:3000
Yukarda terminalden sizede verdiği gibi local ve Network üzerinden linklere tıklarayarak kendinizde tarayıcıda acabilirsiniz.
Evet artık React projemiz ayağa kalkarak tarayıcıda çalıştı.
Component Nedir?
React Projemizi çalıştırdıktan sonra temel yapı taşlarını inceleyerek öğrenmeye devam edelim. İlk olarak react freamwork'nün en önemli temel yapı taşı olan component nedir ve çalışma mantığını inceleyelim.
Yuraıda react çalışma mantığını, html, dom yapılarını bahsetmiştim. Kısaca yorumlamak gerekirse react dom yapılarını kullanarak html web sayfasındaki her nesneyi parcalayarak klonluyor. Html üzerindeki her obje dom parçalarına ayrıldığı için bunları anında kontrol edebilme mekanizmasına sahip oluyor. Bu sayede kontrol ettiği dom objelerini bize eklenti olarak sunuyor ve aynı zamanda bizede eklenti yani component kullanım ve oluşturma hakkı veriyor.
Componentler bir bütünün parcalara ayrılmış hali konumunda iken bize kontrol mekanizmasını kendi stantdartlarına uygun olarak çalışmamıza olanak sağlıyor.
Component'nin çok kısa tanımı ve kullanımı html sayfasında ki her nesneyi parçalayarak bileşenler olarak tanımlıyor. Bileşen yada eklenti olarak kullanmamıza imkan sağladığı için html domlarında nerede canlı değişiklik yapılıyorsa gidiyor sadece ve sadece orayı değiştiriyor. Bu sayede tüm html sayfa yenilenmiyor belirlediğimiz alan sadece güncelleniyor.
React yani Tepki Html web sayfasını klonlayarak dom yapısında atom parçalarına ayrılmış ve her parcanın canlı hareketlerini kontol ederek çalışmamıza imkan sağlıyor. Bu muazzam yapıyı bizimde kullanmamız için Component'ler üzerinde çalışmamızı istiyor.
Component Kullanımına geçmeden react projemizin klasörüne ve kök dizin dosya yapısına göz atalım.
React klasör yapısını inceleyelim
React projemizi kurduktan sonra projemizin içinde hazır klasör yapısı ile karşılaşacağız. Bu yapı bize muazzam canlı html sayfası düzenleme işlemleri yapmamıza olanak sağlayacak. React klasör yapısı:
- node_modules
- public
- src
- package.json

Telif Hakkı:
Problemi Şikayet Et!HAKKIMDA
Yazılım Uzmanlığı konusunda 11 yılı aşkın süredir Türkiye'de Cumhurbaşkanlığı olmak üzere Kurumlara ve Tüzel kişilere; Yön verme, Yücelik Sağlama ve Büyüme gereksinimlerinden doğan Yazılım ihtiyaclarına çözümler sunmaktayım.
<html>
<body>
<h5>
Yazılım
&
Teknoloji
</h5>
<p>
Dünyasına
Hoş Geldiniz.
</p>
</body>
</html>
Son Eklenen Konular
Nginx Nedir, Nasıl Çalışır, Kurulumu, Hata ve Çözümü
03 Haziran, 2022
Web Site | Web Tasarım | Web Yazılım
27 Nisan, 2022
Html URL ASCII Karakter kodları
04 Mart, 2022
Jquery Alert, Sweet alert, Dialog Kullanımı
03 Mart, 2022
Doğal Seo Çalışması Nasıl Yapılır?
19 Şubat, 2022
En Çok Okunanlar
Google api key nasıl alınır?
26 Eylül, 2013
Youtube Video'sunu Gif Yapma Gif'e Çevirme
17 Ağustos, 2013
linux çeşitleri nelerdir?
13 Ağustos, 2013
Php ile bot nasıl yapılır?
22 Eylül, 2013
Ajax ile sayfa yenilenmeden resim yükleme nasıl yapılır?
04 Ekim, 2013
İlgili İçerikler
-
08 Aralık, 2021 890
Vuejs 3 Routing İşlemleri Ve Router Kullanımı
-
06 Aralık, 2021 1776
Vuejs 3 Kullanımı. Nasıl Kurulur, Vue 3 Gelen Yenilikleriyle Nasıl Proje Geliştirilir?
-
15 Ağustos, 2021 5013
Nuxt.js Nedir? Nuxt.js Nasıl Kurulur? Nuxt.js ile Vue.js Projesi Nasıl Geliştirilir?
-
24 Temmuz, 2021 1477
Nodejs ReactJs Array functions Kullanım Yöntemleri
-
01 Temmuz, 2021 4070
Nextjs kurulumu ve Nextjs ile React projesi nasıl yapılır?
-
19 Haziran, 2021 1733
javascript KDV Hesaplama İşlemleri