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; }