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
  • 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 <b>React.js</b> kullanılarak yapılmıştır.</li> <li>Arayüz güzelleştirilmesi için <b>Bootstrapt 5</b>kullanılımıştır.</li> <li>Sayfalandırma yapısı oluşturmak için <b>React-router-dom</b> kütüphanesini kullandım.</li> <li>Verilerin Kaydedilip ,silinip veya güncellenmesi için (fetch,delete,uptade)<b>Json Placeholder</b> kullanıldı.</li> <li>Animasyonel işler yapabilmek için <b>React-pose</b> kütüphanesini kullandık. İçinde bir çok animasyon bulunduruyor.</li> <li>Json Server da işlem yapabilmek için <b>Axios</b> 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> <b> <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> </b>
评论
    相关推荐
    • bootstrap-npm-starter:用于新的由Bootstrap驱动的npm项目的入门模板
      Bootstrap NPM入门模板 立即创建由Bootstrap支持的npm项目。 关于 bootstrap-npm-starter是一个GitHub模板存储库,用于创建由Bootstrap支持的新的npm项目,由Bootstrap共同作者@mdo维护。 您也可以将其用作自己的...
    • bootstrap
      Bootstrap NPM入门模板 立即创建新的由Bootstrap驱动的npm项目。 关于 bootstrap-npm-starter是一个GitHub模板存储库,用于创建由Bootstrap支持的新的npm项目,由Bootstrap共同作者@mdo维护。 您也可以将其用作自己...
    • react-bootstrap-npm-kit:React+Bootstrap+NPM+Browserify 的入门套件
      react-bootstrap-npm-kit React+Bootstrap+NPM+Browserify 的入门套件 快速开始 运行make来构建。 为方便起见,请使用文件观察器,例如 。 有用的开发工具 - 无需完全刷新即可更新浏览器内的 CSS。 - 使用 JSX ...
    • bootstrap-for-vue
      引导程序 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
    • backbone_bootstrap_base
      bone_bootstrap_base 设置 npm install bower安装
    • bootstrap-vue
      vue-bootstrap 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
    • bootstrap-themes
      引导主题 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
    • react-bootstrap-utils:React Bootstrap
      react-bootstrap-utils Boostrap v4组件的React实现。 文档和演示: : 路线图 []精明 []表格范围 []基于配置选项的表单生成 []输入帮助 []根据其他字段进行输入重置 []输入遮罩 []个输入组 []隐藏/显示表单输入 ...
    • ReactApp2:用于NpmBootstrap
      npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见...
    • ember-cli-bootstrap-components
      npm install ember-cli-bootstrap-components 用法 bs-输入 为普通引导表单包装标签和文本输入。 可以接受以下值的绑定: 为了 标签文本 类型 ID 占位符 价值 错误 假定错误遵循 DS.Errors 的约定,并且是具有消息...