无论你是编程新手，还是经验丰富的开发人员，都需要不断学习新的概念和语言 / 框架，才能跟得上这个快速变化的行业。以 React 为例——它在 4 年前才被 Facebook 开源，如今已经成为全球 JavaScript 开发人员的首选。当然还有 Vue 和 Angular，它们也有自己庞大的追随者群体。然后是 Svelte、Next.js 和 Nuxt.js 等通用框架，以及 Gatsby、Gridsome、Quasar 等等。如果你想成为一名专业的 JavaScript 开发人员，那么你至少应该具备其中一些框架和库的相关经验——前提是打好你的基本功，练好基础的 JS 技术。

为了帮助你在2020年成为前端大师，我收集了9个不同的项目，每个项目都有各自不同的主题和作为技术栈的JavaScript框架或库，你可以构建它们，并将它们添加到自己的技能组合中。记住，对你来说最有帮助的就是实际构建一些东西了。因此，请洗把脸清醒一下，开始练习吧！

使用React（带Hooks）构建电影搜索应用

首先，你可以使用React构建一个电影搜索应用。下面是完成版应用的截图：

你将学到什么内容

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

技术栈和功能

带Hooks的React
create-react-app
JSX
CSS

这个项目不使用任何类，为你提供了掌握函数式React编程的完美切入点，并且肯定会在2020年为你提供帮助。你可以在此处找到示例项目。按照教程操作，或者加上你自己的风格！

使用Vue构建聊天应用

为你准备的另一个很棒的项目，是使用我最喜欢的JavaScript库VueJS来构建一个聊天应用。该应用如下所示：

你将学到什么内容

在这个教程中，你将学习如何从头开始设置一款Vue应用，创建组件、处理状态、创建路由、连接到第三方服务，甚至处理身份验证。

技术栈和功能

Vue
Vuex
Vue路由
Vue CLI
Pusher
CSS

这真的是一个很棒的项目，可以用来入门Vue，或提升你现有的技能以应对2020年的开发。你可以在此处找到该教程。

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

此示例将帮助你使用谷歌的Angular 8构建一款漂亮的天气应用：

你将学到什么内容

该项目将教你一些宝贵的技能，例如从头开始创建应用、先设计再开发，一直学到生产环境部署。

技术栈和功能

Angular 8
Firebase
服务端渲染
具有网格布局和Flexbox的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年的热门话题之一。的确，To-Do应用不一定是最热门的话题，但这确实可以帮助你提升Svelte技能。它看起来像这样：

你将学到什么内容

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

技术栈和功能

Svelte 3
组件
CSS样式
ES6语法

网上优秀的Svelte入门项目不是很多，因此我觉得这是一个很好的起点。谁知道呢，也许你就在创建另一篇更全面的Svelte教程，本文明年的新版就会介绍你的文章哩。

https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6

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

要创建支持开箱即用的服务端渲染的React应用时，NextJs是最受欢迎的框架。该项目将向你展示如何构建一个电子商务购物车，如下所示：

你将学到什么

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

技术栈和功能

Next.js
组件和页面
数据获取
样式
部署
SSR和SPA

学习新东西时，能有真实案例（例如电子商务展示柜）总是很让人开心的。你可以在此处找到该教程。

使用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的能力。

技术栈和功能

Gatsby
React
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部署应用。

技术栈和功能

Gridsome
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网站的链接，在那里他们向你展示了如何进行设置。

技术栈和功能

Quasar
Vue
Cordova
Wavesurfer
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框架或库。现在选择权全在你自己手上：你是否会使用以前没用过的框架来尝试一些新的东西？或者你是否愿意在自己已经具备一定知识的技术上练习项目来进一步增强技能？还是说你会继续依赖自己喜欢的框架/库，并在2020年用它们完成所有项目？请在下方评论区留言讨论。

作者介绍

Simon Holdorf是全栈JavaScript开发人员，也是Vue和React的支持者，就职于https://tiny.pictures。

原文链接：
https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h

创作场景

想在 2020 年成为前端大师？就做这 9 个项目吧