Photo by Jack Hamilton on Unsplash

REACT

React Projemizi JavaScript’ den TypeScript’ de Nasıl Dönüştürebiliriz ? -3

Burada amacım önceden Class Component kullanarak yazmış olduğumuz React projesini TypeScript dönüştürürken nelere dikkat etmemiz gerektiği üzerinde duracağım.

Bu yazıda React kütüphanesinin sağladığı yapıları nasıl TypeScript içerisinde kullandığımız üzerinde duracağım.

• React.Element,
• React.Node,
• React.Fragment,
• React.Component

React Element

React.createElement ile Elementler oluşturup ReactDOM.render içerisinde bu elementlerin ekrana çizdirilmesi için Virtual DOM üzerinden işleme girmesini sağlar.

React.createElement fonksiyonunu React projesi içerisinde görmüyoruz. Bunun yerine bileşenler içerisinde return içerisinde JSX içerisindeki HTML + JS yapıları React Elementlerine yukarıdaki fonksiyon ile dönüştürülüp kullanılmaya başlanır.

const aElement= <Calculator/>;
const bElement= React.createElement("ABC");

Peki ReactElement dediğimiz şey nedir ?

React Element aslında bir obje. Bu objenin type, key ve props olmak zorunda. Buna göre VirtualDOM üzerinden render ediliyor. ve Yukarıdaki tanımlamalar bu ReactElement oluşturmanızı sağlıyor.

type Key = string | number

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

React Node

React kodu yazarken her zaman type olan bir obje olmak zorunda değil, aşağıdaki tanımdaki gibi bir string, number, Element, Fragment, Portal, boolean, null veya undefined olabilir.

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

React VirtualDOM üzerinde Render edebileceği her türe ReactNode diyoruz.

React Fragment

Eksi React versiyonlarında bileşenler render sonrası tek bir eleman dönmesi ve içerisinde bir takım diğer elemanlar bunun çocuğu olarak yer alması gerekiyordu

render() {
  return (
    <div> -> <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </div> -> </React.Fragment>
  );
}

Bunun yerine tüm elemanları bir parent container olmadan dönebilecek bir yapı oluşturmak istediler ve bunun için <> , <React.Fragment> kullandılar.

React Component

React içerisinde 2 tip bileşen türü bulunuyor. Bir tanesi Class Component, bir diğeride Function Component. Bu 2 bileşen türüde artık state tutabiliyor. Eskiden Function Component state tutma yetenekleri yok iken useState ile bu yeteneğe sahip oldular.

class Hello extends React.Component {
   render() { return <div>Hello</div>}
}
const Hello = () => {return <div>Hello</div>}

ComponentType türünü incelediğimizde P tipinde {} obje alacak ve bu bir

• ComponentClass veya
• FunctionComponent olabilecek

type ComponentType<P = {}> =| ComponentClass<P | FunctionComponent<P>;

şeklinde tanımlama yapılmıştır.

Okumaya Devam Et 😃

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