Create React App ile bir React Projesi Kurulumu

React ön uç uygulamaları geliştirmek için en popüler JavaScript kütüphanelerinden biridir. İlk olarak Facebook tarafından geliştirilen açık kaynaklı bir kütüphanedir. React, JSX – JavaScript’i HTML benzeri bir sözdizimiyle birleştiren bir programlama paradigması – ile hızlı uygulamalar oluşturmak için kısa sürede popüler hale geldi.

Geçmişte, bir React projesi kurmak karmaşık bir süreç olurdu. Aşağıdaki bileşenlerin manuel olarak yapılandırılmasını gerektiriyordu:

• Bir derleme sistemi
• Kod dönüştürücü (modern sözdizimlerini tarayıcı tarafından okunabilir kodlara dönüştürür)
• Proje için temel dizin yapısı

Neyse ki, Create React App sayesinde o günler çok geride kaldı. Tüm bu adımları otomatikleştiren harika bir araçtır. Create React App; kod dönüştürme, linter denetimi, test etme ve derleme sistemlerini halleder. Ayrıca, değişiklikler yapıldıkça web sayfalarının yenilenmesi anlamına gelen hot reloading (sıcak yeniden yükleme) özelliğini destekleyen bir sunucuyla birlikte gelir. Elbette tüm bunlar düzenli bir dizin yapısı içinde gerçekleştirilir.

Kısacası, Webpack gibi derleme sistemlerini veya Babel gibi kod dönüştürücüleri manuel olarak yapılandırma zahmetine girmeye gerek yoktur. Endişelenecek daha az şey olduğundan, tamamen ön uç geliştirmeye odaklanmakta özgürsünüz. Create React App, minimum hazırlıkla React’e başlamanızı sağlar.

Bu kılavuzda, Create React App’i nasıl kullanacağınızı ve temel bir React uygulamasını nasıl çalıştıracağınızı göstereceğiz. Bu, gelecekteki herhangi bir uygulama projesi için temel oluşturabilir.

Gereksinimler

Bu eğitimde gösterilen adımları gerçekleştirmek için önceden yapılandırılmış aşağıdaki yazılımlara ihtiyacınız olacak.

• • Düzgün şekilde yapılandırılmış bir Ubuntu sunucusu. CloudSigma üzerinde bir Ubuntu sunucusu yapılandırma.
  • adımlarını takip edebilirsiniz. En son Node.js sürümünün kurulu olması gerekir. İşte Ubuntu üzerinde Node.js kurulumu hakkında adım adım bir kılavuz.

Adım 1: Özel bir npm Proje Dizini Oluşturun

Node.js paketleri için, npm varsayılan paket yöneticisidir. Özel bir proje dizini oluşturmak için npm kullanacağız. Bu dizin, proje hakkındaki tüm meta verileri ve ek Node.js bağımlılık modüllerini depolayan package.json gibi önemli dosyalara ev sahipliği yapacaktır. JSON, JavaScript nesnelerine dayalı standart bir veri paylaşım formatıdır. JSON hakkında daha fazla bilgi edinmek istiyorsanız bu kılavuza göz atabilirsiniz.

İlk olarak, özel bir dizin oluşturun:

Ardından, dosya içinde bir geliştirme ortamı başlatması için npm’e talimat vereceğiz. Bu, proje için gerekli olan package.json dosyasını oluşturacaktır. Mevcut dizini değiştirin:

Şu npm init komutunu çalıştırın:

Bu dizinin bir git deposunun parçası olmasını istiyorsanız, önce bunu ayarlamanız önerilir. Başlatma betiği bunu otomatik olarak algılayacak ve her şeyi buna göre yapılandıracaktır. Tamamlandığında, dizinde bir package.json dosyası bulunmalıdır. Bir metin düzenleyici ile kontrol edin:

Adım 2: Create React App ile bir React Projesi Oluşturun

Bu adımda, örnek React projemizi oluşturmak için Create React App’i çağıracağız. Bu betik, gerekli olan her şeyi tüm bağımlılıklarla birlikte yeni bir dizine kopyalayacaktır. npm paket yöneticisi ayrıca npx aracıyla birlikte gelir. Bu araç, yürütülebilir paketleri çalıştırmak için kullanılır. Projeyi gerçekten indirmeden Create React App betiğini çalıştırmak için bunu kullanacağız.

Bu işlem, belirtilen dizinde create-react-app komutunu çalıştıracaktır. Ayrıca bağımlılıkları yüklemek için npm install komutlarını da çalıştıracaktır. Kullanım kolaylığı açısından cloudsigma-react-react-tutorial adını kullanacağız. Aşağıdaki komutu çalıştırın:

İşlemin sonunda aşağıdaki bildirimi göreceksiniz. Kurulum başarıyla gerçekleştiyse bu bir başarı mesajıdır. Ayrıca projenin oluşturulduğu konumu da bildirir.

Adım 3: React-Scripts Uygulama

Şimdi, kurulum sırasında yüklenen çeşitli react-scripts konusuna kısaca göz atacağız.

• • Test kodunu çalıştırmak için test betiğini çalıştıracağız.
  • The build betiği, projemizin küçültülmüş bir sürümünü (üretim ortamı için) oluşturacaktır.
  • Son olarak, eject betiği özelleştirme üzerinde tam kontrol sunar.

İlk olarak, React proje dizininin içeriğini kontrol edin:

İşte her dosyanın açıklaması:

• • node_modules/: Bu dizin, uygulama tarafından kullanılacak tüm harici JavaScript kütüphanelerini içerir. Burada değişiklik yapmak nadiren gereklidir.
  • public/: Bazı temel HTML, JSON ve görsel dosyalarını barındırır. Projenin kök dizini olarak işlev görür.
  • src/: Bu dizin, projemiz için React JavaScript kodlarını içerir. Zamanımızın çoğunu burada geçireceğiz. Kılavuzun bir sonraki bölümünde bu dizini daha detaylı inceleyeceğiz.
  • .gitignore: Git’in hangi dizinleri yok sayacağını açıklayan bir dosyadır, örneğin node_modules dizini. Genellikle, büyük dosyalar içeren veya sürüm kontrolüne dahil edilmesi gerekmeyen günlük dosyalarını barındıran dizinleri hariç tutmak daha iyidir. Bu durumda, bazı React’e özel dizinleri de içerecektir.
  • README.md: Create React App hakkında pek çok yararlı bilgi içeren bir markdown dosyasıdır. Örneğin, gelişmiş yapılandırma için komut bağlantılarının bir özetini içerir. Şimdilik onunla bir işimiz yok. Ancak proje ilerledikçe, proje hakkında daha fazla dokümantasyon ekleyeceksiniz.

The files package.json ve package-lock.json dosyaları npm tarafından kullanılır. İlk npx komutu çalıştırıldığında temel projeyi oluşturdu. Ek bağımlılıklar yüklendiğinde ise package-lock.json dosyasını oluşturdu.. npm, paketlerin tam sürümlerle eşleşmesini sağlamak için package-lock.json dosyasını kullanır. Bu sayede, başka biri projenizi yüklediğinde onlar da birebir aynı bağımlılıkları elde eder. Otomatik olarak oluşturulduğu ve yönetildiği için buna nadiren dokunmanız gerekir.

Konuşmamız gereken son dosya package.json dosyasıdır. Proje hakkında meta veriler içerir. Örneğin, meta veriler bir proje başlığı, sürüm numarası ve bağımlılıkları kapsayabilir. Ayrıca projeyi çalıştırmak için kullanabileceğiniz betikleri de içerir. package.json dosyasının içeriğine göz atın:

Çeşitli nesneler içeren bir JSON dosyasıdır. scripts nesnesine bir göz atın. Dört farklı betik içerir:

• • start
  • build
  • test
  • eject

Bu betikler önem derecelerine göre listelenmiştir. start betiği yerel geliştirme sunucusunu başlatır. Sırada, geri kalan betikleri nasıl kullanabileceğinizi detaylandıracağız.

