成为前端大师的 9 个项目

介绍

结论

介绍

无论做什么，拥有合适的工具总是有益的。我喜欢远程工作，并且非常提倡远程软件开发。因此，我始终努力拥有最好的设备，以尽可能提高工作效率。撰写这类文章总是需要花费大量时间。幸运的是，iVanky帮助了我，并赞助了这篇文章，让我可以专心写作。最近，我有幸试用了他们最热门的产品之一——双 USB-C 扩展坞，它让我能够将我的两台宽屏显示器连接到我的 MacBook，并支持双 4K@60Hz 显示屏连接。它还支持高达 96W 的笔记本电脑充电，非常棒。如果您和我一样，想要升级设备，不妨看看这款产品以及他们的其他产品！接下来是文章：

无论您是编程新手还是经验丰富的开发者，在这个行业中，学习新的概念、语言/框架都是
跟上快速变化的必需。以 React 为例——它由 Facebook 开源，仅仅四年前就已成为全球 JavaScript 开发者的首选。当然，Vue 和 Angular 也拥有众多忠实的追随者。此外，还有 Svelte，以及像 Next.js 或 Nuxt.js 这样的通用框架，还有 Gatsby、Gridsome、Quasar 等等。如果您想成为一名出色的 JavaScript 专家级开发者，除了精通经典的 JavaScript 之外，您至少应该具备不同框架和库的经验。

为了帮助你成为前端大师，我收集了 9 个不同的项目，每个项目都有不同的主题，并采用不同的 JavaScript 框架或库作为技术栈，你可以构建它们并添加到你的作品集中。记住，没有什么比实际构建东西更能帮助你，所以继续吧，磨练你的思维，实现它！

使用 React（带钩子）构建电影搜索应用程序

你可以从使用 React 构建一个电影搜索应用开始。最终应用的外观如下图所示：

您将学到什么

构建此应用程序将提升你使用相对较新的 Hooks API 的 React 技能。示例项目使用了 React 组件、多个 Hooks、一个外部 API，当然还有一些 CSS 样式。

技术栈和功能

• 使用 Hooks 进行 React
• 创建 React 应用
• JSX
• CSS

该项目不使用任何类，为您提供了进入功能性反应的完美切入点，并且肯定会在 2020 年为您提供帮助。您可以在此处找到示例项目： https: //www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
按照教程进行操作或添加您自己的风格！

使用 Vue 构建聊天应用程序

另一个很棒的项目是使用我最喜欢的 JavaScript 库 VueJS 构建一个聊天应用。该应用看起来会像这样：

您将学到什么

按照本教程，您将学习如何从头开始设置 Vue 应用程序，创建组件、处理状态、创建路由、连接到第三方服务，甚至处理身份验证。

技术栈和功能

• Vue
• Vuex
• Vue 路由器
• Vue CLI
• 推杆
• CSS

这确实是一个很棒的项目，可以帮助你开始使用 Vue 或提高你现有的技能，以应对 2020 年的开发。你可以在这里找到教程：https://www.sitepoint.com/pusher-vue-real-time-chat-app/

使用 Angular 8 构建漂亮的天气应用

此示例将帮助您使用 Google 的 Angular 8 构建一个漂亮的天气应用程序：

您将学到什么

该项目将教您宝贵的技能，例如从头开始创建应用程序，从设计到开发一直到生产就绪的部署。

技术栈和功能

• Angular 8
• Firebase
• 服务器端渲染
• 网格布局和弹性框的 CSS
• 移动友好且响应迅速
• 黑暗模式
• 漂亮的用户界面

我非常喜欢这个综合项目，因为它不是孤立地学习，而是涵盖了从设计到最终部署的整个开发过程。你真的应该试试这个！
https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e

使用 Svelte 构建待办事项应用

与 React、Vue 和 Angular 相比，Svelte 算是新生事物，但它仍然是 2020 年的热门之一。好吧，待办事项应用程序不一定是最热门的话题，但这确实能帮助你磨练你的 Svelte 技能，如下所示：

您将学到什么

本教程将向您展示如何使用 Svelte 3 从头到尾制作一个应用程序。它利用了组件、样式和事件处理程序

技术栈和功能

• Svelte 3
• 成分
• 通过 CSS 进行样式设置
• ES 6 语法

市面上优秀的 Svelte 入门项目并不多，所以我觉得这个项目还算不错。说不定你正在创作另一个更全面的 Svelte 教程，并在明年的版本中分享给大家呢？https:
//medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6

使用 Next.js 构建电子商务购物车

