1- React Temel Bilgiler (ReactJS Eğitim Serisi)

React ile ilgili başlangıç seviyesinden bilgiler vermeden önce bazı temel konseptlerin farkına varılması ve özümsenmesi gerekir. Daha önceden server side rendering (bundan sonra SSR olarak bahsedilecek) ile çalışmış birisinin temel konsepti anlamadan React’ı öğrenmesi zor olabiliyor.

Haydi aşağıdaki başlıklar ile temel konsepti anlamaya başlayalım

React Nedir?

En basit tanımıyla React, arayüz oluşturmaya yarayan bir Javascript kütüphanesidir(framework değildir!). Web uygulaması geliştirme sürecince React’in görevi sadece datayı DOM tarafına render etmektir. Farklı yetenekler için ek kütüphaneler gerekebilir.

React’in dikkate değer en önemli özelliği Virtual DOM oluşturmasıdır. Bu konuya detaylı olarak değinilecektir.

Atomic Design

Atom => molekül => organizma => şablon => sayfa.

How to implement “Atomic Design” in your current project
Atomdan Sayfaya

Bu terimlere biyoloji dersinden biraz aşınayız aslında. Hani hatırlarsınız Biyolojik Organizasyon. React dünyasında bu paradigma tamamiyle benimsenmiş durumda(aslında düşündüğümüzde tüm evren böyle 🙂 )

React, kullandığı resmi logo ile bu durumu çok güzel özetliyor aslında 🙂

Atomic design, bize bir çok avantaj sağlıyor. Görseldeki her bir parça component olarak konumlandırılabiliyor. Bir component içinde birden fazla component yer alabiliyor. Her componentin kendi içinde bir yaşam döngüsü ve durumu(state) oluyor. Bir kez component olarak konumlandırılan parça birden fazla alanda tekrar kullanılabiliyor.

Aşağıda örneklerde birden fazla componentin başka bir component içinde kullanımı yer alıyor

const Menu = () => (
      <ul>
         <li>
            <Link>Anasayfa<Link>
            <Link>İletişim<Link>
         </li>
      </ul>
);

export default Menu;
const Profile = () => (
      <>Mehmet Yılmaz</>
);

export default Profile;
const Header = () => (
     <>
       <Menu />
       <Profile />
     </>
)

export default Header;
Birden fazla componentin bir arada kullanımı

SPA (Single Page Application), Server Side Rendering ve Virtual DOM

Tek sayfalık uygulama… Dediğimizde ne anlıyorsunuz? Kullanıcının etkileşime geçtiği yani görüntüleyip işlem yaptığı tek bir ekran mı canlanıyor kafanızda? Aslında burada anlatmak istediğimiz bu değil. Daha alt seviye bir konu. Klasik yöntemler ile web uygulaması geliştirdiğimizde her bir web sayfası için ayrı bir html dosyası oluşturmamız gerekiyordu. Bu dosyaları sunucu içerisinde barınan fiziksel dosyalar olarak düşünebilirsiniz. (MVC projelerinde aşağıdaki dosyaları controller actionları gibi düşünebilirsiniz)

  • home.php
  • about.php
  • contact.php

Her bir dosyanın URL karşılığı olup kullanıcı tarafından, browser üzerinde URLllere erişilmek istendiğinde her biri ve içerlerinden içerik dosyaları için sunucu tarafında bir render işlemi başlatılıp (Server Side Rendering – SSR) sonucunun geriye (browsera) gönderilmesi sağlanıyordu. Bu yöntem tabiki günümüzde kullanılmaya devam ediyor. Kendine göre avantajları ve başta performans olmak üzere dezavantajları mevcut.

SPA ile tek bir HTML dosyası ile kullanıcılara uygulamamızı sunabiliyoruz. Proje yapısına daha detaylı değineceğiz ancak aşağıdaki basit gösterim ile durumu açıklamaya çalışayım

  • index.html
  • src/App.jsx
  • src/Pages/Home.jsx
  • src/components/Header.jsx
  • src/components/Footer.jsx
  • src/layouts/MainLayout.jsx

Yukarıdaki gösterimde bir adet index.html dosyası ve src klasörü altında jsx uzantılı bazı dosyalar yer alıyor. JSX uzantılı dosyalar webpack vasıtasıyla bir araya getirilip derlenip bir javascript uygulaması haline getiriliyor ve index.html içerisinde yer alan bir div içerisinde bu uygulama çalıştırılıyor. Böylece birden fazla ekranın olduğu uygulama tek bir sayfa içerisinde çalıştırılmış oluyor. Kullanıcı index.html sayfasını browser üzerinde çağırdığında ise tüm uygulamayı bir kerede indirmiş oluyor. İşte biz bu olaya Single Page Application diyoruz

Şimdi bu bilgiler ışığında Virtual DOM kavramına bakalım.

DOM (Document Object Model) XML veya HTML gibi dokümanın ağaç şeklinde tutulmasıdır. Burada ağaçtaki her düğüm, dokümandaki bir elemanı göstermektedir

Document Object Model (DOM) Nedir? - HANZELA

Virtual DOM için de durum aynı aslında değişen tek şey DOM’un bellekte lightweight bir şekilde tutulmasıdır. Kısaca DOM’un sanallaştırılmış hali diyebiliriz

React ile oluşturulmuş sayfanın html kodlarına “kaynağı görüntüle” seçeneği ile bakmak istediğinizde aşağıdaki gibi bir görüntü ile karşılaşırsınız.

React SPA HTML Kodları

Ekran görüntüsünde seçili alan dışında görüntülemeye dair başka bir DOM yer almıyor. Oluşan DOM’u görebilmek için view source yerine tarayıcının Developer Tools uygulamasını F12 tuşu ile açıp elements sekmesine geçiş yapmamız gerekiyor.

React SPA Develp

Biraz önce de değindiğimiz gibi index.html dosyası sunucu tarafından istemciye gönderiliyor. React tarafında oluşan JavaScript uygulaması istemci tarafında index.html dosyası içerisinde yer alan root id’li div’in içerisine uygulamayı dinamik olarak sonradan oluşturuyor. İlk aşamada herhangi bir DOM olmadığı için sonradan oluşan DOM’a Virtual DOM deniyor.

Proje Yapısı

Yukarıdaki ekran görüntüsü codesandbox.io ile oluşturuldu. Bir template (Create-react-app komutu da dahil) ile oluşturulan proje yapısı genel olarak bu şekilde görünür ve bize hazır bir proje yapısı sunar. Eğer tüm ayarlamaları kendininiz yapmak isterseniz biraz webpack bilgisine ihtiyacınız olacaktır.

public klasörü içerisinde yer alan index.html dosyası bizim için önemli. Projemiz ilk olarak bu dosya ile ayağa kalkıyor. Web dünyasının doğası gereği browserlara bir html dosyası sunmak zorundayız.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">

	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
	
	<title>React App</title>
</head>

<body>
	<noscript>
		You need to enable JavaScript to run this app.
	</noscript>
	<div id="root"></div>
	
</body>
</html>

root tagi javascript tarafında bulunarak içerisine virtual dom basılıyor.

<div id="root"></div>

Bu işlem yukarıdaki ekran görüntüsünde yer alan index.js dosyasında gerçekleşiyor

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Bu yapı sayesinde dallanmaları başlatarak React uygulamamız geliştirmeye başlayabiliyoruz

Temel olarak React anatomisi bu şekilde. Bir sonraki yazımızda ekranda liste oluşturma konusunu ele alacağız.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.