React Js Kurulumu

React, Facebook tarafından geliştirilen bir JavaScript kütüphanesidir. Reaktif ve esnek web uygulamaları geliştirmek için kullanılır. React, kullanımı kolay ve hızlı bir yapı sunar. Bu yazıda, sıfırdan React kurulumunu ve ilk React projenizi nasıl oluşturabileceğinizi açıklayacağız.

React kurulumu, funduszeue.info ve npm (Node Package Manager) yüklenmiş bir bilgisayarda yapılabilir. npm, bir komut satırı araçsıdır ve React gibi birçok JavaScript paketini yönetmenize olanak tanır. npm'nin yüklenmiş olduğundan emin olun.

Eğer funduszeue.info ve npm yüklü değilse, buradan yükleyebilirsiniz: funduszeue.info

React projesi oluşturmak için aşağıdaki komutları sırasıyla kullanabilirsiniz:

İlk komut, create-react-app adlı bir araç kullanarak my-app adında bir React projesi oluşturur. İkinci komut, my-app dizinine gider. Üçüncü komut, projeyi çalıştırır ve tarayıcınızda http://localhost/ adresinde görüntüleyebilirsiniz.

React projeniz oluştu ve çalışıyor! Şimdi, React kodlarınızı yazmaya başlayabilirsiniz. React, component yapısını kullanarak uygulamalarınızı oluşturmanıza olanak tanır. Her component, bir HTML elementi veya bir grubu temsil eder. Ayrıca, componentler arasında veri akışı sağlamanıza olanak tanır.

Bu yazıda, React'in nasıl sıfırdan kurulumunu yapabileceğiniz ve ilk projenizi nasıl oluşturabileceğinizi öğrendiniz. React, hızlı ve kolay bir yapı sunar ve web uygulamalarınızı geliştirirken size yardımcı olacaktır.

Yorum yapmak için giriş yap

Online olarak katılmayı deneyin ya da local geliştirme ortamınızı oluşturun.

Online Kod Ortamı

React’i online kod ortamında denemek istiyorsanız, CodePen ya da CodeSandbox sitelerini kullanabilirsiniz.

React HTML Şablonu

Kendi text editörünüzü kullanmayı tercih ederseniz, bu HTML dosyasını indirebilir, düzenleyebilir ve tarayıcınızdaki local dosya sisteminden açabilirsiniz. Kod dönüştürmesini yavaş yapar, bu nedenle sadece öğrenme aşamasında kullanın, projeleriniz için kullanmayın.

Hızlı Başlangıç

React kavramlarına adım adım bir giriş için hızlı başlangıç bölümüne gidin.

Bir örnek üzerinden eğitim için uygulamalı eğitim bölümünü deneyin.

Geliştirme Ortamı

Yukarıdaki hafif çözümler, React’a yeni başladıysanız ya da denemek için en uygun yöntemlerdir.

React JS’i bilgisayarınıza kurup, localinizde proje geliştirmeye başlamak istiyorsanız aşağıdaki adımları inceleyin.

Not:

Olası uyumsuzluk sorunlarını önlemek için tüm React paketleri aynı sürümü kullanmalıdır. (, vs.)

NodeJS Kurulumu

NodeJS sitesine girip aşağıda görüldüğü gibi soldaki butona tıklayıp nodejs’i indiriyoruz.

Ardından klasik kurulumu tamamladıktan sonra funduszeue.info command prompt programını çalıştırıp, kurulumlarımızı bu konsol üzerinden yapacağız.

Yeni bir React projesine başlamak için en kolay yol, bir başlangıç kiti kullanmaktır.

React ekibi tarafından önerilen çeşitli başlangıç kitleri bulunmakta; Create React App, funduszeue.info, Gatsby, nwb, razzle, Neutrino. React projesi başlatmak için resmi olarak desteklenen Create React App’ı detaylı açıklayalım.

Create React App

