KURULUM
1. Visual Studio Code’ u indir ve kur.
2. [Link] indir ve kur.
3. Yarn indir ve kur. (Bu npm’in yerine kullanacağımız paket yöneticisi)
[Link] KOMUTLARINI YÖNETME
Proje dışından [Link] command prompt ile yapılabilir. Ya da Visual Studio Code ile Terminal açılarak
yapılabilir.
YENİ BİR UYGULAMA OLUŞTURMA
Nodejs command prompt üzerinde cd ile istediğimiz klasöre ayarlar ve aşağıdaki kod ile oluştururuz.
Burada my-app ifadesi bizim projemize vereceğimiz isimdir.
yarn create react-app my-app
Uygulamamızda standart react js yerine typescript yazacaksak o halde aşağıdaki gibi oluştururuz.
npx create-react-app my-app --template typescript
VISUAL STUDIO CODE İLE UYGULAMA AÇMA
File > Open Folder > Uygulamamızın ana klasörünü seçiyoruz. Klasör Seç butonuna tıklıyoruz.
START, TEST VE RUN-BUILD KOMUTLARI
Start: Uygulamayı geliştirme modunda çalıştırır. Tarayıcıda görüntülemek için [Link]
dosyasını açın. Kodda değişiklik yaparsanız sayfa otomatik olarak yeniden yüklenir. Konsolda derleme
hatalarını ve tiftik uyarılarını göreceksiniz.
yarn start
Test:
Run-Build:
TERMINAL’İ KULLANMA
Visual Studio üzerinde; Terminal > New Terminal ile açarız. Burada varsayılan terminal
seçeneklerimiz; powershell, command prompt, javascript debug ve split terminaldir.
Ek: Git Bash yüklenirse, terminal onunlada kullanılabilir.
Not: Bazen yarn’ı görmedi gibi bir hata ekranı çıkabilir. Yarn’ın yüklü olduğundan eminsek vscode u
kapatıp açmak bu sorunu çözebilir.
JSX
JSX, react’ı sağlıklı bir şekilde kullanmamızı sağlayan yazımla alakalı bir view engine gibidir. JSX ile
html ve js kodları birarada yazılabilir.
ELEMENTLER
React’ın ve bileşenlerin en küçük yapı taşlarıdır. Const ile tanımlanır. Js veya html içerebilir. Değişken
içerebilir.
BİLEŞENLER VE PROPLAR
Bileşenler (component) en basit haliyle fonksiyonlarla oluşturulur. Değer olarak Props alır, React
element döner. Bileşen adları her zaman Büyük harfle başlar. Büyük harfle başlamayan bileşenler
React tarafından html tag i gibi algılanabilir.
Proplar salt okunurdur. Fonksiyon içine giren prop’lar işlemler sırasında değiştirilmemelidir.
İçerdikleri değer aynı kalmalıdır.
CLASS VE STATE
Kendi kendini render eden bileşenler için state eklemek gerekir. State prop’a benzer ancak bileşene
özeldir, yani yerel bir değişkendir. Bir bileşenin state alabilmesi için fonksiyon olarak değil, sınıf olarka
tanımlanması gerekir.
State’ler asenkron çalışır, yani state güncelleme işleminin hemen arkasından yeni değerlerle bir işlem
yapmak istiyorsak (db ye yazdırmak, console’a yazdırmak gibi) bu işlemi callback methodu ile
yazmamız gerekir yoksa eski değerleri görürüz.
EĞİTİM VİDEOLARI
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
aAVfrTPXll&index=8
[Link]
[Link]
index=1