Photo by Fausto García-Menéndez on Unsplash

REACT UI MECHANICS

React Geliştirme Ortamının Oluşturulması — (Detaylı Anlatım)

Published in

Frontend Development With JS

10 min readAug 16, 2022

React Geliştirme ortamının oluşturulması konusunda detaylı bir blog yazmayı düşündüm. Bu konunun benzeri aslında detaylara girmeden React Geliştirme Ortamı blog yazısında anlattım. İlk yazı biraz pratik anlamda React ortamını oluşturmaya odaklıydı. Bu yazıda ise biraz daha arkaplanda olanları incelemeye çalışacağım.

Öncelikle tarayıcıların nasıl çalıştığını Chrome üzerinden Chrome Nasıl Çalışır blog yazıları ile anlatmıştım. Sonuçta tarayıcılar sadece HTML, CSS ve JavaScript kod ve scriptlerini anlayıp işletebilen araçlar.

Bir web uygulaması geliştirmek istediğimizde yapmamız gerekende HTML, CSS ve JavaScript yazdığımız kodları Web Sunucusuna atarak buradan tarayıcılara internet yolu ile inmesini sağlayıp, çalışması sağlatılır.

Web Sunucusu

Local ortamda, (yani kendi bilgisayarınızda) bu geliştirmeleri yaparken size gereken bir Web Server, bu sunucu sizin local ortamınızdaki kodları alıp localhost bir port üzerinden bunları size sunsun istiyorsunuz.

Local ortamınızda çalışacak birden fazla web sunucusu bulunuyor. Farklı dillerde (Node, Go, Python, PHP, Java vb..) geliştirilmiş bir çok araç bulabilirsiniz. Örneğin Node → httpd, Java → tomcat vb..

Ama burada Web Sunucundan istediğimiz bir diğer önemli özellik;

React geliştirme ortamında yapılan güncellemelerin hissetmeden arkaplanda yapılması ve otomatik ekrana yansıtılması (HSM → Hot Module Replacement)
Diğeride bu ortamın sizin geliştirme ortamı ile direk entegre olması. Ortamı build edip, bir klasöre kopyalama ihtiyacı duymamam gerekiyor.
Bunu DevServer (webpack) veya Vite DevServer gibi React ve diğer UI Framework hizmet eden geliştirme sunucularından faydalınabilir.

Babel ve SaSS Preprocessor

Bildiğiniz gibi React geliştirirken biz geliştiriciler direk HTML, JavaScript ve CSS ile kod yazmak yerine kullanıcıya daha yakın ve daha güçlü yeteneğe sahip JSX, TypeScript, Flow veya SaSS, vb diller kullanırız. Bu dillerin tarayıcının istediği hale dönüştürülmesi için Transpiler dediğimiz Pre veya Post processing araçlarından faydalanırız.

Not: Bu konuda daha detaylı bilgiye Why Web Dev Preprocessors are So Important? blog yazısından erişebilirsiniz.

Bundling (Paketleme)

Yukarıdaki bahsettiğimiz transpiler yazdığımız TypeScript, JSX, SaSS kodunu → HTML, CSS ve JS dönüştürme işlemlerini gerçekleştirse bile her bir dosyanın ayrı ayrı tutularak tarayıcıya aktarılması performans açısından ciddi sorunlar oluşturacaktır. Özellikle binlerce bileşenin, yüzlerce sayfanın olduğu uygulamalarda bu çok ciddi bir network sorunu ve etkileşim sorunu olarak kullanıcılara yansıyacaktır. Bundan dolayı projelerin belli parçalar halinde birleştirilerek tarayıcıya 1000 farklı dosya değil de akıllıca gruplanmıs 50 parça şeklinde aktarılması sağlanır. Bu işlemler sırasında webpack, vite, Parcell , Rollup gibi araçlardan faydalanılabilir. Bunların paketlediği dosyalar Web Dev Server üzerinden sunularak uygulamanız çalıştırılır.

React Geliştirme Ortamı Aslında Bir Node.js Projesi

Yukarıdaki gereksinimleri anlattıktan sonra React için oluşturduğumuz geliştirme ortamı aslında bir Node.js projesi.

Eskiden JavaScript dosyalarını sadece tarayıcıların içerisinde gömülü V8Engine benzeri motorlar tarafından çalıştırılırdı.

Not: Bu konuda daha detaylı bilgiye Chrome JS Nasıl İşletir blog yazısından erişebilirsiniz.

Peki daha sonra JavaScript içerisinde evrimsel bir gelişim ve kırılma gerçekleşti ve JavaScript tarayıcı içerisinden Ryan Dahl tarafından çıkarılarak bir Web Sunucusu şeklinde sunucularda da kullanılabilir hale getirildi.

Not: Bu konuda daha detaylı bilgiye JavaScript’in Tarihçesi blog yazısından erişebilirsiniz.). Bu arada aklınızı karıştırmasın tek JavaScript Runtime ortamı artık Node.js değil. Deno ve Bun isimli farklı farklı JS çalıştırma ortamlarıda bulunuyor. Fakat React için biz default Node.js kullanıyor olacağız.

Not: Bu tarz yeni runtime neden oluşturuluyor diye merak ederseniz Deno Nedir? Neden Geliştirildi ? blog yazısını okuyabilirsiniz.

Node.js ile birlikte NPM’den de bahsetmemiz gerekiyor. NPM(Node Package Manager) isminden de anlaşıldığı üzere node modülleri ortak bir yerde kaydedilmesi ve kullanılması, güncellenmesi için oluşturulmuş node modül yöneticisidir.

Zamanla node modüllerinin webpack ve babel gibi araçlar sayesinde frontend kütüphaneleri içinde kullanılabilir hale gelmiştir. Javascript hem browser, hem sunucu, hem geliştirici hemde desktop uygulamalarında kullanılabilir modülleri içerir devasa bir yapıya dönüşmüştür.

Not: NPM Nedir ve nasıl çalışır konusunda daha detaylı bilgi edinmek için Modules-2 (npm Nedir?) blog yazısını okuyabilirsiniz. Bunun öncesinde de tarayıcılarda bir modül yönetme şekli vardı elbet ama bu kadar büyük uygulamalar yapmaya düşünmeden paketleme ve paylaşmayı düşünmeden bir kullanım mevcuttu. Bu konuda da JS Module(IIFE →CJS→AMD →ES6) blog yazısını okuyabilirsiniz.

Node.js Projesi Oluşturalım

Lokalinize Node.JS kurulumu yapın. node -v ile node hangi versiyonu ile çalıştığınızı localinizde kontrol edebilirsiniz.

Lokalinizde index.js dosyası oluşturup buradanın içerisine çok basit bir JS fonksiyonu yazalım. Ben basit bir toplama işlemi yazdım.

Node runtime ile ilgili kod parçasını çalıştıralım. node index.js ve javascript dosyasının çalıştığını görebilirsiniz.

Basit anlamda kaynak kodlarınızı çalıştırmak için bu yöntemi kullanabilirsiniz ama bir proje günümüzde bir çok kütüphaneye ve diğer kod modüllerine bağımlılıklar içerir Bunun için bir proje ortamı oluşturmalıyız.

Bunun için npm veya yarn paket yöneticilerini kullanabilirsiniz. Ben npm üzerinden ilerleyeceğim npm -v ile npm versiyonu kontrol edin.

Daha sonrasında npm init ile proje ortamını oluşturalım. Bu size package.json dosyası oluşturarak bunun üzerinden paketinizi yönetebilmenizi sağlayacaktır.

Daha sonra npm init ile birlikte karşımızı çıkan soruları cevaplayalım. Sonrasın bize preview içerisinde oluşturacağı package.json yapısını veriyor.

Bunu oluşturduktan sonra VSCode sizde yüklüyse paketin içerisine giderek code . veya VSCode üzerinden uygulamamızı açalım.

