Photo by AARN GIRI on Unsplash

KÜTÜPHANE ANALIZI

React Nedir?

React Web/Mobil vb uygulamalar ve sayfalar oluşturmak için UI (Kullanıcı arayüzü) oluşturmanızı sağlayan bileşen kütüphanesidir.

React kullanıcı arayüzleri ve uygulama geliştirmek için bir sürü kütüphane, konsept, kavrama dokunuyor. Özetle react ile birlikte bir ekosistem söz konusu. Ben bu yazıda sadece React kütüphanesine odaklanarak API içerisinde biz geliştiricilere neler sağladığı üzerinde duracağım.

React API’sini incelediğimizde kütüphane bileşenlerinin aşağıdaki gibi sıralayabiliriz.

• React
• ReactDOM
• ReactDOMServer
• DOMElements & SyntheticEvents
• TestUtilities
• TestRenderer

React Kütüphanesi

Kullanıcı arayüzü oluşturmanızı sağlayan Javascript kütüphanesi. Aşağıdaki şekilde kütüphanenize dahil ederek kullanabilirsiniz.

import React from ‘react’

React API Fonksiyonları

Temel Fonksiyonlar

Components: Bileşenleri oluşturmanızı sağlayan veya bunların performanslı şekilde render edilmesini sağlayan sınıf ve fonksiyonlara sahiptir.

• React.Component:
• React.PureComponent:
• React.memo

Elements: JSX formatında yazdığımız div, span, veya React bileşenlerini aslında arka planda Babel tarafından React.createElement fonksiyonları ile VirtualDOM oluşturulan React DOM elemanlarıdır.

• React.createElement
• React.createFactory

Transforming Elements: React elemanlarını üzerinde gezinmenizi ve değişimler yapmanıza olanak sağlayan API’dir.

• React.cloneElement
• React.isValidElement
• React.children

Refs: React VDOM nesnelerin , gerçek DOM nesnelerine referans tutarlar. Bazen kod üzerinden bu DOM nesnelerinin referansların özelliklerini veya aksiyonlarını çağırma ihtiyacı duyarız bunun için aşağıdaki API fonksiyonlarını kullanabilirsiniz.

• React.createRef
• React.forwardRef

Fragment: React bileşenleri önceden tek bir React eleman döndürmeleri gerekiyordu, bundan dolayı her return elemanlarını <div> içerisinde tek bir root obje içersinde toplamak gerekiyordu. Fragment ile <> artık return içerisinde array of element dönebilir hale geldi.

• React.Fragment

Suspense : React dynamic import ile uzaktan kod veya bileşen import etmenizi ve bu async işlem sırasında ekranda göstermek istediğiniz arayüzü oluşturmanızı sağlayan fonksiyonlar içerir

• React.lazy
• React.suspense

Hooks API

React geliştirme normalde Class Componentlar üzerine çalışan bir kütüphaneydi. Function Componentlar state tutamadıkları ve lifecycle yapısı içermedikleri için Enterprise bir Web uygulamasını Function Componentlar ile gerçekleştirmek mümkün değildi. Fakat aşağı bahsedilen Hook API si sayesinde Function Componentlar ile de uygulama geliştirmek mümkün hale geldi. Aşağıdaki Hook kulllanımlarını https://onurdayibasi.com/react-hooks/ linkindeki yazılardan detaylı bir şekilde öğrenebilirsiniz.

Basic Hooks

• useState
• useEffect
• useContext

Additional Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

React-DOM Kütüphanesi

React’ı oluşturduğu model (Virtual DOM) üzerinden DOM spesifik metodlara ulaşmasını sağlayan bir kütüphanedir.

import ReactDOM from 'react-dom'

React-DOM

Buradaki fonksiyonlar React VirtualDOM tuttuğu bileşen ve eleman yapısını Render ile tarayıcı DOM yapısına veya hydrate ile ServerSide aktarmasını sağlar, bunun yanında bileşenlerin DOM karşılıkları üzerinde arama, yeni bir root oluşturma veya bileşenin düğüm bağlantısını ortadan kaldırma gibi işlemler için fonksiyonlar içerir.

