2 Aralık 2018 Pazar

React.js #1 create-react-app kullanımı

  Ahmet Şimşek       2 Aralık 2018 Pazar

create-react-app aracını indirip kullanmak için nodejs ve npm araçları kurulu olmalı. Kurulu değilse nvm ile gerekli kurulumları yapabilirsiniz.

https://indatawetrust.blogspot.com/2015/10/nodejs-versiyon-yonetim-sistemi-nvm.html

Nodejs versiyonu olarak 10.0+ kullanmanızı tavsiye ederim.

create-react-app aracını indirmek için npx aracını kullanacağız.

npm 5.2+ versiyonu ile npx direkt kurulu olarak geliyor. npx terminal üzerinden nodejs paketlerini daha kolay ve hızlı şekilde çalıştırabilmeyi sağlayan npm geliştiricileri tarafından geliştirilmekte olan bir araç.

npx ile kurulum;

npx create-react-app my-app

my-app kısmını uygulamanızın oluşturulacağı klasörün adını yazmalısınız.

Komutu çalıştırdığınızda paket yüklemeleri ve proje dosyalarının oluşturulması otomatik olarak başlayacak.


Kurulum tamamlandığında şu yazıları göreceksiniz.

Sisteminize yarn kurulumunu yapmak için;

https://yarnpkg.com/lang/en/docs/install

yarn start

Bu komut yukarıda altında yazan yazıdan gördüğünüz üzere development sunucusunun başlatılmasını sağlayıp geliştirmeye başlamanızı sağlıyor. Komutu çalıştırdığınızda varsayılan tarayıcınızda http://localhost:3000/ adresi yeni bir sekmede açılacak. 3000 portu kullanımda ise başka bir port ile çalıştırayım mı sorusu ile karşılacaksınız.

yarn build

Bu komut projenizi production ortamına hazır şekilde sıkıştırılmış, paketlenmiş ve optimize edilmiş olarak build klasörü içinde sunuyor.


Build içerisinde oluşturulan dosya ve klasörler şu şekilde;


Nginx, apache ya da bir web uygulaması geliştirdiğiniz herhangi bir platformun public klasörü içerisine bu dosyaları atmanız durumunda uygulamanız çalışmaya hazır.

yarn test

App.test.js içerisine yazılan test süreçlerinin çalıştırıldığı komut. Uygulamanın istenilen şekilde render edilip edilmediği ile ilgili testleri buradan yapabilirsiniz.

yarn eject

Bu komut ile projenizin içerisinde görmediğiniz tüm konfigürasyon dosyaları projenin içerisine dahil ediliyor. Örneğin webpack konfigürasyonları ile ilgili bir değişiklik yapmak istediğiniz durumda bu komutu çalıştırarak webpack ayarları ile oynayabilirsiniz.
logoblog

Thanks for reading React.js #1 create-react-app kullanımı

Previous
« Prev Post

Hiç yorum yok:

Yorum Gönder