React.js Projesi Geliştirmek için Ortam Oluşturmak

Merhabalar, React.js Giriş yazısından sonra gelen istekler üzerine React.js geliştirme ortamının kurulumundan bahsetmek şart olmuştu. Bu yazıda React.js ile ön yüz projesi geliştirmeye karar verdiğinizde çalışma ortamınızı hızlıca nasıl oluşturabileceğiniz hakkında bilgiler edineceksiniz.

Motivasyon: JavaScript ile uygulama geliştirmeyi denemişseniz birçok araç olduğunu keşfetmişsinizdir. Hepsi kendi içinde farklı farklı ayarlar yapmanız gereken araçlar.  Create React apps with no build configuration sloganıyla yola çıkmış bizi karın ağrısı ayarlardan kurtarmak için oluşturulmuş bir araç var: Create React App, deneyimli JavaScript geliştiricileri tarafından projelerin ortak ayarları belirlenerek oluşturulmuş projenize alt yapı sağlayan bir proje oluşturucu araç.
Create React App’in içinde bulundurdukları 

  • Projenizde bulunan JavaScript, Html, CSS kodlarının sıkıştırılması için webpack, style-loader
  • Geliştirme ortamında basit bir server oluşturmak için  webpack-dev-server
  • Kod üzerinde yaptığınız değişikliğin anında arayüze yansıması için Hot reloading
  • ES6 ve JSX gibi diğer uzantılarda kod yazmanız için Babel
  • JavaScript kod standartlarına uygun yazmanız için ESLint
  • ve diğerleri.

Create React App Kurulumu

npm alternatifi yarn  package manager edinmenizi öneririm.
yarn’ı kurduktan sonra terminalinizde yarn global add create-react-app komutunu çalıştırarak bu muhteşem araca sahip olabilirsiniz.

Sıfır konfigürasyon ile projemizi ayağa kaldıralım

Artık geliştirmeye başlamamız için yapmamız gereken tek şey projemizin klasörüne isim vermek 😍

Oluşturduğu klasör yapısı

benim-harika-react-projem/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    registerServiceWorker.js

yarn start : geliştirme modunda ayağa kaldırır kodda yaptığınız değişiklik hot reload sayesinde anında arayüzünüze yansır
yarn build : production ortamına hazır şekilde kodlarınızı sıkıştırır ve /build klasörü altına paketler
yarn test : testleri başlatır. (tabi önce testleri yazmanız lazım 😅)
yarn eject : sıfır ayar ile ayağa kaldırmamızı sağlayan aslında arka planda tuttuğu ayarları siz yazmışsınız gibi package.json içine aktarır (geri dönüşü yoktur, ortalık karışır!) Konfigürasonları değiştirmek isterseniz bu yolu tercih edebilirsiniz.

Herşey tamam ise yarn start diyerek src klasörünün altına React.js kodlarınızı yazmaya başlayabilirsiniz.

No Comments

Post a Comment

Comment
Name
Email
Website