无论您是编程新手还是经验丰富的开发人员，您都需要不断学习新的概念和语言/框架，才能跟上这个瞬息万变的行业。以React为例——它在4年前才由Facebook开源，现在已成为全球JavaScript开发者的首选。当然还有Vue和Angular，它们拥有大量的追随者。然后是通用框架，如Svelte、Next.js和Nuxt.js，以及Gatsby、Gridsome、Quasar等。如果你想成为一名专业的JavaScript开发人员，那么你至少应该对其中的一些框架和库有经验——前提是你已经奠定了基础技能并练习了基本的JS技术。为了帮助你在2020年成为前端大师，我收集了9个不同的项目，每个项目都有自己的主题和JavaScript框架或库作为技术堆栈，你可以构建并添加到你自己的技能集中。请记住，对您最有帮助的事情是实际构建一些东西。所以，洗脸，起床，开始修炼吧！在这里，小编建了一个前端学习交流按钮群：132667127，自己整理的最新前端资料和进阶开发教程。如果愿意，可以进群一起学习交流。使用React（带Hooks）构建电影搜索应用程序首先，您可以使用React构建一个电影搜索应用程序。这是已完成应用程序的屏幕截图：您将学到什么在构建此应用程序时，您将使用相对较新的HooksAPI来提高您的React技能。示例项目使用React组件、大量Hooks、外部api，当然还有一些CSS样式。技术栈和功能Reactcreate-react-appJSXCSSwithHooks该项目不使用任何类，为您提供了掌握函数式React编程的完美切入点，肯定会在2020年对您有所帮助。另一个让您使用Vue构建聊天应用程序的好项目是使用我最喜欢的JavaScript库VueJS构建一个聊天应用程序。该应用程序如下所示：您将学到什么在本教程中，您将学习如何从头开始设置Vue应用程序、创建组件、处理状态、创建路由、连接到第三方服务，甚至处理身份验证。技术堆栈和功能VueVuexVue路由VueCLIPusherCSS这真的是一个很棒的项目，可以开始使用Vue，或者提高你现有的2020年开发技能。您可以在下面的链接中找到该教程。使用Angular8构建一个美丽的天气应用程序此示例将帮助您使用Google的Angular8构建一个美丽的天气应用程序：您将学到什么该项目将教会您宝贵的技能，例如从头开始创建应用程序，首先设计它重新开发，一直在学习生产环境部署。技术堆栈和功能Angular8Firebase服务器端渲染CSS与网格布局和Flexbox移动友好和响应式黑暗模式漂亮的UI我真的非常喜欢这个综合项目的是你不是孤立地学习内容，而是整个开发过程从设计到最终部署。你真的应该试试这个项目！用Svelte构建一个待办事项列表应用程序与React、Vue和Angular相比，Svelte可能看起来像个菜鸟，但它仍然是2020年的热门话题之一。的确，待办事项应用程序不一定是最热门的话题，但它确实可以帮助您提高Svelte技能。它看起来像这样：你将学到什么本教程将向你展示如何从头到尾使用Svelte3制作应用程序。它利用组件、样式和事件处理程序。技术栈和功能Svelte3ComponentsCSSStylesES6Syntax互联网上好的Svelte入门项目并不多，所以我认为这是一个很好的起点。谁知道呢，也许您正在创建另一个更全面的Svelte教程，并且本文明年的新版本将介绍您的文章。使用Next.js构建电子商务购物车NextJs是创建支持开箱即用的服务器端渲染的React应用程序时最受欢迎的框架。该项目将向您展示如何构建电子商务购物车，如下所示：您将学到什么在该项目中，您将学习如何设置Next.js开发环境、创建新页面和组件、获取数据和样式以及部署下一个应用程序。技术堆栈和功能Next.js组件和页面数据获取样式部署SSR和SPA学习新事物时，最好有真实的示例（例如电子商务展示）。使用Nuxt.js构建一个完整的多语言博客站点Nuxt.js之于Vue就像Next.js之于React。这是一个很棒的框架，结合了服务器端渲染和单页应用程序的强大功能。您可以创建的应用程序将如下所示：您将学到什么这个示例项目将教您使用Nuxt.js构建完整网站的过程，从初始设置到最终部署。它利用了Nuxt必须提供的许多强大功能，例如页面和组件以及SCSS样式。StackandFeaturesNuxt.jsComponentsandPagesStoryblokModulesMixinsVuexSCSSStyleNuxtMiddlewareforStateManagement这对你来说是一个非常酷的项目，涵盖了Nuxt.js的许多强大功能。我个人喜欢使用Nuxt，所以你真的应该尝试一下，因为它也会让你成为更好的Vue开发人员！用Gatsby写博客Gatsby是一个优秀的静态站点生成器，它在底层使用React和GraphQL。这是该项目的结果：您将学到什么在本教程中，您将学习如何利用Gatsby构建一个非常棒的博客，该博客非常适合撰写您自己的文章，同时利用React和GraphQL的强大功能。技术堆栈和功能GatsbyReactGraphQL插件和主题MDX/MarkdownBootstrapCSS模板我并不是说Wordpress总是错误的选择，但是有了Gatsby，您可以在创建高性能网站时使用React！（这也是一种很棒的技术组合）用Gridsome构建博客Gridsome是为Vue设计的……好吧，Next/Nuxt部分提到了这种关系，但Gridsome和Gatsby也是如此。两者都使用GraphQL作为数据层，但Gridsome使用VueJS。它也是一个很棒的静态站点生成器，可以帮助您创建很棒的博客：您将学到什么这个项目将教您如何构建一个简单的博客，开始使用Gridsome、GraphQL和Markdown。它还描述了如何通过Netlify部署应用程序。技术栈和功能GridsomeVueGraphQLMarkdownNetlify当然，这不是最全面的教程，但它涵盖了Gridsome和Markdown的基本概念，可能是一个很好的起点。使用Quasar构建音频播放器应用程序Quasar是另一个Vue框架，也可用于构建移动应用程序。在这个项目中，您将创建一个类似于SoundCloud的音频播放器应用程序，如下所示：，使用Vue创建移动应用程序。你应该有一个工作的Cordova设置和配置的androidstudio/xcode。如果没有，该教程中有一个指向quasar网站的链接，他们会在其中向您展示如何设置它。技术堆栈和功能QuasarVueCordovaWavesurferUI组件这是一个小型项目，展示了Quasar在构建移动应用程序方面的强大功能。总结在本文中，我向您展示了9个您可以构建的项目，每个项目都专注于一个JavaScript框架或库。现在选择权在你了：你会使用你以前没有使用过的框架来尝试一些新的东西吗？或者您想在您已经了解的技术上练习项目以进一步提高您的技能？或者您会继续依赖您最喜欢的框架/库并将它们用于2020年的所有项目吗？
