NPM ile React Projesi Oluşturmak

Herkese selam, bu yazımızda javascript ailesinin popüler front-end kütüphanesi olan React için nasıl ilk projenizi oluştursunuz bunu göreceğiz.

Normalde blog üzerinde ilk React yazısı olduğu için uzun uzun React’tan bahsetmem gerekirdi ama onu başka bir yazıda paylaşacağım. Aslında direkt kurulum yapmaya geldiyseniz daha önce react hakkında bir şeyler duymuşsunuz diye düşünüyorum. Ama yine de küçük ama önemli bir bilgiyi verelim ve kuruluma geçelim. React bir framework (çatı) değil görsel (front-end) alanda bir kütüphanedir.

1- Paketleri Bilgisayarımıza İndirelim

React’ı NPM aracılığı ile kuracağız ve kurulumu kolaylaştırmak için create-react-app paketini kullanacağız. Paket eklemesini global olarak yapacağız ve her ayrı proje için indirme yapmamız gerekmeyecek.

Başlangıç kısmı biraz ikiye ayrılacak Linux ve Windows olarak, çünkü global yükleme yapacağımız için yönetici yetkisine ihtiyacımız var. Önce Linux hemen sonrasında da Windows için paketimizin kurulumunu anlatıyoruz.

Linux:

Windows:

Windows üzerinde sudo gibi bir yetki komutu olmadığı için şu adımları izleyin ve komut satırını yönetici olarak başlatın.

  1. Windows arama ekranına girin ve cmd yazın.
  2. Bulunan cmd uygulamasına sağ tıklayın ve yönetici olarak çalıştır diyin.
  3. Eğer standart kullanıcıda iseniz yönetici şifresini girin, değilseniz evet diyerek devam edin.

2- İlk Projemizi Oluşturalım

Global olarak kurulum yaptık bir önceli aşamada. Şimdi sırada ilk projemizi oluşturmada. Bu aşamada da biraz bölüneceğiz işletim sistemleri arasında. Bir dizin içerisinde projemizi tutmak için bir klasör oluşturuyoruz. Örneğin bunu masaüstünde yapalım. İsmini de ilk-proje yapıyorum. Farklı bir isim verirseniz sonraki adımlarda değişikliği yapmayı unutmayın.

İşletim sistemlerinde masaüstlerinde oluşturulan klasörler hangi dizinde öncelikle buna bakalım.

  • Linux: ~/Desktop/ilk-proje/
  • Windows: C:\Users\{kullanici_adiniz}\Desktop\

Linux üzerinde home içinde kendi kullanıcınız tilde işareti ile gösterildiğinden kullanıcı adı ile uğraşmadık. Windows için biraz daha zahmetli olacak. Şimdi klasörlere girme vakti.

Linux:

Eğer linux dağıtımınızı Türkçe kullanıyorsanız Desktop dizini Masaüstü olacaktır ona göre düzenlemenizi yapınız. Ya da görsel arayüz ile ilk-proje içine girip sağ tıklayıp “Terminali burada çalıştır” ya da “Open terminal” diyebilirsiniz.

Windows:

Yine aynı şekilde Windows için de gösterdik. Dikkat etmeniz gereken nokta 2 tane önceki klasöre çıkmak için “..” kullandığımız. Bunun sebebi yönetici olarak çalıştırdığımız cmd bizi Windows klasörü altındaki System32 klasöründe çalıştırdığı.

Ya da kolaya kaçmak isterseniz linux üzerindeki sağ tıklama olayını Windows’ta da yapabilirsiniz. Klasöre girin ve sağ tıklayıp “Open git bash here” seçeneğine tıklayın.

Artık klasörümüze girdik bundan sonrası iki işletim sistemi için de ortak ilerleyecek. Bu yüzden terminal ve komut satırını ortaklamak için konsol olarak bahsedeceğim.

Konsolumuza geri döndük ve artık projemizi oluşturalım.

Bir önceki oluşturduğumuz ilk-proje aslında bizim dizinimizdi projem ise react projemize verdiğimiz isim oldu. Burada size birkaç soru sorabilir onlara evet (y) diyeceksiniz. Birkaç dakika içinde hazır olacaktır. Bittiğini varsayarak hemen proje klasörümüzün içine girelim.

3- Artık çalıştırıyoruz..

Az önce klasörümüze de girdik, o zaman projeyi çalıştırma vakti..

Komutumuzu girdikten sonra varsayılan tarayıcınızda bir sayfa açılacak ve tadaa karşınızda react projeniz duruyor. Eğer açılmazsa yada yanlışıkla kapatırsanız “http://localhost:3000” adresine girip tekrar görebilirsiniz.

Projenizi derleyip artık sitenizi halka açmak isterseniz kodlarda değişiklikleri yaptıktan sonra “npm build” diyerek build edebilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir