ReactJS Nedir — Bölüm 1
Merhabalar, bu makalemde sizlere reactjs nedir , proje oluşturma ve bileşenleri hakkında bilgiler veriyor olacağım.
Öncelikle neden ReactJS?
Klasik web uygulaması programlanması sürecinde, sayfada küçük bir değişiklik de olsa sayfanın tamamının yenilenmesi gibi sorunlarla karşılaşırız ve buda bize performans kaybı olarak döner. Sayfanın sunucuya gidip gelmesi gibi süreçte ister istemez yavaşlık söz konusu olacaktır.
Peki bu problem için ReactJS bize nasıl bir çözüm sunuyor? ReactJS sadece sayfa üzerinde yapılan değişiklikleri yansıtarak daha hızlı bir çalışma ortamı sağlamaktadır.
ReactJs Nedir Sorusuna aslında birden fazla cevap verilebilir:
· ReactJS bir javascript kütüphanesidir ve esnektir
· ReactJS Facebook tarafından olulturulumuş açık kaynak projedir.
· ReactJS Kullanıcı arayüzleri oluşturmak için kullanılan bir UI interface’idir.
· ReactJS MVC Projelerinde View bölümünü oluşturmaktadır.
ReactJS’e başlamadan önce Html, Css, JavaScript bilginizin olması çok önemli. Ve bu işin başında DOM yapısına hakim olmamız gerekli.
DOM (Document Object Model) Nedir?
Belge Nesne Modeli(DOM) HTML, XHTML veya XML belgesi ağaç yapısı olarak gören platformlar arası ve dilden bağımsız bir API’dır. DOM modeli, mantıksal ağaç yapısı olan belgeyi temsil eder.
Virtual DOM Nedir?
React, sayfa üzerinde yapılan değişiklikleri hesaplayan ve tarayıcıyı güncelleyen bir bellek içi yapısı oluşturur. Bu sayede tüm sayfada değişen alanlar hesaplanarak diğer alanların güncellenmeden sadece değişen bölümlerin yansıtılması sağlanır.
React, aynı nesneye 2. defa arka arkaya oluştursa bile, ikini oluşturma işlem görmeyecektir.
Tarayıcıda DOM’u güncellemek 3 adım üzerinden gerçekleşir.
1) Yapı üzerinde bir değişiklik olursa, tüm kullanıcı arayüzü önce bir sanal dom üzerinde yeniden oluşturulacaktır.
2) Bir önceki sanal dom yeni oluşturulan sanal dom arasındaki değişiklik hesaplanacaktır.
3) Gerçek dom bu fark ile güncellenecektir.
ReactJS Kurulum
Kurulum için öncelikle bilgisayarınızda NodeJs yüklü olması gerekir. https://nodejs.org/en/download/ sitesine giderek işletim sisteminize uygun versiyonu indirebilirsiniz.
Daha sonrarında proje oluşturmak için comut ekranı üzerinden
npx create-react-app my-first-app
cd my-first-app
npm start
artık prjeniz çalışır durumda ve browser üzerinden görüntülenebilmektedir. Daha önceki versiyonlarda, global olarak create-react-app kurulumu yapıyorduk. Eğer daha önce global olarak bu şekil bir kurulum yaptıysanız, npm uninstall -g create-react-app diyerek kaldırınız. npx komutu npm’e 5.2 den sonra gelmiştir ve kurulum yaparken global olarak indirme yapmamıza gerek yoktur.
Ekran çıktısı
Bu makalede, reactjs nedir, dom ve virtual dom yapılarına genel bir giriş yaparak ilk projemizi oluşturduk. Bir sonraki makalemde, Component yapısını inceliyor olucaz.