• render()
• hydrate()
• unmountComponentAtNode()
• findDOMNode()
• createPortal()

ReactDOMServer Kütüphanesi

ReactDOMServer kütüphanesi statik HTML halini sunucu tarafında oluşturmak için (ServerSide Rendering) yöntemlerini için Node üzerinde React kütüphanesinin çalışmasını sağlayan bir takım fonksiyonlar sunar.

import ReactDOMServer from 'react-dom/server'; //ES Module
var ReactDOMServer = require('react-dom/server'); //CommonJS

• renderToString()
• renderToStaticMarkup()
• renderToNodeStream()
• renderToStaticNodeStream()

DOM Elements ve SyntheticEvents

React bir çok farklı ortamda (Tarayıcı, Backend, Testing, Native …) Kullanıcı arayüzü geliştirmeyi sağladığı için HTML DOM yapısına benzer Virtual DOM içerisinde tuttuğu DOM Eleman yapısına sahiptir. Bunlar normal DOM elemanlarından farklı camelCase isimlendirmeler ile çalışır.

Örneğin;

onclick --> DOM 
onClick --> React DOM

DOM Elements & SyntheticEvent

Aynı durum eventler içinde geçerlidir. React SyntheticEvent yapısı ile Cross Platform Eventleri handle etme imkanı buluruz.

Test Utilities

Bileşen kütüphanelerinin testi için bir takım utility fonksiyonlar sağlar.

import ReactTestUtils from 'react-dom/test-utils'; // ES6
ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm

React’ın önerisi 16 öncesi versiyonlar için Enzyme üstü kütüphaneler için React Testing Library tercih edilmesi yönünde.. ve JS testlerinde de Jest kullanılması

We recommend using React Testing Library which is designed to enable and encourage writing tests that use your components as the end users do.

For React versions <= 16, the Enzyme library makes it easy to assert, manipulate, and traverse your React Components’ output.

React Test Utils.

• act()
• mockComponent()
• isElement()
• isElementOfType()
• isDOMComponent()
• isCompositeComponent()
• isCompositeComponentWithType()
• findAllInRenderedTree()
• scryRenderedDOMComponentsWithClass()
• findRenderedDOMComponentWithClass()
• scryRenderedDOMComponentsWithTag()
• findRenderedDOMComponentWithTag()
• scryRenderedComponentsWithType()
• findRenderedComponentWithType()
• renderIntoDocument()
• Simulate

Test Renderer

Adından anlaşılacağı üzere bileşenlerin Test için Render edilmesi.

Bunu normal DOM renderer ve ServerDOM renderer ile neden yapmıyoruz ?

• DOM üzerinde işlem yapmak masraflı çünkü (Bağımlılık artıyor, Yavaş çalışır vs…)
• ServerDOM ise statik metinler oluşturuyor, karşılaştırma vb.. işlemler için parse edilmesi gerekiyor..

En iyi Renderer bileşenleri JS Plain Objelerine yazsın ve biz testler sırasında buradaki bellekteki Objeleri kullanarak karşılaştırma yapabilelim.

import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm

TestRenderer

• TestRenderer.create()
• TestRenderer.act()

TestRenderer instance

• testRenderer.toJSON()
• testRenderer.toTree()
• testRenderer.update()
• testRenderer.unmount()
• testRenderer.getInstance()
• testRenderer.root

TestInstance

• testInstance.find()
• testInstance.findByType()
• testInstance.findByProps()
• testInstance.findAll()
• testInstance.findAllByType()
• testInstance.findAllByProps()
• testInstance.instance
• testInstance.type
• testInstance.props
• testInstance.parent
• testInstance.children

Not: React API’sinin detayları ve ekosistem için aşağıdaki React notlarını onurdayibasi.com adresinden okuyabilirsiniz.

https://onurdayibasi.com/

Referanslar

• https://reactjs.org/docs/react-api.html

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Çalışma Mantığı) erişmek için bu linke tıklayabilirsiniz.

Bu yazının devamı veya yazı grubundaki diğer yazılara (Ürün ve Kütüphaneler) erişmek için bu linke tıklayabilirsiniz.