• • Build Betiği

Bir npm betiğini çalıştırmak için komut yapısı şu şekildedir:

To run the build betiğini çalıştırmak için aşağıdaki komutu kullanın:

Kodları kullanılabilir bir pakete derleme sürecini başlatacaktır. Tamamlandığında, çıktı dizinine göz atın:

Yeni bir build/ dizininin mevcut olduğunu fark edeceksiniz. Bu dizin, diğer dosyaların küçültülmüş ve optimize edilmiş bir sürümünü içerir. Bunu her zaman .gitignore dosyasına eklemeniz önerilir, çünkü build betiğini kullanarak her zaman yeniden oluşturabiliriz.

• • Test Betiği

The test betiği, npm tarafından çalıştırılması için run parametresini gerektirmeyen betiklerden biridir. Ancak, bu parametreyle de sorunsuz çalışacaktır. Çalıştırıldığında, bu betik Jest adında bir test çalıştırıcı başlatacaktır. Test edici, .spec.js veya test.js uzantılı herhangi bir proje dosyasını arar ve bu dosyaları çalıştırır.

Aşağıdaki npm komutu test betiğini çalıştıracaktır:

Çıktıda dikkat edilmesi gereken birkaç nokta var. Test çalıştırıcısının yalnızca belirli uzantılara sahip dosyaları aradığını hatırlıyor musunuz? Bu durumda, yalnızca tek bir test paketi vardır (yalnızca .test.testjs uzantısı). Yalnızca tek bir test içerir. Jest, kod hiyerarşisindeki testleri otomatik olarak algılayabilir, bu nedenle testleri bir dizin içinde iç içe yerleştirmekte özgürsünüz.

Buna ek olarak, Jest testi yalnızca bir kez çalıştırıp çıkmaz. Testi terminalde çalıştırmaya devam eder. Kaynak kodda herhangi bir değişiklik yapılırsa, testleri tekrar çalıştıracaktır. Jest ayrıca hangi testlerin çalıştırılacağını sınırlamaya da olanak tanır. Örneğin, 0 tuşuna basarak Jest’e yalnızca değiştirilen dosyaları test etmesini söyleyebilirsiniz. Test paketleri büyüdükçe bu seçenek çok fazla zaman kazandırır. Jest test çalıştırıcısından çıkmak için şu tuşa basın: q.

• • Eject Betiği

The eject betiği, tüm bağımlılıkları ve yapılandırma dosyalarını projeye kopyalayarak kod üzerinde tam kontrol sahibi olmanızı sağlar. Ancak bunu yaparak projeyi Create React App entegre araç zincirinden çıkarmış olursunuz. Bir kez çalıştırıldığında, bunu geri almanın hiçbir yolu yoktur.

Create React App’in avantajı, çok sayıda yapılandırma yükünü üzerinizden almasıdır. Herhangi bir modern JavaScript uygulaması oluşturmak, birlikte çalışan birçok aracın kullanılmasını gerektirir. Create React App tüm yapılandırmaları sizin için halleder, bu nedenle projeyi eject etmek, bundan sonra tüm bunları manuel olarak yapmanız gerektiği anlamına gelir.

Create React App’in göze çarpan bir dezavantajı, tüm yapılandırmaları kendi yönettiği için projenin tam olarak özelleştirilmesine izin vermemesidir. Çoğu proje için bu bir sorun değildir. Ancak, projenin tam kontrolünü ele almak istiyorsanız, kodu eject etmeniz gerekecektir. Eject edildikten sonra, Create React App’in yeni sürümlerine güncelleyemezsiniz. Tüm geliştirmeleri manuel olarak yönetmeniz gerekir.

Adım 4: Sunucunun Başlatılması

Şimdi, yerel sunucuyu başlatacağız ve projeyi bir web tarayıcısında çalıştıracağız. Sunucuyu başlatmak için elimizde başka bir betik var. Bunu çalıştırmak npm run komutunu gerektirmez. Çalıştırıldığında betik yerel bir sunucu başlatır, proje kodunu çalıştırır, bir izleyici (watcher) başlatır ve kod değişikliklerini dinler. Değişiklikler doğrudan tarayıcıda gösterilir. Aşağıdaki komut sunucuyu başlatacaktır:

Çıktı, projeyi bir tarayıcıda ziyaret etmek için gereken URL’yi gösterecektir. Ayrıca çalışan proje hakkında çeşitli bilgiler de gösterecektir. URL’yi bir tarayıcıda açın:

Çıktıda gösterildiği gibi, Create React App projeyi sunmak için 3000 portunu kullanır. Port zaten kullanımda ise, Create React App bir sonraki kullanılabilir portu kullanacaktır. Yapılandırılmış bir güvenlik duvarınız varsa, 3000 portuna (veya Create React App’in bildirdiği porta) giden trafiğe izin vermelidir. Şunun hakkında daha fazla bilgi edinebilirsiniz: UFW güvenlik duvarını buradan yönetme.

Sunucudan çıkmak için terminal penceresinden Ctrl+C tuşlarına basın. Bu, çalışan işlemi (sunucu örneğini) sonlandıracaktır.

Adım 5: Ana Sayfa Değişikliği

Sırada, public/ dizininde saklanan kodları nasıl değiştireceğimizi öğrenmek var. Bu dizin temel HTML sayfasını içerir ve projenin kökü olarak hizmet eder. Gelecekte burayı daha fazla düzenlemeniz gerekmese de, projenin temelini oluşturur.

İlk olarak, sunucuyu npm ile başlatın, ardından public/ dizinine gidin:

Dizin, favicon.ico, logo192.png, logo512.png gibi dosyalar içerecektir. Bunlar, web sayfasını ziyaret eden bir kullanıcının sekmesinde, tarayıcısında veya telefonunda göreceği simgelerdir. Tarayıcı, uygun boyuttaki simgeyi otomatik olarak seçecektir. Zamanla bunları projenize uygun simgelerle değiştireceksiniz. Şimdilik onları olduğu gibi bırakacağız.

The file manifest.json dosyası, yapılandırılmış bir meta veri kümesi barındırır. Projeyi tanımlar, mevcut simgeleri listeler ve daha fazlasını sunar.

The file robots.txt dosyası, web örümcekleri için bilgi barındırır. Web örümcekleri, arama motorları için sayfaları dizine ekleyerek World Wide Web’de “gezinir”. Özel bir nedeniniz olmadıkça dosyayı değiştirmenize gerek yoktur. Örneğin, belirli içeriklere giden bazı URL’lerin kolayca erişilebilir olmamasını isteyebilirsiniz. Konumu robots.txtdosyasına ekleyin; böylece arama motorları tarafından dizine eklenmeyecektir.

The file index.html uygulamamızın köküdür. Uygulamaya her erişildiğinde sunulan dosya budur. Ekranda gördüğünüz dosya budur. Hadi buna hızlıca bir göz atalım. Bir metin düzenleyicide açın:

Oldukça kısa bir dosyadır. Şurada hiçbir resim veya kelime olmadığına dikkat edin: <body>. React bu içerikleri kendi motorunu kullanarak oluşturur ve JavaScript kullanarak enjekte eder. Ancak React'in kodu nereye enjekte edeceğini bilmesi gerekir. index.html dosyası bu amaca hizmet eder.

Hadi <title> etiketini şununla değiştirelim: My React App:

Ardından dosyayı kaydedin ve düzenleyiciyi kapatın. Şimdi tarayıcıda web sayfasını kontrol edin:

Gördüğünüz gibi, sekmenin başlığı My React App olarak değişti. Otomatik olarak değişmediyse, F5 veya Ctrl+R tuşlarına basarak sayfayı yeniden yükleyin.

