03-İlk React Native Projemizi Oluşturalım

Merhaba! İlk bölümde React Native’e kısa bir giriş yapmış ardından da ikinci bölümde React Native kurulumlarını gerçekleştirmiştik. Önceki yazılara ulaşmak için bu kategoriyi ziyaret edebilirsiniz. Şimdi, ilk React Native projemizi oluşturalım ve projemize genel bir bakış atalım.

React native Projemiz Oluşturalım

1. Proje Klasörümüzü Oluşturalım

Node.js ve Visual Studio Code IDE’sinin bilgisayarımıza kurulu olduğundan emin olduktan sonra masaüstümüzde bir klasör oluşturalım ve klasöre istediğimiz ismi verelim. Ben klasör ismini first-rn-project olarak belirledim. Yalnız klasör ismini verirken olası hataları engellemek için benim yaptığım gibi aralara tire koyun ve Türkçe karakter kullanmayın.

Klasörümüzü oluşturduktan sonra VS Code’u açalım ve klasörümüzü sürükleyip VS Code’un içine bırakalım. Bunu yaptıktan sonra VS Code arayüzümüz şöyle gözükecektir:

Bir önceki yazımda da belirttiğim gibi VS Code arayüzü sizde daha farklı olabilir. Çünkü VS Code’u sıfırdan kurduysanız sizde hiç eklenti kurulu olmayacaktır. Yahut daha önceden kurulu ise eklentileriniz benim eklentilerimden farklı olabilir. Bu önemli değil. Eğer bir eklentiyi kullanırsam zaten size ne eklentisi olduğunu söylerim ve siz de o eklentiyi kurarak takip edebilirsiniz.

2. Proje Klasörümüze Expo Kullanarak Gerekli Kurulum Dosyalarını Yükleyelim

Expo ile React Native projesi oluşturmak çok kolay. Tek yapmamız gereken VS Code terminalini açıp tek bir komut satırı yazmak. VS Code terminalini açmak için üst kısımda yer alan “Terminal” kısmına tıklayın ve ardından da “New Terminal” seçeneğini seçin.

Ardından terminale aşağıdaki komutu girelim:

npx create-expo-app@latest ./

Bu komut, proje klasörümüzün dizinine (./ ile mevcut dizini hedefliyoruz) Expo’nun en güncel sürümünün gerekli dosyalarını ekleyecektir. Komutu girdikten sonra kurulum işlemlerimiz başlayacaktır. Kurulum işleminin sonunda terminal ekranında şunu görmüş olmalısınız: “✅ Your project is ready!”. Eğer bu yazıyı gördüyseniz gerekli dosyalar kurulmuş demektir.

Kurulumun Ardından Gelen Dosyalara Göz atalım

Kurulumu yaptık, karşımıza çeşitli dosyalar ve klasörler çıktı. Şimdi bu dosyaları/klasörleri inceleyelim. Böylelikle projemizin gerekli dosyalarının genel olarak ne işe yaradığı hakkında fikir sahibi oluruz.

İlk olarak package.json dosyamızdan başlayalım. Bu dosya Expo projemiz için gerekli bağımlılıkları, scriptleri ve metadata dosyalarını içerir. Yani projemizin şah damarı gibi düşünebilirsiniz. Dosyayı açtığınızda karşınıza nesneler içine yerleştirilmiş çeşitli özellikler ve sürüm numaraları göreceksiniz. Bunlar projemizin sağlıklı çalışabilmesi için olmazsa olmaz dosyalardır.

Bir başka dosyamız package-lock.json dosyamızdır. Bu dosya package.json dosyası oluşturulduktan sonra otomatik olarak gelir. package-json dosyamızın bir tamamlayıcısı gibi düşünebiliriz.

babel.config.js dosyası projemizdeki JavaScript kodlarını eski ve yeni cihazlarda çalışacak şekilde dönüştüren ayar dosyasıdır.

app.json, React Native projemizin adı, versiyonu gibi temel bilgilerini ve uygulamamızın nasıl davranması gerektiğini tanımlayan bir yapılandırma dosyasıdır. Burada projemiz için çeşitli konfigrasyon ayarları yer alır. Projemizi geliştirirken, gönderirken veya güncellerken burada yer alan ayarlar da değişecektir.

App.js dosyamız, projemizi ilk kurduğumuzda varsayılan taslakla karşımıza gelen ve projelerimizi geliştirirken kodlarımızın ana kaynağını oluşturacak olan dosyadır.

.gitignore dosyası, projemizdeki dosya ve klasörlerin versiyon kontrol sistemi (projedeki değişikliklerin kaydedilip, farklı sürümlerinin yönetilmesine olanak tanıyan bir sistem) tarafından dikkate alınmasını istemediğimiz öğeleri belirtmek için kullanılır. Bu, genellikle hassas bilgilerin veya gereksiz dosyaların paylaşılmamasını sağlar.

node_modules klasörü, projemizde kullanılan tüm eklentilerin ve kod parçalarının toplandığı yerdir. İlk kurulum sonrası otomatik olarak oluşuyor. Boyutu biraz yer kaplayabilir.

Son olarak assets klasörümüzde de farklı platformlar için içinde çeşitli dosyaların bulunduğu bir klasördür. Bu klasörün içinde yer alan adaptive-icon.png Android platformu için kullanılır. favicon.png dosyası eğer uygulamamızı bir web tarayıcısında çalıştırırsak tarayıcı sekmesinde gözüken görseldir. icon.png iOS platformu için geliştirilen uygulamaların ikonlarını ifade eder. splash.png ise uygulamalarımız açılırken genelde logomuzu gösterdiğimiz ekranımız için kullanılan görseli ifade eder. assets klasörümüzde genellikle uygulamalarımız için kullandığımız medya dosyalarımızı saklarız.

---

Evet, bu bölümün sonuna geldik. Bu bölümde ilk React Native projemizi oluşturduk ve kurulum sonrası karşımıza çıkan dosyalara ve klasörlere göz attık. Artık projemizi geliştirirken dosyalarımız ve klasörlerimiz hakkında genel bir fikir sahibiyiz. Başlangıçta temeli kurmamız, projelerimizin ilerleyen safhalarını daha sağlıklı kılacaktır. Bir sonraki bölümde görüşmek üzere!