React 初学者项目构想

2025-06-07

React 初学者项目构想

既然您现在已经熟悉了 React 的基础知识,您可以开始在 React 中构建小型项目。这里有一些您可以参考的想法或列表。

提示:从 1 个应用程序开始并首先完成它。无论你在哪里遇到困难,都可以使用 Google。如果你不明白,可以在 YouTube 上搜索逻辑。你可以参考各种教程,例如YouTube 上的Traversy MediaDev EdCoding Addict等等。阅读其他人的代码以了解逻辑并自行实现。

1.货币转换器: Github 代码库 - https://github.com/kritika27/currency-converter-reactjs 需要学习的概念:API 的使用、Select 选项、React hooks、state、props、数组。 演示链接- https://friendly-payne-18ef0b.netlify.app/
替代文本


2.Quotes Generator: Github 存储库- https://github.com/kritika27/quotes-generator-react 演示链接 - https://dazzling-snyder-2f0503.netlify.app/ 要学习的概念:如何从 Quotes API、数组中获取数据。
替代文本


3.书签: Github 存储库- https://github.com/kritika27/bookmark-reactjs 演示链接- https://nervous-fermi-c86968.netlify.app/ 要学习的概念:使用多个输入元素,验证输入框中的条目,验证 url,将多个项目添加到数组列表。
替代文本


4. 费用追踪器: Github 存储库- https://github.com/kritika27/expense-tracker-reactjs 演示链接 - https://angry-raman-08502b.netlify.app/ 要学习的概念:数组、map 和 reduce 函数、本地存储。
替代文本


5.使用 Firebase 的待办事项应用: Github 仓库:https://github.com/kritika27/todo-react-firebase 演示链接:https://dreamy-mcclintock-c13cf8.netlify.app/ 如果您不想使用后端,可以参考我之前关于“购物清单”的博客。 需要学习的概念:数组、Firebase、删除项目。
替代文本



如果你喜欢这个项目,请在 Github 上点赞。你也可以在TwitterGithub
上关注我 欢迎提出建议。祝你学习愉快 :)

文章来源:https://dev.to/kritika27/react-beginner-project-ideas-2dh9
PREV
如何在 React App 中流畅渲染图像?
NEXT
有用的 Docker shell 别名可以加速开发