Create React App, yeni bir React single page application’a başlamanın en iyi yoludur. Geliştirme ortamınızı, en yeni JavaScript özelliklerini kullanabilmenizi, güzel bir geliştirici deneyimi yaşamanızı ve uygulamanızı üretim için optimize etmenizi sağlar. NodeJS 6 veya daha üst sürümünün bilgisayarınızda kurulu olması gerekir (Sunucuda gerekli değildir).

Create React App’i özetlemek gerekirse bu, React uygulamaları oluşturmanız için ihtiyacınız olan birçok şeyi içerisinde barındıran bir pakettir.

İçerisine neler dahil edilmiştir?

• React, JSX, ES6, Flow syntax desteği
• Autoprefixed CSS ile otomatik olarak düzeltilen CSS’ler (-webkit veya diğer ön eklere gerek yoktur)
• Genel hatalar konusunda uyaran bir canlı geliştirme sunucusu
• Kod üzerinde yaptığımız değişiklikleri kaydettiğimiz anda arayüze yansıması için hot reloading
• JavaScript kod standartlarına uygun yazmanız için ESLint vs

İlk olarak nodejs kurup, ardından aşağıdaki adımları gerçekleştirerek ilk uygulamamızı oluşturmaya başlayalım.

Ardından adında bir proje oluşturuyoruz.

Kurulum başarılı olduğunda aşağıdaki gibi bir çıktı ile kaşılacaksınız.

Eğer npm + sürümü yüklüyse, bunun yerine npx kullanabilirsiniz.

Bu komutlar geçerli klasörde isimli bir dizin oluşturacaktır. Bu dizinin içinde, proje yapısını oluşturacak ve geçişli bağımlılıkları kuracaktır.

Projenin klasör yapısı aşağıdaki gibi olacaktır. Yapılandırma veya karmaşık klasör yapıları yok, sadece uygulamanızı oluştururken gereken dosyaları içerir.

Kurulum tamamlandıktan sonra aşağıdaki komutlar ile proje klasörünüze girebilirsiniz. Ardından ya da komutu ile projenizi localde açabilirsiniz.

Otomatik olarak localhost sayfası açılacaktır. Kodda değişiklik yaparsanız, sayfa otomatik olarak yeniden yüklenir. Konsolda ise hata uyarılarını görürsünüz. Kod yazmaya başlamak için dosyasını düzenleyin ve kaydedin.

Projeyi Build Etmek

Kodunuzu yazdınız ve sunucunuza yüklemek istiyorsunuz, o halde komutu ile üretim için gerekli klasörler hazırlanır. React’ı düzgün bir şekilde paketler ve yapıyı en iyi performans için optimize eder. CSS ve JavaScript kodlarını minified eder (sıkıştırır) ve rastgele isimlendirir.

Oluşturulan klasörünün içerisindeki dosyaları sunucunuza atarak test edebilirsiniz.

İlk Konu: React JS ile Merhaba Dünya

Dökümantasyonunda da belirtildiği üzere React, baştan sona aşamalı olarak kullanılabilecek şekilde tasarlanmıştır. Bu demek oluyor ki ihtiyaca göre az ya da daha fazla kullanmak mümkün. Var olan bir HTML sayfasına React'i entegre edebileceğimiz gibi bazı araçları da içeren geliştirme ortamının hazırlanmasıyla birlikte yeni bir tek sayfa uygulama (Single Page Application) oluşturabiliriz. Bu yazıda ile yeni bir React uygulaması oluşturmayı öğreneceğiz.

Giriş

Bir React uygulaması oluşturmak için bazı bağımlılık ve gereksinimlere ihtiyaç duyuyoruz. Bunların içerisinde hem modüler bileşenler oluşturmak için kullanılan zorunlu paketler (react, react-dom) hem de konfigürasyon dosyaları (webpack, babel) yer alıyor. Bunların hepsini ve daha fazlasını bizim için yapan bir araç olan create-react-app ile kolay ve hızlı bir şekilde bir funduszeue.info uygulaması oluşturmak mümkün. Bu araç React ekibi tarafından sunuluyor ve hem React öğrenmeye yeni başlayanlar hem de belirli ölçekte proje geliştirmek isteyenler için hazır bir iskelet yapı sağlıyor. Bu sayede Babel, webpack gibi bağımlılıkları manuel olarak konfigüre etmeye gerek kalmadan hızlıca bir funduszeue.info uygulaması geliştirmeye başlayabiliyoruz.

