DEV Community
·
React 编码挑战 - 使用 React 实现城市/产品销售浏览器
内容提要
开发一个简单的React应用程序，显示城市和产品销售信息，具有路由和动态数据获取功能。用户可以在不同页面之间导航，并且可以跟踪访问的城市和产品数量。数据应在用户请求时刷新。应用程序包括主页、城市详情页和产品详情页，以及刷新按钮。使用React实现单页应用程序，并正确处理导航和URL。评估标准包括React组件的适当重用、React特性的高效使用、路由的正确实现以及代码结构和模块化的最佳实践。交付物是一个满足要求的React应用程序，结构清晰，注释完整，易于导航。确保应用程序处理边缘情况，如缺少数据或错误的URL。
关键要点
-
开发一个简单的React应用程序，显示城市和产品销售信息，具有路由和动态数据获取功能。
-
用户可以在不同页面之间导航，并跟踪访问的城市和产品数量。
-
数据应在用户请求时刷新，包括主页、城市详情页和产品详情页，以及刷新按钮。
-
主页显示城市和产品名称列表，并初始化访问计数器为0。
-
城市详情页和产品详情页通过API获取特定城市或产品的销售信息。
-
点击刷新按钮应重新加载数据并重置访问计数器。
-
应用程序应实现为单页应用程序（SPA），并正确处理导航和URL。
-
评估标准包括组件重用、React特性的高效使用、路由的正确实现和代码结构的最佳实践。
-
交付物应为一个结构清晰、注释完整、易于导航的React应用程序。
-
确保应用程序处理边缘情况，如缺少数据或错误的URL。
延伸问答
这个React应用程序的主要功能是什么？
该应用程序显示城市和产品的销售信息，支持路由和动态数据获取。
如何在应用程序中跟踪访问的城市和产品数量？
应用程序通过两个计数器来跟踪访问的城市和产品数量，初始值为0，并在访问相应页面时递增。
用户如何刷新数据并重置计数器？
用户可以点击刷新按钮，重新加载数据并将计数器重置为0。
应用程序是如何处理路由的？
应用程序实现为单页应用程序（SPA），使用React路由处理不同页面之间的导航。
应用程序在获取城市和产品数据时使用了哪些API？
应用程序使用两个API，一个用于获取城市列表，另一个用于获取产品列表。
评估该React应用程序的标准是什么？
评估标准包括组件重用、React特性的高效使用、路由的正确实现和代码结构的最佳实践。
