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 : styled components, React componentlerini CSS ile şekillendirmek için kullanılan popüler bir kütüphanedir.

npm i styled-components

1. Adım

• src klasörü içerisinde components adında yeni bir klasör oluşturun. Projelerimizde basit ve iç içe klasörlerin az olduğu bir yapı tercih etmeliyiz çünkü daha organize bir klasör yapısı proje geliştikçe büyük kolaylık sağlayacaktır. Burada components yani bileşenler klasörümüzü oluşturarak her bir bileşen için alt bir klasörleme yapabilirsiniz bu size kolaylık sağlayacaktır ve genel kullanım bu şekildedir..
• component klasörünün içerisinde popup adında yeni bir klasör oluşturun.

src

├── components

│ ├── popup

• Popup klasörü altında aşağıdaki kodları içeren index.styled.ts adlı bir typescript dosyası oluşturun. Bu oluşturduğumuz dosya paket olarak kurduğumuz styled-components stil kodlarını içermektedir.

  • 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> ) }