在2020年提升成为高档前端工程师的9个项目

不管您是刚开端编程仍是现已是一名经历丰富的开发人员,在这个职业中,学习新的概念和言语/结构是跟上快速改变的必要条件。

在2020年提升成为高档前端工程师的9个项目

以React为例,它是四年前才由Facebook开源的,它现已成为全球JavaScript开发人员的榜首挑选。

当然,Vue和Angular也有其合法的追随者集体。然后是Svelte和通用结构,例如Next.js或Nuxt.js。还有Gatsby 和 Gridsome 和 Quasar …。

假如你想成为一名超卓的JavaScript开发专家,你至少应该在不同的结构和库中有一些经历。

为了协助你在2020年成为前端大师,我收集了9个不同的项目,每个项目都有不同的主题和不同的JavaScript结构或库作为技能栈,您能够构建它们并将它们添加到学习方案中。记住,没有什么比实践构建东西更有协助的了,所以一往无前,让你的脑筋变得敏锐,让它成为实际。

运用React(带hook)构建电影查找运用程序

首要,您能够运用React构建电影查找运用程序。下图显现了终究运用的外观:

在2020年提升成为高档前端工程师的9个项目

您将学到什么

在构建此运用程序时,您将运用相对较新的Hooks API来进步React技能。该示例项目运用了React组件,许多hook,一个外部API,当然还有一些CSS款式。

技能栈和功用

  • React Hook
  • create-react-app
  • JSX
  • CSS

在不运用任何类的情况下,这个项目为你供给了一个完美的入门到实战的时机,而且必定会在2020年为您供给协助。

您能够在此处找到示例项目。依照教程进行操作,或许自己动手做。

运用Vue构建谈天运用

对您来说,另一个很棒的项目是运用我最喜爱的JavaScript库:VueJS构建谈天运用程序。

该运用程序将如下所示:

在2020年提升成为高档前端工程师的9个项目

学习本教程后,您将学习怎么从头开端设置Vue运用-创立组件,处理状况,创立路由,连接到第三方服务,乃至处理身份验证。

  • Vue
  • Vue
  • Vue
  • Vue
  • Pusher
  • CSS

这真的是一个很棒的项目,开端运用Vue或进步您的现有技能,以应对2020年的开展。

您能够在此处找到该教程。

运用Angular 8构建美丽的气候运用

此示例将协助您运用Google的Angular 8构建漂亮的气候运用程序:

在2020年提升成为高档前端工程师的9个项目

这个项目将教您从头开端创立运用程序的名贵技能,从规划到开发,再到出产安排妥当布置。

  • Angular 8
  • Firebase
  • Server-side rendering
  • CSS with Grid Layout and Flexbox
  • Mobile friendly and responsive
  • Dark mode
  • Beautiful UI

我真的十分喜爱这个归纳项目,由于您不会孤立地学习东西。相反,您将学习整个开发进程——从规划到终究布置。

你真的应该做这个。

运用Svelte构建待办运用

Svelte有点像一个新来的孩子,至少与React, Vue和Angular比较是这样。尽管如此,它仍然是2020年的抢手之一。

待办事项纷歧定是最抢手的论题,但这的确能够协助您进步Svelte技能。看起来像这样:

在2020年提升成为高档前端工程师的9个项目

本教程将向您展现怎么运用svelte3制造一个运用程序,从开端到完毕。它运用组件、款式和事情处理程序。

  • Svelte 3
  • Components
  • Styling via CSS
  • ES 6 语法

市面上并没有那么多好的的Svelte入门项目,所以我觉得这是一个不错的开端。

运用Next.js构建电商购物车

Next.js是最盛行的结构,用于创立支撑运用程序开箱即用的React运用程序。

该项目将向您展现怎么构建一个如下所示的电子商务购物车:

在2020年提升成为高档前端工程师的9个项目

在这个项目中,您将学习怎么设置一个Next.js开发环境——创立新页面和组件、获取数据、设置款式并布置下一个运用程序。

  • Next.js
  • Components and pages
  • Data fetching
  • Styling
  • Deployment
  • SSR and SPA