Metin düzenleyiciye geri dönelim. Tüm React projeleri bir kök (root) öğeden başlamalıdır. Tek bir sayfada birden fazla kök öğe olabilir. Ancak en az bir tanesi zorunludur. React'e oluşturulan tüm HTML kodlarını nereye koyacağını söyler. Bizim index.html dosyamızda, şu öğenin konumunu bulun: <div id="root">. Bu, <div> etiketidir ve React bunu gelecekteki değişiklikler için kullanacaktır. Lütfen id değerini root yerine base olarak değiştirmeyi deneyin:

 

 

Bundan sonra, tarayıcıda sayfayı yeniden yükleyin. Hiçbir içerik gösterilmeyecektir. Firefox'un Web Geliştirici Araçları aracının gösterdiği gibi, bir hata fırlatır:

Metin düzenleyiciye geri dönün ve id değerini tekrar root yapın:

Adım 6: Başlık Etiketi ve Stil Değişiklikleri

Şimdiye kadar yerel sunucuyu başlattık ve kök HTML dosyasında küçük değişiklikler yaptık. Şimdi, src/ dizininde bulunan React bileşenleriyle çalışacağız. CSS ve JavaScript kodlarında değişiklikler yapacağız. Değişiklikler, hot reloading (sıcak yeniden yükleme) kullanılarak otomatik olarak uygulanacaktır.

Eğer sunucu durdurulduysa, npm kullanarak başlatın. Ardından, src/ dizininin içeriğine bir göz atın:

Burada birden fazla JavaScript ve CSS dosyası var. Bunların üzerinden tek tek geçeceğiz.

• ServiceWorker.js

Progresif web uygulamaları yapmak istiyorsanız bu önemli bir dosyadır. Bu service worker; anlık bildirimler, çevrimdışı önbelleğe alma vb. gibi çeşitli özellikler sunar. Şimdilik onu olduğu gibi bırakacağız.

• SetupTests.js and App.test.js

Bu dosyaların adlandırılmasından da anlaşılacağı gibi, dosyaları test etmek için kullanılırlar. test betiğini npm kullanarak her çalıştırdığımızda bu dosyaları çalıştırdı. setupTests.js dosyası birkaç özel expect yöntemi içerir.

Şimdi App.test.js dosyasına bir göz atalım. Bir metin düzenleyicide açın:

Belgede learn react ifadesinin bulunup bulunmadığını kontrol eden temel bir test içerir. Tarayıcı sekmeniz açıksa, sayfadaki ifadeyi görebilirsiniz. Diğer birim testlerinin aksine, React testleri farklıdır. Bileşenler işaretleme gibi görsel bilgileri (ve veri işleme mantığını) içerebildiğinden, geleneksel birim testleri kolayca çalışmaz. Bu açıdan, React testleri daha çok bir işlevsel veya entegrasyon testi biçimi olarak tanımlanabilir.

• CSS Dosyaları

Kullanılabilir çeşitli stil dosyaları vardır: App.css, index.css, ve logo.svg. React'te stil vermek için birden fazla yöntem izleyebilirsiniz. En kolay yol, ek bir yapılandırma gerektirmediği için düz CSS yazmaktır.

CSS'i doğrudan bir bileşene aktarmanıza (import etmenize) izin verilir. Bu, CSS dosyalarının yalnızca tek bir bileşene uygulanacak şekilde bölünmesini sağlar. Aslında CSS'i JavaScript'ten ayırmıyorsunuz. Aksine, ilgili tüm bileşenleri (CSS, JavaScript, resimler ve işaretleme) bir arada grupluyorsunuz.

Bir metin düzenleyiciyle App.css dosyasını açın:

Özel CSS ön işlemcileri (preprocessors) içermeyen standart bir CSS dosyasıdır. İsterseniz bunları daha sonra ekleyebilirsiniz. Create React App, kutudan çıktığı haliyle sağlam bir deneyim sunarken tarafsız olmaya çalışır.

Bir değişiklik yapalım ve bunu iş başında görelim. Şunun değerini değiştirin: background-color olarak blue:

Tarayıcıdaki değişikliği kontrol edin:

• • Index.js

Şimdi React JavaScript kodunda değişiklik yapma zamanı. Şunu açın: index.js bir metin düzenleyici kullanarak:

