TR

TypeScript ile React'te Popup Oluşturun

TypeScript ve React yardımıyla “Popup” oluşturmaya yönelik küçük bir kılavuz.

---

Gerekli paketleri yükleyin

Aşağıdaki komutu kullanarak styled-components paketini kuracağız.:

npm i styled-components

1. Adım

• src klasöründe component adında yeni bir klasör oluşturalım

• Let's create a new folder called popup in the components folder

• Create a file named index.styled.ts with following code

  • index.styled.ts : Buradaki kodları açıklamak gerekirse popup bileşenimize ait style özelliklerimizi belirlemek için daha önce paket olarak kurduğumuz syled-components paketinden yardım alarak syles özelliklerini belirtiyoruz.

• Daha sonra aşağıdaki kodla index.tsx adlı bir dosya oluşturun.

  • index.tsx : Bu dosyayı oluşturmamızdaki amaç popup bileşenimizi işlemek (render etmek) için oluşturuyoruz. Burada oluşturduğum kodlara göz atmamız gerekirse öncelikle

• Kullanıcı arayüzü oluşturmanızı sağlayan Javascript kütüphanesini. Aşağıdaki şekilde dahil ediyoruz.

import React from "react";

• Popup isminde bir sınıf oluşturuyoruz.

const Popup = () => { return( <> Hello Popup! <> ) }

• Daha sonra oluşturduğumuz style özelliğimizi ekliyoruz. Aşağıdaki şekilde dahil ediyoruz.

import {Area, Background} from "./index.styled"

const Popup = () => { return( <Area> <Background/> </Area> < div className="content"> Hello Popup! </ div> ) }

• Oluşturduğumuz sınıf için kullanacağımız bileşenleri belirliyoruz. Bunun için Props isminde bir type oluşturuyoruz.
  • show isminde boolean tipinde popup clasımızın durumunu tutmak için bir tip oluşturuyoruz.
  • close isminde void tipinde popup clasımızın durumunu tetiklemek için bir tip oluşturuyoruz.
  • title isminde string tipinde popup clasımızın başlık bilgisini tutmak için bir tip oluşturuyoruz.
  • desc isminde string tipinde popup clasımızın açıklama bilgisini tutmak için bir tip oluşturuyoruz.

type Props = { show: boolean; close: () => void; title?: string; desc?:string; }

• Oluşturduğumuz bileşenleri sınıfımızda kullanmak için bileşenleri React.FC yapısı ile sınıfıza dahil ediyoruz.

const Popup:React.FC<Props> = (props) => { return( <Area> <Background/> </Area> < div className="content"> Hello Popup! </ div> ) }

• index.styled.ts içerisinde Background isminde style-components yardımı ile bir div belirlemiştik ve bu div içerisinde herhangi bir yere tıklandığında popup kapatılmasını istiyoruz bu yüzden onClick yapısından yararlanabiliriz:
• show isminde boolean tipinde bir değişken belirlemiştik render durumunu kontrol etmek için eğer bu değişken false değer döner ise bunu bir if içerisine alarak return olarak null dönmesini sağlıyoruz eğer true döner ise return işlemini tamamlıyoruz.

const Popup:React.FC<Props> = (props) => { if (!props.show) return null; return( <Area> <Background onClick={() => props.close()}/> </Area> < div className="content"> Hello Popup! </ div> ) }