0:01 Merhaba arkadaşlar 2ci dersimizde yeni bir reag native projesi nasıl oluşturulur oluşturduğumuz projeyi nasıl ön izleme yaparız Bu amaçla kullanılacak alternatif yöntemler nelerdir bunları ele alacağız öncelikli olarak ne yapıyorum arkadaşlar vs kod uygulamamızı başlatıyoruz vs kod uygulamamızı açtıktan sonra Arkadaşlar şimdi Proje dosyamızı oluşturmamız veya proje dosyamızı açmamız gerekiyor Open folder seçeneğine geldim Şimdilik masa üstünde proje dosyalarımı saklayacağım Bu amaçla yeni bir klasör
0:49 oluşturuyorum buna diyorum ki re Bu arada verdiğiniz İsimlerde hatta kendi kullanıcını ait ol islerde arkadaşlar Türkçe karakter kullanmamaya Özen gösterin boşluk Türkçe karakter bu tarz şeylerden kaçınmanız öneriyorum arkadaşlar react native projects dedim bu klasörü seçtim şurada gördüğünüz gibi Ana klasörüm bu oldu ve Buradaki tüm belgelere güvendiğimi de belirttim ana klasörüm bundan sonra oluşturacağım projeler bu ana klasör içerisinde gerçekleşecek Arkadaşlar her bir proje için ayrı birer klasör oluşturabileceğiniz gibi Tabii ki ben Ana bir klasör oluşturdum bunun içerisine farklı projeler oluşturarak devam edebilirim diye
1:36 düşündüm devamında ne yapıyoruz Arkadaşlar bir terminal açıyoruz Powell yerine Command prom tercih ediyorum ben powde bir düzenleme yapmamız gerekiyor bazen bu düzenleme yapılmadığı zaman bazı hatalar veriyor Evet şöyle konumumuza bakıyoruz re Project yani ana klasörüm oluşturduğumuz klasörün iç de yiz Peki şu an proje oluşturmaya hazırım react native ile react native projesini nasıl oluşturuyoruz expo'yu kurmuştuk Expo versiyonunu kontrol etmiştik Eğer Expo kurulu ise arkadaşlar ne yapıyoruz Expo init ve proje ismimizi buraya yazarak başlatıyoruz ilk projemizi E buna da ne diyelim arkadaşlar re
2:21 native proje şeklinde E bir isim verdim farklı farklı proje dosyaları oluşturmak yerine tüm uygulamaları tek bir projede göstermeye çalışacağım farklı sayfalar oluşturarak Bu yüzden farklı isim vermiyorum arkadaşlar ilk ders ikin ders gibi isimler vermiyorum Sizler kendi uygulamalarınızda değiştirebilirsiniz ve enter'a basarak bekliyorum burada bize alternatif seçenekleri sunuyor gördüğünüz gibi bilen ile devam ediyoruz bakın şurada solda klasörüm oluştu proje klasörüm ve alt kısmında da gerekli dosyalar ve klasörler tekrar oluşturuluyor arkadaşlar tamamlanmasını
3:24 bekliyoruz Evet şu an projemiz oluşturuldu peki projemizi ön izleme yapabilmek için ne yapmamız gerekiyor Öncelikle proje klasörünün içerisine geçiş yapmamız gerekiyor Bunun için de CD change director ve projemizin adı yazıyoruz RN proje Bu projenin içerisine bu klasörün içerisine geçiş yapmamız gerekiyor ve enter'a basıyorum şu an gördüğünüz gibi konumumuz artık daha doğru yani şu an için artık proje klasörüm yerleşmiş durumdayız Peki ön izleme için yazmamız gereken komut nedir Arkadaşlar npx Expo Start yazıyoruz burada farklı önizleme yöntemleri var Bunlardan bahsedeceğiz
4:10 arkadaşlar ilk olarak şundan bahsetmek istiyorum kare kodu görüyorsunuz kare kodla ne yapabiliriz kar kodla şunu yapabiliriz arkadaşlar Google Play'de Expo expo'nun uygulaması var Hemen onu da şöyle göstereyim Google Play diyerek açalım playde Arkadaşlar gördüğünüz gibi Expo Go olmak üzere logosu bu expo'nun uygulaması var bu uygulamayı telefonunuza yükleyebilirsiniz bu uygulamayı telefon telefonunuza yüklediğinizde karakot okutma kısmı çıkıyor arkadaşlar buradaki kare kodu okutarak E projenizin ön izlemesini kendi Telefonunuzda açabilirsiniz bu birinci yöntem ikinci yönteme gelelim web'de ön
4:56 izleme yapabilirsiniz yani web browser web tarayıcımda bunu ön izleme yapabiliriz Bakın Şu an pasif durumda yalnız diğerlerine göre soluk şöyle bir şey yapıyoruz burada da wya basıyorsunuz wya bastığınızda sizden bu projeye bir eklenti yüklemenizi istiyor şurada Bakın bu kod ile bu kodu seçiyorum kopyala diyorum bakın tekrar gösterdim seçtim kopyala dedim kopyala dedikten sonra yeni bir Command Pr açabilirsiniz bu yeni Command tekrar proje klasörünüze yerleşerek bak yerleşerek kopyaladığınız kodu basıp enter diyoruz ve proje klasörüm bu yüklemenin gerçekleşmesini sağlıyoruz arkadaşlar npm instal yoluyla bakın kurulum tamamlandı not kısmına tekrar
5:43 geldim Burada tekrar wya bastım bu sefer ve ön izlemenin Açılmasını bekliyorum şu an tam çalışmadı Şöyle yapalım arkadaşlar sunucumu durdurdum ve sunucumu tekrar çalıştırıyorum şimdi sunucuyu neyle durdurduk tabii Onu da söyleyelim Ctrl C yani sunucu yayındayken ctl C'ye basarsanız sunucunuzu durdurur Şimdi tekrar npx Expo Start ile Sunucunun başlamasını sağladım Bakın bu sefer w kısmı Eee daha koyu ve bu nedenle aktif olarak doğrudan çalışacaktır wya bastım projenin Açılmasını bekliyorum şunu Kapattım bu yazıyı gördüyseniz şu an ana sayfayı görüntülüyorsunuz demektir Çünkü ana sayfamız bizim epp njs şu an ve aynı yazı burada
6:30 mevcut eppc şu an ana sayfa lakin biz bunu ilerleyen derslerimizde ne olarak kullanacağız arkadaşlar yönlendirme Bir danışma merkezi gibi kullanacağız e linklerimiz yönlendirmesini epp JS üzerinden gerçekleştireceğiz arkadaşlar 3ün yöntemimiz gelelim şimdi 3 yöntemimiz ise Android cihaz üzerinde görüntüleme A'ya basarak Arkadaşlar bunun içinde Biraz önce kurulumunu gerçekleştir Daha doğrusu Bir önceki dersimizde kurulumunu gerçekleştirdiğimiz Android studyo uygulamasına ihtiyacımız var burada Android studioyu başlatıyorum yalnız direkt New Project veya Open değil ne demiştik More actions sanal cihaz yöneticisi viral device manager'
7:16 tıklıyoruz ve Şuradaki başlat Start seçeneğine basıyoruz demiştim sanal cihazımızın başlamasını bekliyoruz arkadaşlar Evet biraz daha bekliyoruz Evet başlata tıkladıktan sonra Android stud Cihazımız başlıyor gördüğünüz gibi şurada biraz büyük görünebilir şöyle küçültüyor ve sağ
8:03 tarafa alıyorum arkadaşlar şunları alta atabilirsiniz Cihazımız başlatılıyor şimdi web dön üz demiştik Biraz önce Cihazımız başlatıldığında ise A tuşuna basarak Android bir cihazda sanal bir Android cihazda nasıl ön izleyeceğimizi göreceğiz arkadaşlar ve sonucunu göreceğiz cihazımızın Açılmasını bekliyorum Evet Cihazımız açıldıktan sonra burada ekrana tıklıyorum ve a tuşuna basıyorum opening Android şu an bizim Android cihazımıza Expo Go
8:48 uygulaması yükleniyor Expo Go uygulaması yüklendikten sonra bu Expo Go uygulaması üzerinden ön izlemeyi gerçekleştireceğiz aynı gerçek Cihazımız da ön izleme yapabilmek için kare kodu okutarak Expo Go uygulamasına ihtiyacımız vardı burada da Expo Go yükleniyor Arkadaşlar bu sebeple şu an kurulumu gerçekleştiriliyor bir süre daha bekliyorum Evet açılmaya başladı uygulamamız yükleniyor şu an Bundle ediliyor
9:36 gördüğünüz gibi Open up epp JS yazısı karşımıza çıktı buradaki yazının aynısı arkadaşlar Dolayısıyla Android Cihazımız ön izleme işlemini gerçekleştirebiliyoruz burada yaptığımız değişiklik kaydetmek şartıyla Tabii ki değişikliği gerçekleştirdim şur kayıtlı olmadığını gösterir ctls basarak kaydettim bakın gitti Nokta anında buraya sanal cihazımıza yansıyacaktır Arkadaşlar gördüğünüz üzere Bu da ilk projemiz ve projemizi başlatma kısmıydı E şimdi burada bir iki örnek yaparım açmışken mesela arkadaşlar buradan bahsetmek gerekirse arayüzden
10:22 Şimdi biz sayfalar oluşturacağız Her sayfada da bu yapıyı kullanacağız gördüğünüz gibi import edilecek yapılar Ark ında e altında bir Java Script jsx kodlama yöntemi e ekranda nelerin görüneceğini belirliyoruz şu alt kısımda da html' dei web tasarımı dersinde görünen CSS yapısına benzer bir şekilde biçimlendirme özellikleri mevcut arkadaşlar Peki biz buraya yazdığımız bir biçimlendirme yapısını yukarıda nasıl kullanıyoruz ondan da bahsedelim Mesela şurada gördüğünüz gibi bir vivo oluşturulmuş Bu viv web tasarımındaki arkadaşlar html' Deek div' karşılık geliyor olarak düşünebilirsiniz Eee vie Style çağırmış ve bunu nereden Styles
11:09 ncan getir demiş aşağı indiğimizde bunu görüyoruz zaten bakın Styles diye bir ne var Yapı var bu yapının içerisinde bir stil var Steel sheit var ve konteyner ismi de buradan geliyor arkadaşlar Eee bu ne yapmış arkadaşlar arka planı beyaz yapmış ve öğeleri ortaya yatayda ve dikeyde ortaya hizalam Biz de mesela Örnek olsun diye Merhaba re yazımıza bu biçimlendirme yöntemini verelim Style eş dedikten sonra süslü parantezim açıyoruz sty buraya bir isim veriyoruz Metin başlık başlık diye bir isim verdiğimi düşünelim Arkadaşlar şimdi bu alt kısımda şurada virgülden
11:56 sonra yaı noktamı parantezim açarak burada biçimlendirme işlemini gerçekleştirebiliyoruz bakın E bana öneriler geliyor font size 2.24 virgül Color 2. Red seçeneğini seçmiş Olum yine kaydetmem gerekiyor unutmayın kaydettim ve gitti şimdi uygulamamızı açalım şuradan uygulamamıza tekrar gönderelim ya da open Android diyerek A harfine bastım veya reload diyebilirsiniz arkadaşlar h Red ne diyor Red bu şekilde yazılmaz diye uyarı verdi yani mevcut değil dedi arkadaşlar ne yapıyoruz bunu tırnak içerisine alıyoruz Ve kaydediyoruz kaydettiğimizde kendisi direkt
12:41 gönderiyor arkadaşlar hemen şuradan tekrar yükleme yaptıralım Evet tekrar yükleme yapıldığında şeyi görüyoruz biçimlendirin gerçekleş görüyoruz Bu şekilde bir harici CSS yöntemi ile kullanıyormuş ve çağırıyormuş gibi Eee aşağıda belirttiğimiz biçimlendirmeleri burada çağırarak kullanabiliriz Peki yeni bir metin ekleyelim buradaki text ise Eee arkadaşlar web tasarımında Daha doğrusu html' dei p paragraf p etiketi olarak düşünebilirsiniz yeni bir metin ekleyim react native derslerimize
13:30 Hoş geldiniz bir yazı yazdım Şimdi bir de arkadaşlar CSS şunu biliyoruz yerel CSS dediğimiz inline CSS yöntemi vardı arkadaşlar burada yerel CSS yazabilir miyiz Tabii ki yazabiliriz şöyle yapıyoruz bunun içinde Style eş bu sefer çift parantez açıyoruz arkadaşlar çift parantezin içerisine direkt ne yapmak istiyorsak biçimlendirme olarak bunları yazarak Uz arlar 2 Blue şeklinde mesela burada ne dedik 18 Punto büyüklüğünde olsun ve mavi olsun dedik 2 seçeneğimiz bakıyoruz bakın mavi ve 18 Punto büyüklüğüne geldi bu bizim
14:17 bildiğimiz CSS TKİ çağırma yöntemlerimiz benzer bir yöntem Eğer yerel olarak Dokunuş yapacaksak çift parantez içerisinde direkt özelliklerimizi belirtiyoruz ya da ne yapıyoruz dahili c olduğu gibi aynı belge içerisinden başka bir yerden çağıracaksın Arkadaşlar bu şekilde Style eşit tek süslü parantez Styles nokta verdiğimiz isim ile aşağıdan çağırıyoruz ilk projemizi gerçekleştirdik Arkadaşlar şimdi Eee bu dersimizi burada tamamlıyorum Bundan sonraki süreçte ne yapacağız bir sonraki dersimizde react native de sayfalar arası geçiş işlemi için neler yapmalıyız ve sayfalar arası geçişi nasıl gerçekleştiririz bundan bahsedeceğiz görüşmek üzere hepinize
15:02 Kolay gelsin arkadaşlar
