另外 9 个项目可以磨练您的前端技能

介绍

无论你是编程新手还是经验丰富的开发者，学习新的概念和语言/框架对于跟上行业发展趋势都至关重要。

以 React 为例——Facebook 在四年前将其开源，如今它已成为全球 JavaScript 开发人员的首选。

当然，Vue 和 Angular 也拥有各自的忠实拥趸。此外还有 Svelte 以及其他通用框架，例如 Next.js 或 Nuxt.js。还有 Gatsby、Gridsome、Quasar……等等。

如果你想证明自己是一名技术娴熟的 JavaScript 开发人员，除了使用传统的 JS 进行开发之外，你至少应该有一些使用各种框架和库的经验。

为了帮助你在 2020 年成为前端高手，我整理了九个不同的项目，每个项目都侧重于不同的 JavaScript 框架和库，旨在展示你的技术栈并将其添加到你的作品集中。记住，没有什么比实际动手实践更有帮助，所以行动起来，开动脑筋，把它变成现实吧！

这篇文章是在爱迪生软件的支持下翻译的，它 为多品牌商店制作虚拟试衣间和 测试软件.

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

您可以开始的第一件事是使用 React 创建一个电影搜索应用程序。 下图显示了最终应用程序的外观：

你会学到什么
通过构建此应用程序，您将通过使用相对较新的 Hooks API 来提高您的 React 技能。 该示例项目使用 React 组件、大量钩子、外部 API，当然还有一些 CSS 样式。

技术堆栈和功能

• 使用钩子进行反应
• 创建反应应用
• x
• 的CSS

在不使用任何类的情况下，这些项目为您提供了函数式 React 的完美切入点，并且肯定会在 2020 年为您提供帮助。 你可以找到 示例项目在这里。 按照说明进行操作或自行制作。

使用 Vue 的聊天应用程序

您要做的另一个很棒的项目是使用我最喜欢的 JavaScript 库：VueJS 创建一个聊天应用程序。 该应用程序将如下所示：

你会学到什么
在本教程中，您将学习如何从头开始制作 Vue 应用程序 - 创建组件、处理状态、创建路由、连接到第三方服务，甚至处理身份验证。

技术堆栈和功能

• Vue公司
• 威克斯
• Vue路由器
• 命令行界面
• 推
• 的CSS

对于开始使用 Vue 或提高现有技能以在 2020 年进入开发来说，这确实是一个很棒的项目。 你可以找到 教程在这里.

使用 Angular 8 打造漂亮的天气应用

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

你会学到什么
该项目将教您从头开始构建应用程序的宝贵技能 - 从设计到开发，一直到可部署的应用程序。

技术堆栈和功能

• 角度8
• 火力地堡
• 服务端渲染
• CSS 与网格和 Flexbox
• 移动友好性和适应性
• 黑暗模式
• 美观的界面

我真正喜欢这个包罗万象的项目的一点是，你不会孤立地研究事物。 相反，您将学习从设计到最终部署的整个开发过程。

使用 Svelte 的待办事项应用程序

Svelte 就像基于组件的方法的新生——至少类似于 React、Vue 和 Angular。 这是2020年最热门的新产品之一。

待办事项应用程序不一定是最热门的话题，但它确实可以帮助您磨练您的 Svelte 技能。 它看起来像这样：

你会学到什么
本教程将向您展示如何从头到尾使用 Svelte 3 创建应用程序。 您将使用组件、样式和事件处理程序

技术堆栈和功能

• 苗条3
• 组件
• 使用 CSS 设计样式
• ES 6 语法

好的 Svelte 入门项目并不多，所以我发现 这是一个不错的选择.

使用 Next.js 的电子商务应用程序

Next.js 是构建支持开箱即用的服务器端渲染的 React 应用程序的最流行框架。

该项目将向您展示如何创建如下所示的电子商务应用程序：

你会学到什么
在此项目中，您将学习如何使用 Next.js 进行开发 — 创建新页面和组件、提取数据以及设计和部署 Next 应用程序。

技术堆栈和功能

• Next.js
• 组件和页面
• 数据采样
• 风格化
• 项目部署
• SSR 和 SPA

拥有一个像电子商务应用程序这样的现实世界的例子来学习新东西总是很棒的。 你可以 在这里找到教程.

使用 Nuxt.js 的成熟多语言博客

Nuxt.js 适用于 Vue，Next.js 适用于 React：一个结合服务器端渲染和单页应用程序功能的出色框架
您可以创建的最终应用程序如下所示：

你会学到什么

在此示例项目中，您将学习如何使用 Nuxt.js 创建完整的网站，从初始设置到最终部署。

它利用了 Nuxt 提供的许多很酷的功能，例如页面和组件以及 SCSS 样式。

技术堆栈和功能

• Nuxt.js
• 组件和页面
• 故事块模块
• 盲鳗
• Vuex 用于状态管理
• SCSS 用于样式设置
• Nuxt中间件

这是一个非常酷的项目，其中包括许多出色的 Nuxt.js 功能。 我个人喜欢使用 Nuxt，所以你应该尝试一下，因为它也会让你成为一名优秀的 Vue 开发人员。

盖茨比博客

Gatsby 是一个使用 React 和 GraphQL 的优秀静态站点生成器。 这是该项目的结果：

你会学到什么

在本教程中，您将学习如何使用 Gatsby 创建一个博客，您将用它来使用 React 和 GraphQL 编写自己的文章。

技术堆栈和功能

• 盖茨比
• 应对
• GraphQL
• 插件和主题
• MDX/降价
• 引导 CSS
• 模板

如果您曾经想创建一个博客， 这是一个很好的例子 关于如何使用 React 和 GraphQL 来实现它。

我不是那个意思。 WordPress 这是一个糟糕的选择，但使用 Gatsby 可以让你使用 React 构建高性能网站——这是一个绝妙的组合。

使用 Gridsome 写博客

Gridsome for Vue...好吧，我们已经在 Next/Nuxt 中实现了这个。
但 Gridsome 和 Gatsby 也是如此。 两者都使用 GraphQL 作为数据层，但 Gridsome 使用 VueJS。 这也是一个令人惊叹的静态站点生成器，它将帮助您创建出色的博客：

你会学到什么

该项目将教您如何创建一个简单的博客以开始使用 Gridsome、GraphQL 和 Markdown。 它还介绍了如何通过 Netlify 部署应用程序。

技术堆栈和功能

• 网格状
• Vue公司
• GraphQL
• 降价
• Netlify

这当然不是最全面的教程，但它涵盖了 Gridsome 和 Markdown 可能是一个很好的起点.

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

Quasar 是另一个可用于创建移动应用程序的 Vue 框架。 在此项目中，您将创建一个音频播放器应用程序，例如：

你会学到什么

虽然其他项目主要关注 Web 应用程序，但这个项目将向您展示如何使用 Vue 和 Quasar 框架创建移动应用程序。
你应该已经有一个配置好的、可以正常运行的 Cordova 环境了。 Android Studio/Xcode。如果没有，指南中提供了 Quasar 网站的链接，上面展示了如何进行所有设置。

技术堆栈和功能

• 类星体
• Vue公司
• 科尔多瓦
• 冲浪者
• 用户界面组件

小项目，展示了 Quasar 创建移动应用程序的能力。

来源： habr.com