NodeJS, NPM ve React Kurulumu İlk Proje

Herkese Merhabalar, önceki yazımda React’a giriş yapmıştık ve ön bilgi sahibi olmuştuk. (https://medium.com/@ruveydakardelcetin/react-js-giri%C5%9F-component-ve-virtual-dom-mimarisi-145acae17ec3) Bugünkü yazımda ise NodeJS, NPM kurulumu ve İlk React Projesini oluşturma aşamalarını içeren bir yazı ile karşınızdayım 🙂

Maddelerle Kurulum

  • React bir tane package sayesinde kurulmaktadır. Bu package’nin adı Create React App Package’sidir.
  • Create React App çalışma ortamımız için gerekli ayarlamaları yapmaktadır. ( Webpack vb.)
  • Ek olarak JSX formatı ve diğer Create React App için gerekli olan kütüphaneleri indirmiş olacak.
  • Ancak bunların hepsinin gerçekleşebilmesi için öncelikle bilgisayarınızda NodeJS kurulu olması gerekmektedir.
  • Gerekli olan Download’ı nodejs.org/en sitesinden indirebilirsiniz.
  • Farklı işletim sistemleri için aşağıdaki resimdeki seçeneklerden yararlanabilirsiniz.
  • Ben Windows ortamında çalıştığım için Windows kurulumunu gerçekleştirdim. MSI uzantılı bir dosya indirildi .Ve bu dosyayı bilgisayarıma kurdum.Kurulum zaten 2–3 dakika kadar sürüyor.
  • Node sürümü sürekli olarak değişmektedir. Önemli olan ; LTS sürümünü indirmektir.
  • Kurulum tamamlandıktan sonra CMD yani komut satırını açmanız gerekiyor.
  • Ancak CMD ‘yi açarken yönetici olarak çalıştırmanız önemli çünkü Create React App’i Global olarak kuracağız. Ek Bilgi: Linux veya Mac’te çalışıyorsanız. Yazdığımız komutların başına Sudo yazabilirsiniz.
  • Komut satırına aşağıdaki resimde gördüğünüz komutu yazmanız gerekiyor. Buradaki “-g” Global olarak kurulduğunun göstergesi 🙂

Paketin kurulma hızı internet bağlantınıza göre değişiklik gösterebilir

  • Aşağıdaki gibi kurulum tamamlandı.

Haydi İlk React Projemizi Oluşturalım 🙂

  • Masaüstüne veya seçtiğiniz herhangi bir klasöre boş bir klasör oluşturun.
  • Ben Projects klasörünün altına React adında bir klasör oluşturdum.
  • Editör olarak Visual Studio Code ortamında çalışmayı tercih ediyorum. Siz farklı editörler kullanabilirsiniz.
  • Oluşturduğum klasörü Visual Studio Code ortamında açtım.

Ek Bilgi: Visual Studio Code için Terminal’i View alanından ekleyebilirsiniz.

  • Kurulumunuzu Visual Studio Code içerisindeki Terminalden gerçekleştirebilirsiniz.
  • Tabiki Komut Satırı (CMD) den de gerçekleştirebilirsiniz. Seçim sizin 🙂

Projenin oluşması birazcık uzun sürdü fakat mutlu sona ulaştık !! 🙂

Projeyi biraz tanıyacak olursak ;

  • React’ın kullanacağı moduller; Node_Modules altında yer almaktadır.
  • Web sayfasının html sayfası index.html içerisinde bulunuyor.
  • Package.json içerisinde ; React kütüphanesinin sürümü bulunmaktadır. Ek olarak React Scriptleri yer almaktadır.
  • React ile geliştirilmek bir proje eğer server’a atılmak istiyor ise npm-run build yapmak gerekiyor. (Ek Bilgi.)

Terminalde Projenin olduğu dizine gidip npm run start dediğinizde projeniz LocalHost’ta açılmak üzere hazırlıklarına başlamış olacak 🙂

Projeden çıkmak için CTRL+C yapabilirsiniz.

BONUS

React ve Redux ile çalışırken faydalanmak için aşağıdaki Extensionsları yükleyebilirsiniz 🙂

  • React Developer Tools
  • Redux Dev Tools

En kısa zamanda görüşmek üzere :))

Yararlandığım Eğitim

Sıfırdan ReactJs ve Context Api — Mustafa Murat Coşkun

Bir cevap yazın

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