发布于 2026-01-06 0 阅读
0

MovieDex——我的第一个 React 项目!DEV 全球展示挑战赛,由 Mux 主办:展示你的项目!

MovieDex - 我的第一个 React 项目!

由 Mux 赞助的 DEV 全球展示挑战赛:展示你的项目!

一个使用 React 和 Node.js 开发的电影搜索应用,它利用 TMDB 和 OMDB 数据库进行电影搜索 ⚛✨🎥。点击这里体验:MovieDex

项目

我在浏览 Dev 论坛时偶然发现了这篇文章:《2020 年成为前端大师的 9 个项目》,我想尝试列表中的第一个项目,于是我就动手做了!

我一口气就做出了第一个原型。我的应用能够搜索电影并显示它们。太棒了!

但我想要更刺激一些!

我想,如果用模态框的形式展示电影详情会怎么样?

这就是你要找的,一款可以搜索电影并提供相关详情的应用程序!

MovieDex 全屏桌面
MovieDex 搜索
MovieDex 信息模态框

由✨提供支持

  • Node.js:用于处理所有对TMDB和OMDB API的调用。我没有在客户端实现这些调用,因为它们涉及使用密钥进行调用。
  • React:我在这个项目中真正关注的重点。⚛💙
  • Material-UI:我非常喜欢它的组件!我在这个项目中使用的一些组件包括:卡片、文本框、对话框,以及我个人最喜欢的骨架加载器。
  • 电影数据库:用于搜索电影。
  • 开放电影数据库API:提供丰富的数据。(TMDB API不提供评级信息)。
  • Logo是我设计的。字体:BLANKA。稍微修图了一下,锵锵!😂

关于我的 React 学习历程的一些背景介绍:

我大概是从七月初开始学习 React 的吧?
我的学习资料包括YouTube 上Codevolution制作的超棒的 React 教程、官方 React 文档,以及一些零散但极具启发性的博客文章(作者各不相同)。

我强烈推荐上面提到的教程。

我希望未来能做出更好、更大的作品!我会不断学习和进步。如果您喜欢这个项目,请在 GitHub 上给它点个星并分享!😇 非常感谢您的任何建议和反馈。😄

如果你错过了这些链接,

注意安全!=)

更新:感谢js.org的各位为 Moviedex 提供了一个很棒的域名!

文章来源:https://dev.to/kretaceous/moviedex-my-first-react-project-1o7h