Hazırlık

create-react-app ile proje ortamını oluşturabilmek için bilgisayarımıza funduszeue.info kurmamız gerekiyor. Node'un yüklü olup olmadığını kontrol etmek için terminalde komutunu çalıştırabilirsiniz. Eğer Node yüklüyse bu kodu çalıştırdığınızda bir versiyon numara çıktısı görmeniz gerekir. Eğer yüklü değilse bu bağlantıdan indirip kurabilirsiniz.

Ayrıca geliştirme yapabilmek için bir kod editöre ihtiyacımız var. En çok kullanılan kod editörlerden biri olan Visual Studio Code'u ücretsiz olarak indirebilirsiniz.

funduszeue.info'i bilgisayarımıza kurduktan sonra npm de otomatik olarak yüklenmiş oluyor. npm (node package manager) bir paket yöneticisi olup funduszeue.info'ten ayrı bir projedir. Bu yüzden bilgisayarınızda funduszeue.info kurulu olsa bile bir react projesi oluşturmadan önce terminalde komutunu çalıştırarak en güncel versiyonda olduğundan emin olabilirsiniz. (macOS ve Linux kullanıcıları bu komutu çalıştırırken hata almaları durumunda komutun başına sudo ekleyerek çalıştırabilirler)

funduszeue.info kurulumunu yapıp, npm'in güncel versiyonda olduğunu kontrol ettikten sonra artık funduszeue.info uygulaması için hazır bir iskelet yapı oluşturmaya geçebiliriz. Komutu çalıştırmadan önce doğru klasör dizininde olduğumuzdan emin olmalıyız. Terminal aracılığı ile React uygulamasını oluşturmak istediğimiz dosya dizinine gitmemiz için bize gerekli olan başlıca terminal komutlarından bahsetmek gerekirse;

• pwd komutu ile bulunduğumuz dizini görüntüleyebiliriz. (MacOS ve Linux için geçerli)
• cd komutu ile uygulamanın oluşturulmasını istediğimiz klasöre gidebiliriz.
• mkdir komutu ile yeni bir klasör oluşturabiliriz.

Ayrıca terminali/komut istemini ilk başlattığınızda;

• Windows kullanıcıları: 
• MacOS kullanıcıları: 
• Linux kullanıcıları: 

klasör dizininde olduğumuzu unutmamalıyız.

Bu gibi kavramlara uzaksanız. Kendi işletim sisteminizde terminal komutlarıyla ilgili aramalar yapmanızı tavsiye ederiz.

Projeyi Oluşturma: create-react-app

Bir React projesi oluşturmanın en kolay yöntemlerinden biri olan create-react-app ile projemizi oluşturabiliriz.

komutunu kullanarak bulunduğumuz klasör dizininde bir funduszeue.info uygulaması oluşturabiliriz. (Unutmayın eğer terminal içerisinde yerinizi değiştirmediyseniz yukarıda yazdığımız klasörün altında oluşacak.)

Not: Burada kullandığımız npx npm + ile gelen bir paket çalıştırma aracıdır.

Burada ilk-uygulama, uygulamaya vermek istediğimiz isimdir. Bunun yerine istediğiniz uygulama ismini verebilirsiniz (büyük harf içermediği sürece).

Komutu çalıştırdıktan sonra bazı ufak ipuçlarının da olduğu böyle bir çıktı ile karşılaşacaksınız. Bu demek oluyor ki funduszeue.info uygulaması sağlıklı bir şekilde oluşturuldu ve geliştirme ortamı hazırlandı. Burada start, run build, test ve run eject olmak üzere 4 adet script ismi görüyoruz. Biz create-react-app'in bize sağlamış olduğu start scriptini kullanarak projemizi localhost üzerinde çalıştıracağız.