Peki biz node index.js yerine npm ile buradaki kodu çalıştırabilirmiyiz. Evet npm scripts ekleyeceğiniz komutlar ile kendi script kodlarınızı oluşturabilirsiniz. Örneğin https://docs.npmjs.com/cli/v7/commands/npm-start

Aşağıdaki gibi build, build:dev, test:e2e gibi istediğimiz komutları scripte ekleyebiliriz. Ben aşağıdaki start komutunu ekledim.

npm start veya → npm run start dediğimizde ilgili script çalıştırarak uygulamayı çalıştırmayı başardım.

Bu sayede projeniz üzerinde farklı amaçlar doğrultusunda scriptler oluşturarak bu scriptleri farklı ortamlarda command line üzerinden çalıştırabilirsiniz.

Node.js Projesi NPM Paketi Ekleyelim.

React Geliştirme ortamı oluştururken ister

Create-React-App ister Vite React uygulaması oluşturun, veya
React türevleri Next, Gatsby, Remix, Astro proje ortamları oluşturun.

hepsinde arkaplanda Node.js projesi oluşturuyor ve React geliştirme ortamının ihtiyaçları olan npm paketleri kurulu bir şekilde ortamın Web Dev Server üzerinden çalışmasını sağlatır.

Peki NPM paketini projemize nasıl install ederiz. Örneğin bir ineği console’da konuşturmak istiyoruz (bu linkte bulunan) kütüphaneyi yükleyelim.

npm install cowsay

Bunu yüklediğimizde package.json altına dependencies altına ilgili kütüphane ve versiyonu ile tanımlanacak ve ilgili kod parçaları node_modules altında cowsay klasörü altına yüklenir. Yapmanız gereken require ve import ile bu dosyayı yüklemektir.

Uygulamamız artık diğer yüklediğimiz modüllerinde gücüne sahip olacaktır. Artık modül üzerinden gerekli fonksiyonları çağırarak çok kompleks işlemlerimizi basitçe yaptırıp, kısa zamanda çıktı oluşturabilirsiniz.

Peki cowsay dışındaki diğer paketler nereden geldi. Biz sadece bir paket yüklemiştik halbuki. Burada geliştirilmiş bir paket arkasında başka bir çok pakete bağımlılığı olabilir, bu durumda diğer paketlerinde indirilmesi söz konusu olacaktır. Çünkü indirdiğimiz cowsay tek başına çalışamadığı için bağımlılıkları ile birlikte gelecektir.

npm-remote-ls npm paketini komut satırından çalıştırarak dependency graph oluşturabilirsiniz. Örneğin projenize ekleyeceğiniz kütüphane için denediğimizde

npm-remote-ls cowsay

Aşağıdaki resimde görebileceğiniz gibi bağımlılıkların listesini ve hiyerarşini görebilirsiniz.

Not: NPM paketlerinin analiz edilmesi ve daha detaylı görselleştirilmesi konusunda bilgi almak için daha önceden yazmış olduğum Node Modules Nasıl Optimize Ederiz blog yazısını okumanızı öneririm

Bu kısımda bir önemli noktada package-lock.json dosyası. Bu dosya içerisinde package dosyasının node_modules altına indirilirken diğer modül bağımlılıklarının nasıl indirildiği ile ilgili bir kayıt dosyası bulunur. Bu sayede bir sonraki yeni kütüphane install ederken bağımlılıkları zaten önceden indirilmiş mi herhangi bir conflict oluyor mu şeklide bu kayıtlar üzerinden kontrol ve güncelleme işlemi gerçekleştirerek node_modules güncellemesi yapılır. Bir nevi node_modules üzerindeki işlemlerin kaydı diyebiliriz.

CRA (Create-React-App), Vite, Gatsby, Next, Remix Local Ortamımızda kuralım.

Özetle biz React ve türevi(gatsby, next, remix) ortamlar oluşturduğumuzda aslında arka planda oluşan bir Node projesi.

Gelin ortamların oluşturulmasına yakından bakalım.

1. Create React App

Facebook ekibi tarafından oluşturulmuş, React ortamının kolay bir şekilde oluşturulmasını sağlayan bir komut çalıştırıcı.

npx create-react-app my-app
cd my-app
npm start

Yukarıda neden npx kullanıyoruz ?

Npm paket yönetimi yaparken, npx bundled paketleri çalıştırmanızı bu şekilde localde bir template proje ortamı oluşturmak istediğinizde kısa CLI komutları ile bu ortamın daha basit bir şekilde oluşmasını sağlar. npx özetle;

versiyon, bağımlılık ve gereksiz paketleri yükleme problemlerinden sizi soyutlar.
Github reposu bazlı paket, komut ve modül çalıştırılması konusunda size kolaylıklar sağlar.

Yukarıdaki npx komutu çalıştığında local ortamınızda Node projesi oluşur aslında.

Bu adımları işlettiğimizde node projemiz hazır. Ve npm start ile başladığımızda Web Dev Server çalışarak örnek uygulama burada çalışıyor olacak.

Baktığınızda package.json dosyasının yapılandırma şeklini görebilirsiniz. CRA (Create-React-App) çıktısı üzerinde ileride daha detaylı duracağım. Burada anlatmak istediğim aslında bize hazır template ve scriptler ile React Geliştirme ortamını basitçe kurmamızı sağladı.

2. Vite

npm create vite@latest

Vite ile kuruluma devam ettiğimizde Project ismi, bunun dışında React, Vue, Svelte, Lit ve Prereact proje ortamı oluşturmanıza olanak sağlar. Biz React ortamını oluşturalım.

3 Next.js

Next içinde benzer adımları izleyip Node projesi oluşturuyoruz.

npm init next-app nextjs-blog
cd nextjs-blog

Gatsby , Remix, Astro gibi React türevlerinden tutun. İster Vue, Svelte, Angular, Ember, Solid, Prereact vb farklı UI framework ortamlarını düşünün ne olursa olsun oluşturduğumuz ortam bir node projesi..

CRA (Create-React-App) ile Oluşturduğumuz React Projesini Analiz edelim.

İlk analiz edeceğimiz dosya package.json dosyası. Çünkü yukarıda anlattığım gibi aslında CRA yaptığı size hazır bir Node projesi oluşturmak.

Dependencies (Bağımlılıklar)

Aslında package.json içerisinde 3 tip bağımlılık(dependency) tanımlayabiliyorsunuz .

dependencies: Projenizin çalışırken ihtiyacı olan paketler
devDependencies:Projenizin geliştirme aşamasında gerekli ama production ortamında ihtiyacı olmayan paketler
peerDependencies: Projenizin bağımlı olduğu modüllerin bağımlı olduğu diğer modül versiyonlarının çakıştığı veya uyumlu olmadığı durumları çözümlemek için.. (Detaylı açıklaması)

Test Dependencies (Bağımlılıkları)

Yukarıdaki örneği incelediğimizde testing ile kütüphaneler görüyoruz. Aslında test kütüphanelerinin devDependencies içerisine yer alması gerekir. Bu kütüphaneler;

testing-library/jest-dom: DOM elemanları üzerinden match ile bir takım değerleri kontrol etmenizi sağlar. Tabi bunun arkaplanda testing-library/dom kütüphanesi kullanarak DOM elemanlarına erişimin sağlanması gerekir.
testing-library/react: Bizim React DOM elemanlarını oluşturabilmemiz için render etmemiz lazım, testler için gerekli olan ise React render test için simule eden bir kütüphane olması.
testing-library/user-event: Tarayıcıda kullanıcının oluşturduğu eventleri simule edecek şekilde test için kodla oluşturmanızı sağlayan bir kütüphane. Örneğin bir düğmeye basma islemini kod ile gerçekleştirebilirsiniz.

React Kütüphanesi Bağımlılıkları

react: Bileşenleri , bunların render edilmesi ve render ile ilgili state, hookları yöneten kısım.
react-dom: Render sonucu oluşan görsellerin HTML DOM dönüştürülmesi kısmını sağlayan kütüphane.

