Uygulamalar
Oyun
Yazılım
Yardım
Dota 2
LOL
Silkroad
WOT
Point Blank
Diğer
Yeni
Eski
Haber
Pazar
asp & .net
java
c# c++
python
php
Diğer
Windows
Donanım
Linux
Güvenlik
Program
Modeller
Destek
07-08-2017, Saat: 22:11
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.
[img=879x0]https://blog.kodcu.com/wp/wp-content/uploads/2017/05/es6-webpack-react-babel.png[/img]
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.
npm alternatifi yarn package manager edinmenizi öneririm.
yarn’ı kurduktan sonra terminalinizde
Kod:
yarn global add create-react-appkomutunu ç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
![[Resim: 1f60d.svg]](https://s.w.org/images/core/emoji/2.3/svg/1f60d.svg){kind=small}
Oluşturduğu klasör yapısı
Kod:
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.jsKod:
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
Kod:
yarn build : production ortamına hazır şekilde kodlarınızı sıkıştırır ve /build klasörü altına paketler
Kod:
yarn test : testleri başlatır. (tabi önce testleri yazmanız lazım
![[Resim: 1f605.svg]](https://s.w.org/images/core/emoji/2.3/svg/1f605.svg){kind=small}
)Kod:
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
Kod:
yarn startdiyerek
Kod:
srcklasörünün altına React.js kodlarınızı yazmaya başlayabilirsiniz.
ufak bir not: src klasörü altında ES6(EcmaScript6) kodlarıyla karşılacaksınız bu JavaScript değil ki diye şaşırmayın
![[Resim: 1f61c.svg]](https://s.w.org/images/core/emoji/2.3/svg/1f61c.svg){kind=small}
