React Projesi Başlatma: Create React App

create-react-app ‘ı Neden Kullanmak Gerekiyor?

React projesini temelden başlatmak gerçekten zaman alıcı yorucu bir iştir, birde bu işe yeni başlıyorsanız yandı gülüm keten helva. Bir web projesini temelden başlatma zorluğu sadece react projesi için geçerli değil. Başka frameworklerlede üç aşağı beş yukarı aynı sıkıntılarla karşılaşırsınız.

Neler yapmamız gerekiyor kısmını hepsini buraya yazmak bu makalenin boyutunu aşar. Bunun için ben kısaca birkaç madde ile en azından kafamızda bir şeyler oluşması için özetlemeye çalışacam. Projeyi başlatırken yapacağınız işlemler sadece aşağıda vereceğim örneklerle kısıtlı değil bunlardan hariç client tarafında bir çok ayarı projenin sağlıklı yürümesi için yapmanız gerekiyor. Aşağıda vereceğim örneklerin amacı, create-react-app paketinin, proje başlangıcı için bize nasıl bir kolaylık sağladığını göstermek.

Aşağıdaki yazacağım örneklere geçmeden önce şöyle bir bilgi verelim, create-react-app paketi, en altta Babel, Webpack vs teknolojilerinin ayarlamalarını otomatik olarak yapar. create-react-app, babel, webpack vs. teknolojilerin sistemsel ayarlamaları kendi içinde yaptığı için projenin başlangıcında sizin bu tür proje ayarlarıyla uğraşmanıza gerek kalmaz, siz sadece projenizin genel yapısına odaklanmış olursunuz.

İlk olarak Babel kullanımına birkaç örnek verelim. React projesi içinde yazacağınız JSX kodunuzu browserların anlayabileceği koda dönüştürmeniz gerekiyor çünkü browserlar jsx veya benzeri alt teknolojilerin okunması için destek vermezler. Dünya üzerinde bunun gibi binlerce alt teknoloji mevcut, tek tek bunları tarayıcı motorlarına entegre etmek hem mantıklı değil hem de teknik olarak olanaksız. Bu işi kendiniz yapmanız gerekiyor, JSX gerekli olan transpile işlemini projenizi canlıya vermeden önce babel’i sisteminize kurup derlemeniz gerekiyor. Yapmanız gereken diğer bir işte şu olabilir. ES6 ile JS’e gelmiş olan yeni kod özelliklerini kullanmak istiyorsunuz ancak her browser bunu desteklemiyor yazacağınızı ES6 kodunuzu ES5 koduna dönüştürmeniz gerekiyor. Bu değişikliği yapabilmek için yine Babel ve Babel’in alt paketlerini kullanımınız icap ediyor.

Diğer bir örnekte Webpack için verelim. Neden webpack kullanayım? Mesela, proje dosyalarının üzerinde bazı kısımlarda kodlarınızın daha anlaşılabilir olması için yorumlar yazıyorsunuz bu yorumların canlı sistemde yer almasına gerek yok, gereksiz yere projenin boyutunu artırmış olursunuz. Bunun için projenizi canlıya verirken bu yorumları kaldırmanız daha mantıklı olacak, webpack böyle bir işlemi sizin için hallediyor. Diğer bir örnek, projenizde yer alan dosyalarınızı minimize edip kullanıma öyle sunmak gerekiyor. Dosyalarınıza minimize etmek sitenin yükleme zamanını ciddi manada azaltır. Bunun için webpack veya muadili olan diğer teknolojileri kullanmanız gerekecek.

Toparlamak gerekirse projenin üzerinde hareket eden çok fazla parçanız var. Bu parçaları tek tek düzene koymak kolay bir iş değil. Peki bu kadar ayarlamayı tek tek yapmak zorunda mıyız? Değiliz! Bakımı facebook’tan topluluğu tarafından yapılan güzel bir paket var, create-react-app. Bu paket ile projenize hızlı bir başlangıç verebilirsiniz.

Create React App Yükleme

Create-react-app projesini başlatmak için ilk önce bu paketi global olarak bilgisayarınıza yüklemek gerekiyor. Aşağıda gösterildiği gibi yarn veya npm ile sisteminize ekleyebilirsiniz.

npm veya yarn ile kullanımı aşağıdaki gibi;

create-react-app paketini sisteme ekledikten sonra herhangi bir proje başlatmak için aşağıdaki komutu kullanmalısınız. create-react-app *proje-ismi* şeklinde komutu çalıştırmanız gerekiyor.

yarn start ile projenizi başlattığınızda localhost:3000’de aşağıdaki gibi bir ekran ile karşılaşacaksınız. Daha sonra bu ekran üzerinde değişiklik yapmaya başlayacağız şimdilik herhangi bir değişiklik yapmadan bırakmak istiyorum.

Projeyi başlatma işlemi yaptıktan sonra yukarıda da ekran görüntüsünü vermiş olduğum gibi create-react-app size projeye başlamak için gerekli olan bütün dosyaları verecek. Oluşturulan dosyalara kısaca bir göz atalım. Bu dosyalar nelerdir? Projede ne işe yararlar? konularını bilmenizde yarar var.

node_modules

Bu klasör npm sisteminin bir parçası. Proje içinde kullanacağınız bütün paketler burada lokal olarak yer alır. node_module dosyasının içindeki herhangi bir paketi import ile projenin belli bir kısmına dahil edebilirsiniz.

public