有一个实在的比如(例如电子商务展现柜)来学习新的东西总是很快乐。您能够在此处找到该教程。

运用Nuxt.js构建功用完善的多言语博客网站

Nuxt.js代表Vue,Next.js代表React:一个很好的结构,结合了服务器端烘托和单页面运用程序的功用。

您能够创立的终究运用程序将如下所示:

在2020年提升成为高档前端工程师的9个项目

这个示例项目将教您怎么运用Nuxt.js构建完好的网站——从初始设置到终究布置。

它运用了Nuxt有必要供给的许多很帅的功用,例如页面和组件以及SCSS的款式。

  • Nuxt.js
  • Components and pages
  • Storyblok module
  • Mixins
  • Vuex for state management
  • SCSS for styling
  • Nuxt middlewares

这对您来说是一个十分酷的项目,涵盖了Nuxt.js的许多超卓功用。我个人很喜爱与Nuxt协作,因而您应该真实测验运用它,由于它也会使您成为更好的Vue开发人员。

用盖茨比(Gatsby)树立博客

Gatsby是一个很棒的静态站点生成器,它在后台运用React和GraphQL。这是该项意图成果:

在2020年提升成为高档前端工程师的9个项目

在本教程中,您将学习怎么运用Gatsby构建超卓的博客,以便在运用React和GraphQL的一起编写自己的文章。

  • Gatsby
  • React
  • GraphQL
  • Plugins and themes
  • MDX/Markdown
  • Bootstrap CSS
  • Templates

假如您想创立博客,这是一个很好的示例,阐明怎么运用React和GraphQL做到这一点。

我并不是说WordPress总是一个欠好的挑选,可是运用Gatsby,您能够在运用React的一起创立高性能网站——这是一个了不得的组合。

用Gridsome树立博客

Gridsome是Vue的……好吧,咱们现已在Next / Nuxt中有了它。

可是关于Gridsome和Gatsby也是如此。两者都运用GraphQL作为数据层,可是Gridsome运用VueJS。这也是一个很棒的静态网站生成器,可协助您创立超卓的博客:

在2020年提升成为高档前端工程师的9个项目

该项目将教您怎么构建一个简略的博客,以开端运用Gridsome,GraphQL和Markdown。

它还介绍了怎么经过Netlify布置运用程序。

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

当然,这不是最全面的教程,但它的确涵盖了Gridsome和Markdown的基本概念,而且可能是一个很好的起点。

运用Quasar构建相似SoundCloud的音频播放器运用

Quasar是另一个Vue结构,也能够用于构建移动运用程序。

在此项目中,您将创立一个音频播放器运用,如下所示:

在2020年提升成为高档前端工程师的9个项目

尽管其他项目首要重视Web运用程序,但本项目将向您展现怎么经过Quasar结构运用Vue创立移动运用程序。

您应该现已装备了可运转Android Studio / Xcode的Cordova设置。假如没有,该教程中将有一个指向Quasar网站的链接,在那里他们向您展现了怎么进行设置。

  • Quasar
  • Vue
  • Cordova
  • WaveSurfer
  • UI Components

一个小项目,展现了Quasar在构建移动运用程序方面的强壮功用。

总结

在本文中,我向您展现了能够构建的9个项目,每个项目都专心于另一个JavaScript结构或库。

现在,挑选权全由您自己决议:您是否会运用曾经未运用的结构来测验一些新的东西?仍是要经过为现已具有必定常识的技能进行项目来增强技能?仍是您会依靠自己喜爱的结构/库,并在2020年完结一切项目?

更多文章引荐阅览 【 学习企鹅圈:731771211 】 :

2020年Web前端开发工程师商场怎么样?学会什么技能才干拿到高薪

共享七年职业生涯心得,认清自己是否真的合适转行前端开发工程师

【项目实战视频+源码】20w前端程序员疯抢的生长大礼包

前端修炼之道 : 怎么成为一名合格前端开发工程师?

前端的作业越来越难找,究竟是不是前端范畴现已饱和了?