React UI Mechanics

React Geliştirme Ortamının Oluşturulması

React mekanik örneklerini anlatmayı düşündüğüm bu yazı serisinde amacım CSS ve Görselliğe takılmadan UI Mekaniği ile ilgili örnekler geliştirmek. Konunun ilk dersi React Geliştirme Ortamının Oluşturulması

Onur Dayıbaşı

Published in

Frontend Development With JS

3 min readNov 14, 2020

Not: React UI Mekanikleri ile ilgili tüm yazı serisine bu linkten erişebilirsiniz.

Proje Ortamının oluşturulması ilk önce bir altyapı oluşturmalıyız. Bunun için React sunduğu Create React App kullanarak altyapımızı oluşturalım.

npx create-react-app react-setup

Yukarıda neden npx kullanıyoruz. Npm paket yönetimi yaparken, npx bundled paketleri çalıştırmanızı bu şekilde localde bir template proje ortamı oluşturmak istediğinizde kısa CLI komutları ile bu ortamın daha basit bir şekilde oluşmasını sağlar. npx özetle;

versiyon, bağımlılık ve gereksiz paketleri yükleme problemlerinden sizi soyutlar.
Github reposu bazlı paket, komut ve modül çalıştırılması konusunda size kolaylıklar sağlar.

Yukarıdaki npx komutu çalıştığında local ortamınızda Node projesi oluşur. ve sizin bu uygulama üzerinde bir takım komutları çalıştırabilmesi için aşağıdaki komut setini kullanabileceğiniz belirtilir.

ortam oluşturulduktan sonra karşımıza çıkan ekran

cd react-setup 
yarn start

komutlarını çalıştırdığımızda Local ortamınızda en basit haliyle bir react projesi ayağa kaldırmış olursunuz. ve localhost:3000 portundan bu projeye erişebilirsiniz.

Peki akla şu soru gelebilir bu yarn start komutu bizim uygulamamızı nasıl ayağa kaldırıyor. Oluşturulan proje dosyamıza biraz daha yakından bakalım.

Aşağıdaki resimde görüleceği gibi kullanıcı yarn start yazması package.json içerisindeki react-scripts start komutunu çalıştırır. hatta burada yarn test komutunu çalıştırsak buda testleri çalıştırarak size aşağıdaki resimdeki gibi testlerin passed durumlarını gösterir.

Peki react-scripts nerden geldi ? Bizim ilk baştaki npx create-react-app deyince arka planda aşağıdaki işlemler gerçekleşir. Bunların içerisinde react-script bulunur.

https://github.com/facebook/create-react-app#whats-included

Şimdi diğer komutlara bakarsak. yarn test ve yarn build komutlarını kullanarak çıktılarına bakabilirsiniz. Birisi testleri çalıştırırken, diğeride kodu prod gönderecek şekilde bundle oluşturma işlemini gerçekleştiriyor

Şimdide biraz React kodunu inceleyelim. Burda tek bir bileşen var oda Root bulunan App bileşeni ve bu bileşen JSX ile yazılmış (Konu detayı için React ile DOM kullanımı yazımı) okuyabilirsiniz. JSX içerisinde bunun React projesi olduğu ve ilgili dokumanlara gitmek için bir linki ekrana basıyor. Çok basit halde bir bileşen.