KURULUM

1. Visual Studio Code’ u indir ve kur.

2. Node.js indir ve kur.
3. Yarn indir ve kur. (Bu npm’in yerine kullanacağımız paket yöneticisi)

NODE.JS KOMUTLARINI YÖNETME

Proje dışından node.js 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 http://localhost:3000

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

https://www.youtube.com/watch?v=lNfBlYAk3Lw&list=PLIHume2cwmHeydP0GkOzSxJHT1ph1BrWj

https://www.youtube.com/watch?v=jig4GPO7OTo&list=PL-Hkw4CrSVq_eyixSZ4sVI1x6d7akLpsy

https://www.youtube.com/watch?v=iwT-Zo6YUH0&list=PL-Hkw4CrSVq_mu7YEyg91-qTCR6YXeOrd

https://www.youtube.com/watch?v=tJNltOn-2Yg&list=PLfAfrKyDRWrEkpnC6STed0iVBBZzw5mGj

https://www.youtube.com/watch?v=5f1aXo24SMM

https://www.youtube.com/watch?v=TQ_eyMlu7l0&list=PL8IHDq7oEkgHFrd0IW1JWoEoc9G2_eXTJ

https://www.youtube.com/watch?v=Iz9GSRLKbAk&list=PL8IHDq7oEkgEhP0jVBmc3R9qKy7sd9Vfa

https://www.youtube.com/watch?v=K67LrvuLiUM&list=PL8IHDq7oEkgFbkISL6q10N_lfrCFovNE1

https://www.youtube.com/watch?v=lQgktwqKTdg&list=PL-ohrY_IyV4CUNsDxXDkdT-
aAVfrTPXll&index=8

https://www.youtube.com/watch?v=F9F6PmJN6gE
https://www.youtube.com/watch?v=Y7UBCxlyNLE&list=PLeS6o5hW3TG_S7QeCa9_vfq3HazLpo3eA&
index=1