Keydi-s-Restaurant:React项目实例

j8_962192
了解作者
201.6KB

文件大小
zip

文件格式
0

收藏次数
VIP专享

资源类型
0

下载次数
2022-06-13 05:08

上传日期

项目概念显示土耳其风味菜肴的菜单，可以添加，删除或更新新菜肴。项目中使用的技术和图书馆该项目通常使用React.js进行。 Bootstrapt 5用于改进界面。我使用React-router-dom库创建分页结构。 Json占位符用于保存，删除或更新（获取，删除，更新）数据。我们使用React-pose库来制作动画作品。它包含许多动画。我们使用Axios库在Json Server上处理事务。激活库 npm install react-router-dom //必须下载才能使用页面结构 npm install -g json-server //用于保存数据的Json Server npm install react-pose --save //做动画我们下载了npm install axios // axios库。我们用它来做诸如在json服务器上获取pos

递进结构

Keydi-s-Restaurant-main.zip
（共35个文件 · 201.6KB）

Keydi-s-Restaurant-main
package.json

811B
.eslintcache

5.2KB
api
db.json

4.9KB
package-lock.json

670.5KB
src
context.js

1.9KB
App.css

4.2KB
index.js

322B
reportWebVitals.js

362B
component
Navbar.js

492B
AddNewItem.js

5.7KB
NotFound.js

212B
Menu.js

1.4KB
pagination.js

586B
Category.js

704B
MenuItems.js

1.6KB
Uptade.js

6.2KB
logo.svg

2.6KB
App.test.js

246B
setupTests.js

241B
App.js

953B
index.css

4.2KB
.gitignore

310B
public
logo192.png

5.2KB
manifest.json

492B
robots.txt

67B
index.html

1.7KB
logo512.png

9.4KB
favicon.ico

3.8KB
README.md

2.3KB

内容介绍

## Projenin Konsepti Türk usulü yemeklerin gösterildiği yeni yemeklerin eklendiği , silindiği veya güncellendiği bir menü. ## Projede Kullanılan Teknolojiler ve Kütüphaneler <ol> <li>Proje genel hatları ile React.js kullanılarak yapılmıştır.</li> <li>Arayüz güzelleştirilmesi için Bootstrapt 5kullanılımıştır.</li> <li>Sayfalandırma yapısı oluşturmak için React-router-dom kütüphanesini kullandım.</li> <li>Verilerin Kaydedilip ,silinip veya güncellenmesi için (fetch,delete,uptade)Json Placeholder kullanıldı.</li> <li>Animasyonel işler yapabilmek için React-pose kütüphanesini kullandık. İçinde bir çok animasyon bulunduruyor.</li> <li>Json Server da işlem yapabilmek için Axios kütüphanesini kullandık.</li> </ol> ## Kütüphaneleri Aktif etemk için <ol> <li>npm install react-router-dom // Sayfasal yapıyı kullanmak için indirilmeli</li> <li>npm install -g json-server //Verileri tutmak için Json Server</li> <li>npm install react-pose --save //Animasyonel işler yapmak için</li> <li>npm install axios // axios kütüphanesini indirdik. json servera get post delete gibi işlemleri yapmak için kullandık.</li> </ol> ## Projenin Çalıştırılması <ol> <li>json-server --watch reactapp/api/db.json 3000 // En yukardaki apimizin içerisinden verileri 3000.Portda çalıştırıyoruz.</li> <li>npm run start // cmd ekranına yazarak projemiz kendisi otomatik açılıyor.</li> </ol> ## Kullanılan bazı terimler Ve kazanımlar <ol> <li>JSX format , props-drilling</li> <li>Virtual Dom </li> <li>States and Setstate Function</li> <li>Props and prop-types</li> <li>Context API (Provider,Consumer)</li> <li>Json Server (Fake API ,db.json) And Postman</li> <li>Axios library (put,delete,post,get)</li> <li>Action ,Reducer ,payload</li> <li>Dispatch and bind</li> <li>React-pose npm for animation</li> <li>React-events</li> <li>React-router-dom npm library (Router,Switch,Route,Link)</li> <li>Map Function </li> <li>react-function-component(rfc) ,react-default-component(rcc)</li> <li>Life Cycle (Component did mounting,uptading,Unmounting)</li> <li>Params and validations</li> <li>Github add , push ,delete ,commit method (github added),GitBash </li> <li>Use vs code ide </li> </ol>