01.03. Visual Studio Code

React kodlarınızı online dahi yazabilir ve test edebilirsiniz. Ancak bu bölümde React Native anlatırken de kullanacağımız Visual Studio Code ortamında bu işlemi nasıl başlatacağımızı göreceğiz.

Hızlı şekilde başlamak isteyen öğrenciler direkt online editörlerle yazdıkları kodları yorumlatabilir. Öncelikle belirtmek isterim ki bu sitelerde tarayıcı tarafı üzerinde ne yapabiliyorsanız, yapma imkanınız vardır.

Visual Studio Code, gelişmiş extension yönetimi sayesinde hızla gelişen açık kaynak kodlu bir projedir. Birçok programlama diline desteği vardır.

Yorumlama yapabilmek için Node.js sisteminizde kurulu olması gerekir. Node.js sayesinde hem javascript kodlarını yorumlatabileceğiz hem de npm (node.js paket yöneticisi, binlerce paketi bulabileceğiz bir ortam) sahip olacağız.  Kurulumdan sonra VS Code’da boş bir klasör açarak işe başlayalım. (File->Open Folder) Yeni bir terminal ekranı açıp (Terminal->New Terminal) aşağıdaki kodu yazalım.

npm paket yöneticisi olduğunu söylemiştik, bu işlem bize basit bir react projesi üretiyor. Kurulum bitince bir klasöre projemizi oluşturuyoruz.

Burada projeyi my-app klasörüne oluşturdum. Bu arada direkt bulunduğunuz klasöre oluşturduğunu unutmayın. Terminalde, “cd klasör ismi” ile alt klasörlere “cd..” üst klasöre gidebilirsiniz. Klasörün içine gidip npm başlatmamız yeterlidir.

http://localhost:3000 tarayıcınızda açıldıysa ve sayfa yüklendiyse her şey yolundadır. App.js dosyasını açıp ufak bir değişiklik yapıp, tarayıcınıza bakın, Siz yazdıkça güncellenir. CTRL+C ile npm durdurabilirsiniz. Bundan sonraki bölümlerdeki tüm kodları App.js dosyası üzerinde değişiklik yapıp test edeceğim. React, kendi başına bir konu örneklerimiz çok basit olacak ve React Native bölümüne katkı olacak seçilecek.