Скачать или смотреть React + Typescript + Basit Todo Uygulaması

#react #typescript #reacttypescript

Udemy;
https://www.udemy.com/course/uctan-uc...

React ile birlikte Typescript kullanarak basit bir todo uygulaması yapılması.

npx create-react-app my-app --template typescript
diyerek proje oluşturabilirsiniz.

app.css
.appWrapper{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
}
.todoList{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.todoItem{
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
box-sizing: border-box;
height: 40px;
padding: 10px;
border-radius: 3px;
margin-top: 20px;
display: flex;
align-items: center;
}
.todoItem .todoItemText{
flex: 1;
}
.todoItemActions{
display: flex;
align-items: center;
justify-content: space-evenly;
}
.todoItemDelete{
display: flex;
align-items: center;
justify-content: center;
height: 40px;
margin-right: 16px;
box-sizing: border-box;
background: red;
color: #ffffff;
cursor: pointer;
padding: 20px;
}
.todoItemUpdate{
display: flex;
align-items: center;
justify-content: center;
height: 40px;
margin-right: 16px;
box-sizing: border-box;
background: orange;
color: #ffffff;
cursor: pointer;
padding: 20px;
}
.inputWrapper ,input{
width: 100%;
height: 40px;

}
.inputWrapper input{
box-sizing: border-box;
padding-left: 22px;
outline: none;
border: 1px solid #ddd;
border-radius: 3px;
}