React Eğitim Serisi – 1: Proje Açmak ve Kurulum

React Eğitim Serisi – 1: Proje Açmak ve Kurulum

React nedir? Nasıl Kullanılır? React 101 Giriş Eğitimi için Tıklayın!

Evet bu yazıda React ile başlangıç seviyesinde bir projenin temellerini atacağız. React‘ı kurmayı, GitHub ile senkron çalışmayı ve JSX formatına çevirmeyi öğreneceğiz.

İlk olarak C:\Project\ReactEgitim\ klasörümüzü oluşturuyor ve bunun içerisine public ve src diye iki klasör açıyoruz. Daha sonra lokal ortamda çalışabilmek için AMPPS Server ya da Wamp Server kuruyoruz. Ben AMPPS kullanıyorum ve buna göre anlatmaya devam edeceğim. Kurulumu yaptıktan sonra AMPPS‘ı çalıştırıp Apache configuration‘u notepad ile açıp içerisine

yazarak dev.reactegitim.com:8080 adresini lokalimizde açtığımız C:\Project\ReactEgitim\public klasörüne yönlendiriyoruz. Bunun haricinde System32/drivers/etc/hosts dosyasına

127.0.0.1 dev.reactegitim.com

satırını eklemeniz gerekiyor.

Daha sonra React’ın source dosyalarını indirmek için buraya giriyoruz ve Download Starter Kit paketini indiriyoruz. İndirdiğimiz dosya içerisinden build klasöründeki react.min.js dosyasını projemizin C:\Project\ReactEgitim\public klasörüne kopyalıyoruz.

Public klasörünün içeriği;

  • index.html (Şimdilik boş)
  • react.min.js

Src klasörünün içeriği;

  • main.js (Şimdilik boş)

Şimdi sıra geldi projemizi GitHub‘a koymaya. GitHub hesabımıza bağlanıp New Repository oluşturuyoruz.

github-react-repository-olustur

Ben oluşturduğum yeni repositorye ReactEgitim adını verdim, siz dilediğiniz ismi verebilirsiniz. Gizlilik ayarlarını da yaptıktan sonra Create Repository diyerek repositorymizi oluşturuyoruz. Oluşturduktan sonra bize verdiği linki kullanacağımız commit aracına ekliyoruz. Ben SourceTree kullanıyorum size de tavsiye ederim ve anlatımı onun üzerinden gerçekleştireceğim.

git-repository-react-temel-egitim-anlatim

Linki kopyalayıp SourceTree‘yi açıp Clone / New butonuna tıklıyoruz.

sourcetree-git-github-clone-repository

Source Path kısmına linki yapıştırıyoruz, Destination Path kısmından projemizin bilgisayarımızdaki dizinini gösteriyoruz ve Clone diyoruz.

Evet GitHub bağlantımızı yaptık, proje klasörümüzü oluşturduk ve React için gerekli javascript dosyasını projemize ekledikten sonra şimdi sıra geldi html’imizi ve main.js’imizi oluşturmaya. İlk etapta basit bir saniye sayacı olan ve React’ın düzgün çalışıp çalışmadığını kontrol eden bir uygulama hazırlayacağız.

Public klasörü içerisinde oluşturacağımız index.html’imiz şu şekilde olacak;

Src klasörüne oluşturacağımız main.js doyamız ise şu şekilde olacak;

ExampleApplication diye bir eleman yaratıp bunun Render fonksiyonuna geçen süreyi hesaplayacak bir matematik işlemi yaptırıyoruz. Daha sonra da sayfanın açılışında start date i alıp her sanise geçtikten sonra new date yaratıp ondan çıkarıyoruz. Sonucu da ekrana basıyoruz. Böylelikle ekran çıktımız “React XX saniyedir başarıyla çalışıyor” şeklinde oluyor.

Evet index.html ve main.js’imizi projemize ekledik ancak React çalışmıyor hatası alıyoruz değil mi hala? Bunun sebebi React’ı JSX formatına dönüştürmemiş olmamız. Bunun için de en başta kısa birkaç işlem yapmamız gerekiyor.

Öncelikle ReactEgitim ana klasörümüzde sol shift tuşuna basılı tutarak sağ klik yapıyoruz ve komut satırını açıyoruz.open-command-window-here

Açılan siyah ekranda “npm install -g react-tools” yazıp enter diyoruz.

npm-install-g-react-tools

Daha sonra yine aynı komut satırına “jsx –watch src/ public/” yazarak enter diyoruz. Bu komut src içerisinde ne buluyorsan hepsini jsx formatına çevir ve public klasörüne ekle anlamına geliyor.

jsx-watch-src-public

Bu komutu çalıştırdıktan sonra komut ekranını açık bırakmanız gerekiyor. main.js dosyasında yaptığınız her değişikliği algılayıp otomatik olarak public klasöründeki main.js dosyanızı güncelliyor ve yazdığınız kodu anında görmenizi sağlıyor.

jsx-rebuild

Evet artık dev.reactegitim.com:8080 adresine girip lokalinizde projenin çalıştığını ve saniye saymaya başladığını göreceksiniz. Yaptıklarınızı tamamladıktan sonra SourceTree‘yi açıp Commit & Push diyerek değişiklik yaptığınız dosyaları GitHub‘a göndermeyi unutmayın.

Benim yazdıklarımı https://github.com/evrenakar/ReactEgitim adresinden indirebilirsiniz.

Bir sonraki React anlatımında görüşmek dileğiyle hoşça kalın.

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

About Bir Frontendci

Lead FrontEnd Developer, React - Node.js - Html - Css Blogger, Geology Engineer, Gamer, Foosball Player, A True Car Enthusiast..
View all posts by Bir Frontendci →

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.