React.js Nedir?

Merhaba 🙂

Bu yazı tamamen React.js’e odaklanmış ve ne olduğunu anlamana yarayacak kısa ve öz bilgiler içeriyor. Bir dili, kütüphaneyi ya da ortamı öğrenmeye başlamadan önce genel bir bilgi sahibi olmayı çok önemsiyorum. Daha sonra detaylarına inmen o bilgiyi daha kolay kavramana fayda sağlayacak diye düşünüyorum. Bu yazı da tamamen bu amaca yönelik bir çalışma oldu. Okuduktan sonra React.js’in tarihçesinden , ne olduğundan , nasıl çalıştığından ve nasıl göründüğünden haberdar olacaksın.

React Nedir

React.js tek sayfalık ( Single Page ) kullanıcı arayüzleri ( UI-> User Interfaces )  oluşturmaya yarayan bir javascript kütüphanesidir. 2011 yılında Facebook’ta çalışan “ Jordan Walke “ isimli bir yazılım Mühendisi tarafından geliştirilmeye başlandı. PHP için bir HTML bileşen kütüphanesi olan XHP’den etkilendi. İlk olarak 2011 yılında Facebook’un haber kaynağında ve ardından 2012 yılında instagram’da kullanıldı. Nihayet 2013 yılında JSConf US etkinliğinde Facebook tarafından açık kaynak olarak sunuldu. Bu gelişmeyle birlikte hızla geniş kitlelere yayıldı ve yazılım geliştiriciler tarafından benimsendi. Şuan en yaygın kullanılan kütüphanelerden biridir. İlk akla gelen Facebook, Instagram, Netflix, Airbnb, WhatsApp, Uber, Dropbox, Tesla, Reddit vb gibi binlerce sektör lideri şirket ve marka tarafından kullanılmakta.

Özellikle karmaşık uygulamalar için elverişli olan React.js tek sayfalı bir kitaplıktır. JSX adı verilen bir yapıyla HTML benzeri bir sözdizimi kullanır, böylece JavaScript ve HTML’i birleştirerek bileşenler (component) oluşturmak daha kolay hale gelir. 

Kod ve klasör yapısı

React.js, temelde bir index.html dosyasındaki root id’li bir HTML etiketi olan div elementine index.js ile içerik render ederek çalışır. index.js dosyası ise projenin ana bileşeni diyebileceğimiz App.js isimli dosyaya referans verir.

Kısaca, Component Tree hiyerarşisini gözlemlediğimizde, en üstte index.html, onun altında index.js ve onun altında ise App.js node yapısını görebiliriz. App.js’in altında ise projenin gereksinimlerine göre şekillenecek, resimde de görebileceğin bir node yapısından bahsetmek yanlış olmaz.

Aşağıda yeni kurulmuş react.js projesine örnek olabilecek bir klasör yapısı görebilirsin.

Aşağıda, React.js Function Component yapısına ait basit bir kod örneğini görebilirsin.

// App.js
import React from 'react';
import Header from './Header';
import Content from './Content';
import Footer from './Footer';

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

export default App;

Biraz daha vaktin var mı?

Haydi bu basit kodu birlikte satır satır inceleyelim. Böylece kod yapısını daha iyi anlayabiliriz ve React.js’i anlamaya hızlı, güzel bir giriş yapabiliriz.

React Kütüphanesini Import Etme: İlk satırda, React kütüphanesini import ediyoruz. Bu, React bileşenlerini tanımlamak ve kullanmak için gereklidir.

import React from 'react';

Diğer Bileşenleri Import Etme: İkinci, üçüncü ve dördüncü satırlarda, Header, Content ve Footer bileşenlerini import ediyoruz. Bu bileşenler, ‘App’ bileşeninin içinde kullanılacak.

import Header from './Header';
import Content from './Content';
import Footer from './Footer';

App Fonksiyon Bileşenini Tanımlama: Beşinci satırda, ‘App’ adında bir fonksiyon bileşeni tanımlıyoruz. Bu bileşen, diğer bileşenleri bir araya getirir.

function App() {

Bileşenlerin Döndürülmesi: Yedinci satırdan on üçüncü satıra kadar, ‘App’ bileşeninin JSX yapısını tanımlıyoruz. Bu yapı, tüm alt bileşenleri sarmalayan bir <div> elemanını döndürür ve bu <div> elemanının içinde Header, Content ve Footer bileşenlerini çağırırız.

return (
  <div>
    <Header />
    <Content />
    <Footer />
  </div>
);

App Bileşenini Dışa Aktarma: Son satırda, ‘App’ bileşenini dışa aktarıyoruz. Böylece, bu bileşen başka dosyalarda da kullanılabilir.

export default App;

Özetle : Yukarıdaki kod yapısını incelediğimizde diyebiliriz ki, React.js projelerinde öncelikle bileşenleri import ettiğimiz alanı görmekteyiz. Daha sonra App fonksiyon bileşeni tanımlanmakta ve bu bileşen içerisinde proje gereksinimleri neticesinde oluşan bileşenler yerleştirilmektedir. Son olarak App bileşeni dışa aktarılmaktadır.

Birlikte hem React.js’in ne olduğundan ve tarihçesinden kısaca bahsettik hem de hızlı bir giriş olması amacıyla kod ve klasör yapısını inceledik. Umarım keyif almışsındır ve senin için bir kapı aralamıştır.

Verimli çalışma saatlerinin ve yaratıcı çözümlerinin bol olduğu günler dilerim.

Happy coding! 🚀💻