[ EN ]

Create Popup in React with Typescript

A small guide on creating “popup” window with the help of Typescript and React.

---

Install the required package

Now we will install the styled-components package using the below command:

npm i styled-components

1. Step

• Let's create a new folder named components in the src folder

• 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şturyoruz.

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