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.
- https://codesandbox.io/ : Çok ilginç örneklerde içeriyor.
- https://repl.it/repls/StraightGullibleLeadership : Bir editor’e benzeyen arayüzü anlaşılır ve rahat bir kullanım sunuyor.
- https://jsfiddle.net/reactjs/69z2wepo/: jsfiddle pencereyi dörde ayırıyor: HTML, CSS, Javascript ve Çıktı. Anında sonuçlarınızı çıktı ekranında görebiliyorsunuz.
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.
|
1 |
npm install -g create-react-app |
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.
|
1 |
create-react-app my-app |
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.
|
1 2 |
cd my-app npm start |
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.