En üstte, şunları içe aktarıyor: React, ReactDOM, index.css, App, ve serviceWorker. Şunu içe aktararak: React, JSX'i JavaScript'e dönüştürmek için gereken kodu çekiyoruz. ReactDOM, React kodumuzu temel öğeye bağlayan koddur ( index.html, örneğin). Aşağıdaki satıra bakın:

React'e bir id bulmasını (root etiketine sahip) ve React kodlarını oraya enjekte etmesini söylüyor. <App/> kök öğedir ve her şey oradan dallanır.

CSS dosyalarını da (örneğin index.css) gibi) içe aktardığımıza ancak aslında onunla hiçbir şey yapmadığımıza dikkat edin. İçe aktararak aslında Webpack aracılığıyla React betiklerine CSS kodlarını nihai derlenmiş pakete dahil etmesini söylüyoruz. Aksi takdirde, CSS stilleri görünmeyecektir.

• App.js

Sırada, şuna bir göz atacağız: App.js. Bir metin düzenleyicide açın:

 

İçeriğini değiştirmenin projemizi nasıl etkilediğini görelim. Şunun içeriğini değiştirin: <p>etiketi:

Ardından, dosyayı kaydedin ve değişiklikler için tarayıcıyı kontrol edin:

İşte bu kadar! İlk React bileşeni ince ayarlarınızı yaptınız!

Dikkat edilmesi gereken bir şey daha var. Şu öğeye bakın: <img>:

Şuna dikkat edin: logo süslü parantezler içine aktarılır. Öznitelikleri (dize veya sayı olmayan) aktarırken, her zaman süslü parantezler içine aktarılmalıdırlar. Ardından, React bunları dize yerine JavaScript nesneleri olarak ele alacaktır.

Bu durumda, uygulama aslında resmi içe aktarmıyor. Bunun yerine, bu resme yapılan bir referanstır. Webpack projeyi derlediğinde, resmi uygun konuma yerleştirir. Bunu tarayıcıda doğrulayabiliriz. Firefox'ta Web Geliştirici Araçları açın:

Webpack tüm resimler için benzersiz dosya yolları atamak ister. Bu nedenle, resimler aynı adla içe aktarılmış olsa bile farklı yollara sahip olacaklardır.

Adım 7: Proje Derleme

Bu adımda, projeyi dağıtılabilir bir paket halinde nasıl derleyeceğimizi öğreneceğiz. Terminali başlatın ve projenin şu build betiğini çalıştırın:

Derleyici, çıktıyı koyacağı özel bir build/ dizini oluşturacaktır. Derleme işleminin ne yaptığını görmek için, şu index.html dosyasını şu dizinden açın: build/dizini:

Gördüğünüz gibi, tüm kodlar derlenmiş ve kullanılabilir en küçük duruma getirilmiştir (küçültülmüştür). Kodun kullanıcıya doğrudan sunulan kısmı olmadığı için okunabilirlik bir sorun değildir. Küçültülmüş kodlar, tüm işlevlerini korurken daha az yer kaplar. Boşlukların çok önemli olduğu dillerin (örneğin Python) aksine, web dilleri (HTML, CSS ve JavaScript) tarayıcının bunu yorumlaması için düzgün boşluklandırma gerektirmez.

Son Düşünceler

Bu kılavuzda, bir React uygulamasının nasıl oluşturulacağını başarıyla gösterdik. Ayrıca karmaşık teknik detaylara girmeden JavaScript derleme araçlarını kullanan bazı temel yapılandırmaları da gösterdik. Bu, Create React App'in sunduğu en önemli değerdir. React ile başlamak için her şeyi bilmeniz gerekmez. Yalnızca React koduna odaklanırken karmaşık derleme adımlarını öğrenmemenize izin verilir.

Burada ayrıca bir React projesinin nasıl başlatılacağını, test edileceğini ve derleneceğini de gösterdik. Bu komutlar her boyuttaki proje için son derece önemlidir.

Keyifli Kodlamalar!