Visual Studio Code ile İlk React Uygulaması!

React’tan ve biraz da yancılardan bahsettikten sonra artık uygulama geliştirmek için ortamımızı hazırlayalım.

1. NODE.JS

İlk olarak https://nodejs.org/en/ sitesinden, node.js’i indirip kurulumunu yapın. Nasıl ki asp.net uygulamaları IIS üzerinde çalışıyor, php uygulamaları wordpress vs. Apache server üzerinde çalışıyor, React uygulamalarımız da Node.js üzerinde çalışacak.

Biliyorsunuz javascript hızlı ve akışkan bir dil. Java veya C# gibi ağar bir dil değil. C gibi az bilinen bir dil de değil, hemen hemen web ile uğraşan herkes az çok javascript kodu yazmıştır. işte bunları göz önünde bulunduran Ryan Dahl abimiz diyorki, arkadaş ben bu güzel javascript dili ile ne diye sadece web yazayım. Ne güzel çalışıyor. Chromium dediğimiz açık kaynak browser ise en güzel çalıştığı yer. (Google chrome ve yandex tarayıcıları Chromium üzerine yazılmıştır.) Alıyor Chromium’un javacsript’i bilen kısımlarını (V8 motoru), bağımsızlaştırıyor, normal bilgisayarlarda çalışır hale getiriyor. Artık biz bu node.js’i kurduğumuzda artık back-end kodları geliştirebiliyoruz.

Öyleki, artık Microsoft ve birçok büyük firma bu oluşumlara destek veriyor. Mesela birazdan kuracağımız vscode, node.js ile yapılmış. Yahu Microsoft’un elinde bin türlü teknoloji var ne diye Node.js ile yapsın diyebilirsiniz. Çünkü bu alet bütün ortamlarda çalışıyor. Yani windows olsun, Linux olsun, Mac olsun, her türlü serverda zahmetsizce çalışıyor. Microsoft’un C#’ı sadece Windows bilgisayarlarda çalışıyor. Şimdi .Net Core güzel gidiyor ama oda daha yeni. Hala stabil olsun diye uğraşıyorlar. Oracle falan desteklemiyor. ozaman vscode’u indirip inceleyelim.

2. VISUAL STUDIO CODE

Visual studio code, arayüzü electron ile geliştirilmiş, yani bildiğiniz javascript-html-css ile geliştirlmiş.

İnanmadınız mı?

Editör’e bir bakın hele. tıkla

Benziyor değilmi. Benzemiyor aslında ta kendisi :)

Elektron dediğin şey, bildiğin chrome. Ama masaüstü uygulaması olarak geliştirebiliyorsun, böylece harddisklere vs erişebiliyorsunuz. Tam emin değilim ama spotify’ın masa üstü uygulaması’da electron ile geliştirilmiş gibi bir his var içimde. Çok güzel uygulama.

VİSUAL STUDİO vs VSCODE

Arkadaşlar, Visual Studio bir efsane. IDE’lerin şahı, bir .net’ci olarak bende başka birşeyde uygulama geliştireceğimi düşünmüyordum hiç. Bir sürü ide denedim, ama tartışmasız en gelişmiş IDE, Visual Studio.

React ile vs. bende ilk tanıştığımda, Visual Studio ile yapmaya çalıştım herşeyi, vscode’u böyle bir küçümsedim, dedim bunlamı geliştireceğim nasıl olacak falan.

Ancak, hiç boşuna zorlamayın, Visual Studio, bu işler için değil. Javscript uygulamalar için, daha lightweight birşeyler lazım. Visual Studio ile gerekli ayarları yapmak ölümden beter, ve birçok fonksiyonundan yararlanamıyorsunuz.

Eğer sizde best practice’lere güvenen bir yazılımcı iseniz, hiç klasik Visual Studio ile boşuna zaman kaybetmeyin. Visual Studio, C# ile güzel.

Ki artık .net core için bile vscode kullanılmaya başlıyor yavaş yavaş.

Dünya Lightweight istiyor.

Buradan da vscode’un github reposuna ulaşabilirsiniz. Sürekli gelişiyor durduramıyoruz.

Linkten hemen çabuk çabuk kurulumu yapıp gelin butarafa geri.

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…

code.visualstudio.com

Sağ kısım bildiğiniz editör. Kodu buraya yazacağız. Solda dosyalar vs. var. En soldaki frame’de,

