React ile uygulama geliştirmeye başlayacağınızda kendi yapınızı oluşturup, gerekli bileşenleri eklemek yerine hazır yapı ve çalışan bir uygulama ile daha rahat olacaktır. Bu konuda bize yardımcı olacak kütüphane ise create-react-app kütüphanesidir.
Facebook / React tarafından geliştirilmiş resmi bir uygulamadır. Kullanımı basitir. Uygulama geliştirmemizi oldukça rahat bir hale getirir.
Bu Yazıda Hangi Konuları İşleyeceğiz?
Bu yazımızda React JS ile uygulama çatısı oluşturan create-react-app hakkında aşağıdaki sorulara cevap arayacağız.
- create-react-app Nedir?
- Kullanmak İçin Neler Gerekli?
- Neden create-react-app kullanmak gerekir?
- Nasıl çalışır?
- Oluşturulan uygulama nasıl çalıştırılır?
- Dosya yapısı nasıldır?
- Uygulamayı geliştirmek için neler yapılmalı?
- create-react-app ile gelen komutlar nelerdir?
Ve adım adım bir React JS uygulaması nasıl geliştirilir inceleyeceğiz.
create-react-app Nedir?
React-create-app React JS ile uygulama geliştirirken, çalışır bir uygulama çatısı oluşturan bir JavaScript paketidir. React geliştiricileri tarafından geliştirilip kullanıma sunulmuştur. Uygulama geliştirme başlangıç aşamasını son derece kolaylaştırır.
create-react-app Kullanmak İçin Neler Gerekli?
Uygulama geliştirme ortamınızı kurmanız için Node JS sürüm 14 ve yukarısı, Npm paket yöneticisi sürüm 5.2 ve yukarısı yeterli olacaktır. Uygulama geliştirmeya başlamak için Yarn paket yöneticisi de kullanılabilir.
Neden create-react-app Kullanmak Gerekir?
React ile bir uygulama geliştirmek için, gerekli paket ve paket yöneticilerinin ayarlanması ve sayfa yapısının oluşturulması gerekir. Bu ön hazırlıkla uğraşmadan, standart ve optimize edilmiş çalışan bir uygulama çatısı ile başlayabilmek için bu paketi kullanıyoruz.
Geliştiricilerinin de React’i geliştiren kişiler olması ayrıca önemlidir. Sadece ihtiyacımız olan dosya ve klasörlerden oluşan basit bir yapı oluşturulur.
Yeni Bir React Uygulama Çatısı Nasıl Oluşturulur?
Create-react-app ile yeni bir uygulama geliştirmeye başlayacaksanız, bilgisayarınızda Node Js ve Npm paket yöneticisi kurulmuş olmalıdır.
Eğer bu paketler kurulu değilse önce Node JSyi sayfasından yükleyerek sisteminize kurmanız gerekiyor. Node JS sayfasında kendi işletim sistemine uygun olan dosyayı bilgisayarınıza indirin ve sayfadaki açıklamalara göre sisteminize kurun.
Yüklemeyi yatığınızda Npm Paket Yöneticisi de sisteme kurulmuş olacaktır. Bunu test etmek için komut satırına önce
node -v
Node JS sürümünü denetlememiz gerekidir. Eğer node kurlu ise v16.16.0 şeklinde sürüm numarası ekrana basılır. Aynı işlemi Npm için de yapmak gerekiyor.
npm -v
Eğer Npm bilgisayarda kurulu ise 8.11.0 şeklinde versiyon numarasını ekranda görebilirsiniz.
create-react-app İle Uygulama Oluşturma
Bir React projesini ayağa kaldırmak. İlk olarak komut satırını açalım. Sonrasında uygulamamızı oluşturacağımız dizine gelelim veya komut satırından bu dizini oluşturalım. Komut satırından istediğimiz klasöre geldiğimize göre artık create-react-app ile çalışmaya başlayabiliriz.
npx create-react-app my-app
Şeklinde bir komut vererek my-app isminde bir uygulama başlatabiliriz. Burada my-app yerine istediğiniz başka bir ismi de verebilirsiniz. Komut satırına bu ifadeleri yazdıktan sonra enter diyerek çalıştıralım.
Bir süre uygulama çalışarak bir çok işlemi sizin için yapacaktır. İşlem bittiğinde my-app klasöründe yeni uygulamanıza ait dosya ve klasörleri göreceksiniz.
Uygulamamız bizim için oluşturulduğuna göre onu çalıştırarak sonucunu da görebiliriz. Bunun için önce
cd my-app
diyerek uygulamamızın oluşturulduğu klasöre girelim ve ardından
npm start
komutu ile uygulamamızı başlatalım. Herşey doğru gittiyse uygulama başlatılacak ve ön tanımlı tarayıcınızdan uygulamanız açılacaktır. Ayrıca http://localhost:3000 adresinden de uygulamanıza ulaşabilirsiniz.
Bu noktada uygulamanın geliştirici versiyonu görüntülenecektir. Uygulama tamamlandığında build işlemi yapılarak canlıya çıkarılabilir.
Not: npx create-react-app . şeklinde, uygulama ismi vermeden sadece bir nokta (.) koyarak create-react-app çalıştırılırsa, bulunulan dizin adı uygulamaya verilecek ve o dizin içerinde uygulama dosyaları oluşturulacaktır.
create-react-app İle Gelen Komutlar
Create-react-app ile bir uygulama oluşturduysanız bu uygulama içerisinde kullanabileceğiniz bazı komutlarda sizin için hazırlanır. Bunlar sırasıyla:
- npm start uygulamayı başlatır.
- npm test uygulama testini çalıştırır.
- npm run build uygulamayı build ederek kullanıma hazır hale getirir.
Oluşturulan Klasör Yapısı
create-react-app ile bir uygulama oluşturduğumuzda uygulama dosyaları uygulama ismi ile oluşturulan klasöre yerleştirilir. Bu klasör içerisindeki bulunan
- puclic/index.js JavaScript için bir giriş noktasıdır.
- src/index.html websayfa temasıdır. Uygulamanın html çatısını oluşturacaktır.
App olarak isimlendirilen ana React komponenti src/App.js içerisinde tanımlanmış olarak bulunmaktadır. Bu dosya üzerinde işlem yaparak uygulamamızı düzenlemeye başlayabiliriz.
src/App.css içerisinde uygulamanın genel sitil tanımları bulunmaktadır. İstediğiniz sitil düzenlemelerini burada yapabilirsiniz.
src klasörü içerisinde istediğiniz js, css dosyalarını ve gerek gördüğünüzde alt klasörler oluşturabilirsiniz. Uygulama çalıştırılırken src içerisindeki dosyalar kullanılacaktır.
index.html dosyası sadece public klasöründeki dosyalara erişebilmektedir.
Son Sözler
React ile uygulama geliştirecekseniz, uygulamanızı hızlı bir şekilde ayağa kaldırmak için create-react-app ‘den faydalanabilirsiniz. Basit ve hızlı bir şekilde sizin için çalışan bir React uygulama çatısı oluşturacaktır. Bunun üzerinden geliştirmenizi rahatlıkla yapabilirsiniz.
Sizin de eklemek istedikleriniz veya sorularınız varsa yorum bölümünden bize yazabilirsiniz.