所以我用 React 创建了 Spotify Clone（有点）

大家好！👋

在深入研究该应用程序之前，我只想给出一些指示，以免大家感到困惑。

• 这个应用纯粹是为了好玩而做的。我决定这么做是因为我对前端，尤其是 React，还不熟悉。
• 我使用了 spotify api，因此所有歌曲都有一个，preview_url所以它们不会完整播放，只播放前 30 秒
• 非常感谢名为 Clever Programmer 的 YouTube 频道。他们用 React 启动了这个项目。他们实现了设计，并演示了 API 的工作原理。我借鉴了他们的经验，最终实现了歌曲播放，以及一些没有功能的按钮。（他们的应用只是一个“设计”上的克隆，功能不多。）
• 因为我遵循了其他人的设计，所以该应用程序最终没有那么灵敏，可能最好与您的个人电脑、笔记本电脑和平板电脑一起使用。

它是如何工作的

此应用程序目前支持以下内容。

• 使用 spotify api 登录
• 获取在 spotify 上创建的用户播放列表
• 点击播放列表会在屏幕上显示歌曲
• 在歌曲之间切换，并播放 30 秒
• 音量可调

近期将添加的内容：

• 随机播放和重复播放按钮可用（已完成✅）
• 上一个和下一个按钮可用
• 您将能够 ❤️ 您最喜欢的歌曲，它们将被放置在自己的播放列表中
• 使用 Bootstrap 重新设计，使应用程序响应更快

项目截图

登录页面

正文页

动态弹头

那么是什么促使我创作这个的呢？

正如我上面所写，我是前端领域的新手。过去两年我一直从事软件开发工作，主要关注后端。因此，创建 API、微服务、与数据库（NoSQL、SQL、键值存储等）交互、docker 等一直是我的主要工作重点。

最近我决定换个方向，尝试学习更多关于前端的知识。我很快就掌握了 Vue.js，因为它可能是最快、最容易上手的前端语言。我创建了一些小应用，只是测试一下它们的工作原理、生命周期、以及它们如何连接到 Vuex 等等。

现在我决定尝试一些新东西（比如 React）也未尝不可，这样我就可以比较这两个框架，更好地理解它们的工作原理。两者各有优缺点。

从我的代码中可以清楚地看出，我并非前端专家，所以请耐心等待我改进代码并添加新功能。虽然对某些人来说可能只需要几分钟，但每当我遇到问题时，我仍然需要花一些时间在 StackOverflow 和其他类似页面上寻求帮助。

应用程序状态

这个应用仍在开发中，距离完成还很远。我正在尝试边开发边创建问题并添加新功能。工作让我没有太多空闲时间，所以我的开发进度很慢。而且，我对前端技术还不熟悉，这对我来说也没什么帮助。

您可以看到问题定期添加到 repo 中，我会尽力解决这些问题。

下一步

如果社区愿意的话，一旦我完成了所有 React 方面的事情，我很有兴趣用 Vue.js 重新创建这个应用。这样，我就可以写一篇文章，分析这两个框架的优缺点，并看看哪一个对初学者来说更容易学习。

但如果您想看到这一点，请告诉我。

谨致问候，我在这个社区还很新，所以希望我的帖子有意义。

Github链接：https://github.com/fvukojevic/Spotify-React-Clone