Not: Bu konuyu yani React ne olduğunu daha önceden React Nedir ? blog yazısında anlatmıştım. İsteyenler bu yazıyı okuyarak konu hakkında detaylı bilgi edinebilirler.

Not: Eğer React çalışma mantığı ve konseptleri konusunda bilgi almak istiyorsanız da React Nedir ile başlayen React Çalışma Mantığı ve Konseptler yazı serisini okumanızı öneririm

Web Vitals(Bağımlılıkları)

web-vitals: GoogleChrome ekibi tarafından geliştirilmiş bir kütüphane. Bu kütüphane aşağıdaki performs metriklerini ölçebilmek için bir takım APIler sunuyor. Bu bilgileri Beacon üzerinden veya Google Analytic üzerinden istediğiniz raporlama aracına gönderebilir ve bunlar üzerinden analizlerinizi gerçekleştirebilirsiniz.

Core Web Vitals
** Cumulative Layout Shift (CLS)
** First Input Delay (FID)
** Largest Contentful Paint (LCP)Other Web Vitals
** First Contentful Paint (FCP)
** Time to First Byte (TTFB)

Not: Yukarıdaki konu aslında React App performansını ölçmek ile ilgili. Bu konu hakkında daha detaylı bilgi için Web Uygulaması Performans Analizini Nasıl Yapabilirsiniz ? blog yazısını okuyabilirsiniz.

React Scripts

react-scripts: Create React App uygulamasının Webpack üzerine kurguladığı Scriptleri içeren bir kütüphanedir.

Biz kodumuzda npm run start veya build dediğimizde aslında bu arka planda paketlerin içerisinde bulunan scriptleri çalıştırır.

Bu aslında içerisinde bir çok özellikler barındıran sizin için optimize şekilde hazırlanmış scriptler topluluğudur diyebiliriz.

npm run eject ile tüm bu scriptleri dışarıya çıkarabilir tüm kontrolü kendi elinize alabilirsiniz. Ama bu sizin bir yandan da dezavantajınıza olacaktır. CRA’ nın yeni gelen güncellemelerini projenize yansıtmakta zorlanabilirsiniz.

Tüm bu işlemler bittiğinde karşımıza 2 klasör altında ve package.json içerisinde bir takım değişiklik ve güncellemelerin olduğunu görürüz.

Yukarıda 2 klasörün oluştuğunu görebilirsiniz. Birincisi config ile ilgili kısımlardır.

Adding /config/env.js to the project. Env dosyaları özellikle uygulamanızın çalıştığı ortam dev, staging, prod olmasını sağlayacak konfigurasyonlar içerir.
HttpConfig kısmı SSL bağlantıları için konfigurasyonlar içerir.
jest transform kısımlarını içerir (babel, css, file) transform
webpack configurasyonları ve WebDev Server konfigurasyonlarını içerir.

Sonrasında Dependencies kısmına bir çok ihtiyacı olan kullanılabilecek kütüphaneleri ekler.

Daha sonrada scripts altına eject dışındaki build, start ve test ile ilgili javascript kodlarını ekler.

İşte bu scriptler build aşamasında kodların JSX, TS, Flow → JS dönüşmesinde Babel, SaSS vs → CSS dönüşmesine, Webpack ile bundle oluşturulmasına ve public folder altına taşınma işlemini gerçekleştirir.

start aşamasında Webpack DevServer üzerinden kodu direk çalıştıran Node.js kodlarını görebilirsiniz.

test aşamasında belli argumanlar oluşturulup, son aşamada jest.run(argv); testlerin koşulması sağlanır.

Yukarıda bahsettiğim kısımların büyük bir çoğunluğu Node.js bilgisi ve Node.js React için yazılmış scriptler ile ilgiliydi.

Node.js Mimarisi

Son olarak Node.js mimarisinden kısaca bahsedeyim. Node.js aynı tarayıcılarda olduğu gibi sizin yazmış olduğunuz JavaScript kodlarını WebAPI yerine işletim sisteminde bulunan kodları dosya erişimi, LibUV ile arayüz thread yönetilmesi gibi bir çok benzer kütüphaneye erişim sağlar.