Nextjs 是用于创建支持开箱即用服务器端渲染的 React 应用程序的最流行框架。本项目将向您展示如何构建如下所示的电子商务购物车：

您将学到什么

在这个项目中，您将学习如何设置 Next.js 开发环境、创建新页面和组件、获取数据、设置样式以及部署下一个应用程序。

技术栈和功能

• Next.js
• 组件和页面
• 数据获取
• 造型
• 部署
• SSR 和 SPA

拥有一个真实的例子（例如电商展示）来学习新知识总是很棒的。你可以在这里找到教程：
https://snipcart.com/blog/next-js-ecommerce-tutorial

使用 Nuxt.js 构建功能齐全的多语言博客网站

Nuxt.js 之于 Vue，就如同 Next.js 之于 React。这是一个结合了服务端渲染和单页应用强大功能的优秀框架。最终创建的应用将如下所示：

您将学到什么

这个示例项目将教你如何使用 Nuxt.js 构建一个功能齐全的网站，从初始设置到最终部署。它充分利用了 Nuxt 提供的许多酷炫功能，例如页面、组件以及 SCSS 样式设置。

技术栈和功能

• Nuxt.js
• 组件和页面
• Storyblok 模块
• Mixins
• Vuex 用于状态管理
• SCSS 用于样式
• Nuxt 中间件

这个项目真的很棒，涵盖了 Nuxt.js 的诸多优秀功能。我个人非常喜欢使用 Nuxt，所以你真的应该尝试一下，它也能让你成为更优秀的 Vue 开发者！
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial

使用 Gatsby 创建博客

Gatsby 是一个很棒的静态网站生成器，它底层使用了 React 和 GraphQL。以下是该项目的成果：

您将学到什么

在本教程中，您将学习如何利用 Gatsby 构建一个出色的博客，您可以在使用 React 和 GraphQL 的同时使用该博客撰写自己的文章。

技术栈和功能

• 盖茨比
• 反应
• GraphQL
• 插件和主题
• MDX / Markdown
• 引导 CSS
• 模板

如果你曾经想过创建一个博客，那么这是一个很好的例子，它展示了如何利用 React 和 GraphQL 来实现它。我并不是说 WordPress 永远是个糟糕的选择，但有了 Gatsby，你就可以创建高性能的网站，同时使用 React，这是一个非常棒的组合！
https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

使用 Gridsome 创建博客

Gridsome 之于 Vue……好吧，我们已经在 Next/Nuxt 中提到过这一点，但 Gridsome 和 Gatsby 也是如此。两者都使用 GraphQL 作为数据层，但 Gridsome 使用的是 VueJS。它也是一个很棒的静态网站生成器，可以帮助你创建精彩的博客：

您将学到什么

这个项目将教你如何使用 Gridsome、GraphQL 和 Markdown 构建一个简单的博客。它还将介绍如何通过 Netlify 部署该应用程序。

技术栈和功能

• 格里索姆
• Vue
• GraphQL
• Markdown
• Netlify

这当然不是最全面的教程，但涵盖了 Gridsome 和 Markdown 的基本概念，可能是一个很好的起点。https
://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome

使用 Quasar 构建类似 SoundCloud 的音频播放器应用

Quasar 是另一个 Vue 框架，也可用于构建移动应用程序。在本项目中，你将创建一个如下所示的音频播放器应用：

您将学到什么

虽然其他项目主要关注 Web 应用，但本项目将向您展示如何通过 Quasar 框架使用 Vue 创建移动应用。您应该已经拥有一个可运行的 Cordova 设置，并配置了 Android Studio / Xcode。如果没有，本教程中有一个 Quasar 网站的链接，他们会向您展示如何设置。

技术栈和功能

• 类星体
• Vue
• 科尔多瓦
• 波浪冲浪者
• UI 组件

一个小项目展示了 Quasar 在构建移动应用程序方面的强大功能。https
://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer

结论

在本文中，我向您展示了 9 个可以构建的项目，每个项目都侧重于不同的 JavaScript 框架或库。现在，选择权完全在您手中：您会尝试使用以前从未使用过的框架来尝试新事物吗？还是想通过完成一项您已经了解的技术的项目来增强技能？又或者，您会依赖您最喜欢的框架/库，并用它来完成所有项目？

我最近创建了一个新网站：The Smart Coder，在这里我为社区创建免费内容，例如更多有关javascript 项目的帖子。

如果您喜欢我写的内容并希望支持我和我的工作，请在Twitter上关注我，以了解有关编程、制作、写作和职业的更多信息🥰