komutlarını çalıştırdıktan sonra geliştirme web sunucusu başlatılmış olacak ve projemiz numaralı port üzerinde çalışıyor olacak.

Otomatik olarak açılan tarayıcı ile http://localhost/ adresinden projenin çalışıyor olduğunu aşağıdaki çıktı eşliğinde görebileceğiz.

Buradan da anlaşılabileceği üzere App adında bir bileşeni görüntülüyoruz. Bileşenleri (component) React'in yapı taşları olarak düşünebiliriz. Dolayısıyla bir bileşen aslında bir JavaScript sınıfı (class) ya da fonksiyonudur. Bir React uygulaması tasarımına bağlı olarak birkaç ya da binlerce bileşenin bir araya gelmesiyle oluşabilir. Tasarım ilkelerine göre bu sayının çok fazla büyüyebileceğini söyleyebiliriz.

Not: React ekibi Facebook'da 50 binden fazla bileşen kullanıldığını söylüyor.

Create React App içerisinde sunulan bazı özellikler:

• Hot reloading: kod üzerindeki değişikleri kaydettikten sonra uygulamayı baştan başlatmadan değişikliklerin arayüze yansıması
• ESLint: kodun belirli standartlara göre yazılmasını sağlayan modül
• Canlı ortam (production) için kodun optimize edilmesi (build scripti aracılığıyla)

Klasör Yapısı

create-react-app ile bir React uygulaması oluşturduğumuzda yukarıdaki gibi bir klasör yapısına sahip oluyoruz. Burada src klasörü altında olan funduszeue.info ekranda gösterilen bileşen, funduszeue.info React uygulamasının başlangıç noktasıdır. funduszeue.info bütün React uygulamasının nerede render edileceğini belirler. Bu dosyaya gidip incelediğimizde id ile belirtilmiş bir HTML etiketine bütün uygulamanın render edileceğini görebiliriz. public klasörü altında funduszeue.info'e gittiğimizde ise bu bahsettiğimiz id'li etiketini görebiliriz.

public/: Bu klasör React uygulamamızın static asset'lerini içeriyor. (funduszeue.info gibi)

src/: Bu klasör React uygulamamızın JavaScript dosyalarını içeriyor. Burada bütün uygulamanın başlangıç noktası olan funduszeue.info ve App adlı bileşeni (component) içeriyor.

node_modules/: Bu klasör içerisinde projenin bütün bağımlılıkları (funduszeue.info Paket Yöneticisi - npm kullanılarak indirilen paketler) yer alıyor.

funduszeue.info: Bu dosya bir tür manifest dosyasıdır. Projenin ismini, versiyonunu, manuel scriptleri ve projeye dahil edilen bütün paketlerin listesini (versiyonlarıyla birlikte) içerir. funduszeue.info dosyası ise her paketin birebir sürümlendirilmiş bağımlılık ağacını tutar. Böylece diğer geliştiriciler ve proje sürümleri için garanti edilmiş versiyonlar saklanır.

.gitignore: Bu dosya sayesinde istenmeyen uzantıdaki ve dizindeki dosyaların takip edilmesini engellemiş oluruz. Böylece git sunucularına göndermek istemediğimiz dosyalar takip edilmez. create-react-app ile node_modules klasörü altındaki paketler ve build klasörü .gitignore içerisinde belirtilmiş olarak gelir.

Uygulamayı geliştirme aşamasında start script'ini kullanarak sunucuyu başlatmaktan ve uygulamanın ayağa kaldırılmasından bahsetmiştik. create-react-app'in sunmuş olduğu bir diğer önemli script ise build. React modüler bir yapı sunuyor ve birçok bileşenden oluşan uygulamalar ortaya çıkıyor. Build scripti oluşturulan bütün ayrı bileşenleri birleştirilip küçültülüyor ve optimize hale getiriyor. Bu sayede canlı ortama (production) alınabilecek bir uygulamaya sahip oluyoruz.

Kaynaklar