1. kısım dosyaları göteriyor,

2. kısım ikondan anlaşılacağı üzere arama yapıyorsunuz,

3. kısım git entegrasyonu. Bu kısım benim çok hoşuma gitti. git işlemlerinizi çok seri bir şekilde yapabiliyorsunuz.

4. kısım debugger, bazı ayarlar yapıp kodlarınızı trace edebiliyorsunuz.

5. kısım ise uzantılar. vscode’u istediğiniz şekle getirebilmenin yolları. gerçekten çok güzel uzantılar var. Bunlardan bahsedeceğiz.

Üst menude, File->Preferences ->Settings

Bu kısımda vscode ayarları var. Karşınıza 2 parçalı bir ekran geliyor. sol taraftaki kodlar, vscode’un default ayarları. sağ tarafta ise sizin ayarlarınız var.

{
 “window.zoomLevel”: 2,
}

Mesela bu kodu sağ tarafa yapıştırın ve kaydedin.

Çaktınız köfteyi değil mi ? :) Tamam şimdi ctrl+z yapıp tekrar kaydedin. İşte buradan vscode’u kendimize göre şekillendireceğiz.

Buranın kullanımı şu şekilde, sol taraftaki defaul ayarı kopyalıyorsunuz, sağ tarafta json olarak yapıştırıp, değeri değiştiriyorsunuz.

Mesela yazı tipi “editor.fontFamily”: “Consolas, ‘Courier New’, monospace”, bu şekilde tanımlı. bunu alıp sol tarafa, süslü parantezin içine “editor.fontFamily”:'Arial' şeklinde yazarsanız, artık editörlerdeki yazı tipiniz arial olur. basit. bütün ayarları değiştirebilirsiniz isterseniz. Bu konuda vscode inanılmaz esnek bir yapı sunuyor.

ctrl + k + s

eğer son sürüm yüklü ise, sol alt taraftaki ayarlar’dan keyboard shortcuts ile bütün kısayolları görebilirsiniz. Hatta keyfinize göre değiştirebilirsiniz de.

Şunu yapıştıralım. Yani diyoruzki, terminal olarak powershell çalıştır.

ctrl + “

(control çift tırnak) veya view->integrated terminal.

Terminalimizi açtık. .Netçiler buna biraz zor alışacak ama bu işlerin neredeyse tamamını komut satırı üzerinden götüreceğiz. Kusura bakmayın :)

şimdi sırası ile aşağıdaki komutları yazın entera basın.

c: 
mkdir deneme
npm initsonra hepsine enter

şimdi open folder diyelim ve c:/deneme dosyasını açalım.

Dosyalar arasında tek bir dosya var. package.json.

Bu dosya bizim projenin config dosyası. npm paketleri, node scriptleri vs. buraya yazılıyor. az önce 5–6 kere enter’a bastık, ya, işte buradaki yazılara ne yazayım diye soruyordu.

Hadi hemen bir counter yapalım react ile, kısa yoldan bir giriş yapmış oluruz kod yazmaya.

npm install -g create-react-app
create-react-app deneme-counter
cd deneme-counter
npm start

Ve ilk react uygulamanızı ayağa kaldırdınız, tebrikler :)

Boilerplate

create-react-app Facebook’un geliştirdiği hazır uygulama başlatıcısı(Biraz zorlama türkçe oldu ama idare edin). Starter-kit veya boilerplate de deniyor bu tür uygulamalara. Güzelliği: Hani o gıcık konfigurasyon ayarları vardı ya, işte onlara hiç bulaşmadan uygulama geliştiriyorsunuz. Neredeyse her ihtiyaca yönelik boilerplateler var. Sırf bunun için adamlar github’dan uygulama buluyorlar.

Find your perfect React starter project

Looking for a React starter project? If you are, you probably had no problem finding one. In fact, you probably found…

andrewhfarmer.com

Boilerplate’inizde neler istiyorsunuz, onu söylüyorsunuz, bu güzel uygulama sizin için en uygun boilerplate’i buluyor.

src->App.js dosyasında, class’ın içini şu şekilde değiştirin. kaydedin, ve browserda uygulamanızı açın.

Evet ekstradan bir debug vs. yapmanıza gerek yok, kaydetmeniz yeterli, anında görüntü şov. Bütün değerlerin nasıl bir anda değiştiğini görüyorsunuz değil mi?

Herkese mutlu kodlamalar diliyoruz. :D