Public klasörü kendi içinde iki tane önemli dosya barındırıyor. Bunlardan birincisi index.html , ikincisi ise manifest.json bu dosyalarında ne olduğunu kısaca açıklayalım.

index.html

index.html dosyası, tarayıcı tarafından ilk okunan dosyadır diğer bir deyişle projenizin başlangıç noktasıdır. Tarayıcı, SPA uygulaması yapıyorsanız ilk olarak bu dosyayı işler daha sonra index.html dosyasının üzerinden devam ederek sitenin geri kalanını oluşturur. Bu dosya ayrıca yaratılacak olan build/index.html dosyası içinde bir şablon görevi görür.

manifest.json

Bu dosya herhangi bir browserda uygulamanızın nasıl görüneceğine karar verir. Örneğin, sitenizi kullanıcı tarayıcının yer imlerine eklemek istediğinde veya siteniz tarayıcı sekmesinde nasıl gözükeceğine bu dosya üzerindeki özellikler ile belirleyebilirsiniz. Bu dosya üzerinde yer alan değerler ile uygulamanın ikonu, rengi, adı vs.. gibi özelliklerini değiştirebilirsiniz. Daha fazla bilgi için

src

Bu klasör içinde değerlendireceğimiz iki önemli dosya mevcut. Bunlardan birincisi index.js dosyası. Uygulamanın temel olarak başlayacağı yer. Proje ilk olarak index.js dosyası ile dinamik hale gelmeye başlar. Oluşturacağınız diğer JS dosyaları, index.js üzerine eklenerek projenizin mimarisini kurulur.

app.js dosyası projenin bileşenlerinin ilk başlayacağı yer. Sistemde oluşturacağınız bileşenler ve diğer js dosyaları bu dosyanın üzerine eklenecek.

package.json

package.json, projenizin bağlı olmuş olduğu veya diğer bir deyişle projenizde kullanacağınız diğer paketlerinizin hangi versiyonlar ile ilişki olduğunu gösterir. package.json dosyası aynı zamanda kodlarınız başka kişilerle paylaşmanız içinde gereklidir. Bu dosya sayesinde projenizi diğer kişilerle rahatlıkla paylaşabilirsiniz. Bu dosya içinde yer alan bazı önemli scriptler yer alıyor bunların ne işe yaradığında kısaca değinelim.

yarn.lock

Eğer npm modül eklemelerinizi yarn kullanarak yapıyorsanız bu paket otomatik olarak yarn tarafından oluşturulur. yarn add komutunu her kullanımınızda, bu dosya üzerinde otomatik olarak yarn tarafından değişiklik yapılır.

Paketinizi veya modülünüzü diğer kişilerle paylaşmak ve tam olarak bir paketin hangi paket ile bağlantılı olduğunu bilmek için package.json dosyasının gerekli olduğunu söylemiştik. Ancak package.json dosyası, uygulamanızın sadece üst paket ilişkilerini tutar. Ancak paketlerinizin sağlıklı çalışabilmesi için bu paketlerin alt paketlerini ve versiyonlarınında kayıt altına alınması gerekiyor. Bu görevi, yarn.lock dosyası yerine getirir bu şekilde uygulamalarınıza paket ekleme ve çıkarma işlemlerini güvenli bir şekilde gerçekleştirmiş olursunuz.

Bu konuyu biraz daha açıklayıcı olması için basit bir örnekle açıklayalım. Örnek olarak bir proje oluşturdunuz bu projenin üzerinde “bylge” adlı bir paketiniz var. Siz projeyi başlattığınız zaman bylge’nin versiyonu 1.9.1 olsun. Bu şekilde projenizi çalıştırıyorsunuz. Projenizi daha sonra open-source yapmak istediniz veya takımınıza yeni bir arkadaşınız dahil oldu artık bu arkadaşta bu proje üzerinde çalışacak. Arkadaşınız bu projeyi başlatmak için yarn install komutunu kullanarak sisteme paketlerin lokal olarak eklemesini yapacak. Yükleme yapıldığı dönemde “bylge” ‘nin yeni bir versiyonun çıktığını varsayalım, paket 1.9.2 oldu. Bu durumda projeyi yeni yükleyen arkadaş yarn install komutunu çalıştırdığı zaman, yarn “bylge” paketinin 1.9.1 versiyonunu değil 1.9.2 versiyonunu sisteme ekleyecek. Bu durumda aynı projede çalışan iki kişinin iki farklı versiyonda paketi olmuş olacak ve bu projenin kendi içinde bazı yerlerde sıkıntı açmasına yol açabilir. Özetle yukarıdan da anlayacağınız üzere yarn.lock dosyası buradaki farklılığı gidermek için paketin gerekli özelliklerini üstünde taşır.

.gitignore

Bütün projelerde standart olarak kullanılan bir dosya. Projenizi github’a göndermek istediğiniz zaman bu projenin içinde yer alan hangi dosyaların veya klasörlerin github’a gönderilmeyeceğini gösterir. Bu şekilde hassas verilerinizin internet yer almasını engellemiş olursunuz. Mesela projenizde kullanacağınız .env dosyanızda tutacağınız değişkenleri, güvenlik kimliklerinizi veya şifrelerinizi github’a göndermemeniz gerekiyor, github sonuç itibariyle internet üzerinde çalışan bir platform, güvenlik açısından riskli. Gitignore dosyasının içine, göndermek istemediğiniz dosyanın ismini yazarak bu dosyanın gönderilmesini engelleyebilirsiniz.

create-react-app ile daha fazla bilgi almak için