React Native Dersleri 02 - React'ı Tanıyalım

React Native, temel olarak React'tan geldiği için bu blog yazımda React'ı anlatmanın faydalı olduğuna karar verdim. Hem React'ın genel olarak ne olduğunu hem de React ve React Native arasındaki farklılıklardan bahsedeceğim.

React Nedir, Nasıl Çalışır?
React, Facebook tarafından geliştirimiş, js ile front end bileşenleri oluşturmaya yarayan bir kütüphanedir. React observer design pattern kullanarak yaptığımız değişiklikleri bizim müdahelememize gerek kalmadan UI'yi tekrar oluşturarak uygular. Yani DOM (Document Object Model) oluşturur. Her defasında DOM oluşturarak uygulamamızı yavaşlatmayı önlemek amacıyla React kendi içinde sanal DOM oluşturur.

Virtual DOM Yapısı

Gerçek DOM’un üstünde değişiklik yapmak pahalıdır. React'ın sanal bir DOM oluşturmasının sebebi DOM güncellemelerinin hızını ve verimini arttırmaktır. Ayrıca başka ek avantajlar da sunar. Modern uygulamalarda DOM’un binlerce node’u olabilir bu da her bir değişiklikte DOM bağlantı yapısıyla iletişim kurup gereken spesifik node’u bulmayı gerektirir. Bu sebepten küçük, sık güncellemeler sayfayı yavaşlatabilir. React bunun önüne geçmek için sanal bir DOM yapısı oluşturur. Önce sanal DOM üzerinde değişikliğin yapıldığı node bulunur sonrasında gerçek DOM’a değişiklik aktarılır. Böylece gerçek DOM en kısa ve en hızlı şekilde update edilmiş olur. 

JSX Yapısı

JSX, Javascript için bir syntax uzantsıdır ve React elementlerinin üretilmesinde görev alır. HTML kodu değildir. Eğer JSX'de bir değişken tanımlamak istersek ;

1	const element = <h1>Merhaba React</h1>;

• Neden JSX?

React yazarken JSX (javascript extension) kullanmak zorunda değiliz ancak HTML kodlarını andırdığı için yazımı ve alışması çok kolaydır. JSX kullanırken hata ve uyarı mesajları göstermesine izin vererek kod yazımını kolaylaştırır ve okunabilirliği arttırır. Buna bir örnek vermemiz gerekirse ;

HTML:

1	<button class="btn btn-primary">React</button>

JS:

1	React.createElement(“button”, { className: “btn btn-primary” }, “React”);

JSX:

1	<button className=“btn btn-primary”>React</button>

React Bileşenleri

Bir React bileşeni bir DOM nesnesidir. React bileşeni kendi içerisinde birden fazla bileşen barındırabilir. Bu composite yapı bileşenimiz içinde ne kadar çok eleman barındırırsa barındırsın, tek bir bileşen olarak döndürür. 

• React bileşenlerinin tekrar kullanılabilirliği, dinamikliği ve erişimi sağlamak  için props,  state ve refs adında 3 alana sahiptir.

Props: Nesneye yönelimli programlamada kurucu metoda verilen parametreler gibi düşünebiliriz. Sonradan değişmeyecek veriler React bileşeni oluşturulurken bileşene bağlanır.

State: Bileşen içinde değişecek veriler için kullanılır. Stateler değiştiğinde React bu değişiklikleri algılar ve yeniden render işlemine gider.

Refs: DOM’daki React bileşenlerine erişmemiz için kullanılır.

React vs React Native

React ve React Native karmaşık kullanıcı arayüzü oluşturmada hızlıdır ve eskiden yeniye geçiş için kolaydır.

• React bir JS kütüphanesi iken React Native bir frameworktür.

• React Native HTML kullanmaz.

• React Native hemen hemen React'ın verdiği tüm avantajları sunar.

• Her ikiside bileşen tabanlı bir mimariye sahiptir.

Sonuç olarak;

React, kullanıcı arayüzleri ve web uygulamaları oluşturmak için hem front end web'i destekleyen hem de sunucuda çalıştırılan bir JavaScript kütüphanesidir.

React Native, yerel uygulama bileşenlerini derleyen, bileşenlerinizi oluşturmak için ReactJS'i kullanmanıza ve ReactJS'i başlığın altına yerleştirmenize izin veren native mobil uygulamalar (iOS, Android ve Windows) oluşturmamıza olanak sağlayan bir mobil iskelettir.