React Serüvenim — Kurulumlar
minik bir dokunuşla tüm adımlar …
React Serüvenim başlığı ile çıktığım bu yolda ilk yazımda react nedir ve nerelerde kullanılır başlıklarına yer vermiştim. Bu yazımızda kurulumlar nasıl yapılır neler nasıl kullanılır gibi başlıklar ile ilerleyeceğiz.
O zaman beklemeden haydi başlayalım !
Kurulum aşamasında ilk olarak node paketlerini yükleyerek başlayabiliriz.Node paketleri için nodejs.org web sitesinden kendi işletim sistemimize uygun olan kısmı indirip kurmamız yeterli olacaktır. Kurulum öncesinde Node kurulumundaki amaca değinecek olursak; client paketlerini projede kullanılması ve paketlerin npm paketleri aracılığılıyla komut satırıyla bilgisayarımıza indirmemize fayda sağlamaktadır.
İlgili web site üzerinden ya önerilen ve çoğu kullanıcının kullandığı versiyon veya son versiyonu işletim sistemimize uygun olarak seçerek indirme ve kurulumu gerçekleştirmekteyiz.
Peki kurulum sonrası versiyonu nasıl kontrol ederim?
Mac cihamızda terminal, windows cihazlarımızda cmd veya powershell aracılığı ile komut çalıştırma ekranına ulaşmaktayız.
Yüklenen node paketlerimizin versiyon bilgisi için;
node -v
Yüklenen npm paketlerimizin versiyon bilgisine ulaşmak için de
npm -v
komutlarını komut satırında çalıştırmamız yeterli olacaktır.
Kurulumlar noktasında geliştirme ortamımız olarak Visual Studio Code üzerinden ilerleyeceğim.
https://visualstudio.microsoft.com/downloads/ adresi üzerinden ilgili program seçilerek kurulum gerçekleştirilmektedir.
Kurulumlarımızı gerçekleştirildikten sonra, visual studio code da react için Extension — React/Redux/GraphQL/React-Native olan extension yüklememiz süreçlerimizde fayda sağlayacaktır.
Kurulumlarımızı tamamladıktan sonra, desktop veya belirlediğimiz bir alanda klasör açabiliriz. Bu açılan klasör hello-react isimli bir klasör açıp bunu VS Code içinde açabiliriz.
Klasör altına hemen public bir klasör ve altına da index.html dosya oluşturmamız ilk adımımızda yeterli olacaktır.
Kısayollarımız aracılığı ile ! ve TAB tuşuna basmamızla html kodlarımız otomatik olarak oluşturulacaktır.
Kurulumlarımızla birlikte uygulamamızın her seferinde tekrar tekrar ayağa kalkmasını değişikliklerin yansımasını beklemek yerine live server kurarak ilgili değişikliklerin yansıması sağlanmaktadır.
Global’de hangi paketlerimizin kurulu olduğunu görebilmek adına mac makinemizde terminal üzerinden, windows kullanıyorsak cmd veya powershell üzerinden;
npm list -g — depth 0
komutunu çalıştırmamız globalde yüklü olan paketlerimizin görülmesine imkan sağlamaktadır.
Globalimizde corepack ve npm paketlerinin yüklü olduğunu sonucumuzla görmekteyiz. Live server kurulumumuz için tekrar terminal üzerinden
npm install -g live-server
komutumuzla kurulumumuz gerçekleştirilmektedir. Eğer mac cihaz üzerinden ilerliyorsak burada bir detay bulunmaktadır. Mac cihazlarımızda erişim noktasında izin verilmediği için ilgili komut başına sudo eklenmesi gerekmektedir. Son şekli;
sudo npm install -g live-server
şeklindedir. Global paketlerimizin içerisinde live server görebilmek adına tekrar terminalimiz üzerinden npm list -g — depth 0 komutunu çalıştırarak yüklendiğini görüntüleyebiliriz.
Live server paketimizi aktif etmek için live-server public komutunu çalıştırmamız, eğer durdurulmasını istiyorsak da command + C ile durdurulmasını sağlayabilmekteyiz.
React dünyamız için artık kollarımızı sıvayabilir durumdayız, bir sonraki yazımızda birlikte Hello React diyebiliriz. 💃🏻 🕺🏻
Sonraki yazımda görüşmek dileğiyle, sevgiler. 🌸
