React Js Nedir? Nasıl Kurulur?

Kategori: React Js | 0


Bu dersimizde React javascript’in ne olduğu, ne işe yaradığı hakkında bilgi vericem. React Facebook tarafından geliştirilen, IU ( Kullanıcı Arayüzü ) tasarlamak için kullanılan javascript kütüphanesidir. React sanal dom mimarisini kullanan ve component bazlı çalışan bir UI kütüphanesidir.

Virtual Dom Nedir?

Virtual dom react’in asıl performans kaynağıdır. İlk önce Dom (document object model) nedir ona bakalım. Dom Web sitelerinin bize görünmesini sağlayan HTML elemanlarının hiyerarşik biçimde bir arada bulunması anlamına gelir.

Virtual dom ne işe yarar şimdi buna değinelim. Html web sayfanız üzerinde herhangi bir değişiklik yaptığınızda yapılan değişikliğin web sayfanıza yansıması için bütün dom taranır. Yani bütün dom render edilir ve ilgili değişiklikler yansıtılır. React’ta ise yapılan değişiklik virtual dom’a aktarılır ve virtual dom ile real dom arasında bir değişiklik var mı diye kontrol edilir. Eğer virtual dom ve real dom arasında herhangi bir farklılık yoksa güncelleme işlemi yapılmaz.


React Kullanmak Ne Zaman Mantıklı?

Dom üzerinde çok fazla değişikliğin olduğu projelerde kullanmak mantıklıdır. Yani ön yüzde sürekli değişiklik olan projelerde kullanılmalı. Örneğin react’i çıkaran Facebook’un sitesine biraz göz atalım. Bir gönderi beğenildiğinde, yorum yapıldığında, yeni post paylaşıldığın veya birisi online olduğunda anlık olarak ön yüzde değişiklik olmakta. Bu tarz projelerde react kullanmak iş yükünüzü azaltacak ve işinizi çok kolaylaştıracaktır. Tabii ki bundan diğer projelerde kullanmamamız lazım gibi bir anlam çıkartmayın 🙂

JSX Nedir?

React yazmak için JSX kullanmak zorun değilsiniz ama yazım şekli HTML’e benzediği için kolayca alışıp ve hızlı kod yazabilceksiniz. Ayrıca react’ın detaylı hata ve uyarı mesajları göstermesine izin verir.

Yukarıda örnek bir JSX kodu var ilerideki derslerimizde bu konuya daha detaylı değineceğim.

React JS Kurulumu

React bir JS dosyasından ibaret fakat local sunucu ve paketleme işlemleri için gerekli paketleri direk indirip kullanabilmek için node js ve npm kurmamız gerekiyor.

Node JS kurulumu

İlk olarak Node JS indirmeliyiz. İndirdikten sonra kurulum sihirbazını çalıştırın ve ileri diyerek kurlumu yapın. Node js kurulumu bu kadar 🙂

React Developer Tools

Google chrome mağazasında bulunan bir eklenti. İndirmek zorunda değilsiniz ama indirmeniz size kolaylık sağlayacaktır. Daha state ve props tanımını öğrenmedik ama bu eklenti bizim state ve propslarımızın ne durumda olduğunu gösteren bir eklenti. İndirmek için TIKLAYIN

Kurulum bu kadar şimdi react uygulamasını nasıl oluşturabileceğimize bakalım.

React Uygulaması Oluşturma

React uygulamasını oluşturmamız için Facebook create-react-app adında bir github reposu hazırlamış. Bu repoyu kullanarak uygulamamızı hızlıca ayağa kaldırabiliriz. Bu repo içerisinde bir local sunucu ile geliyor ve çalıştırdığımızda react uygulamamız o sunucu üzerinde çalışıyor.

Terminal ekranını yönetici olarak çalıştırın ve

komutunu çalıştırın. Global olarak kurulum yapmak istediğimiz için sonuna -g parametresini ekliyoruz.

İlk projenizi çalıştırmak istediğiniz klasöre gidin ve proje kurulumu için

komutunu çalıştırın. Proje ismi bölümünü istediğiniz gibi düzenleyin.

Proje oluşturma işlemleri bittikten sonra proje dizinine giderek

komutunu çalıştırarak projenizi ayağa kaldırabilirsiniz. Localde 3000 portunda projenizi görüntüleyebilirsiniz.

İlk dersimiz bu kadar diğer derslerimizde components (Bileşenler) hakkında bilgi vericem.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir