不管您是刚开端编程仍是现已是一名经历丰富的开发人员,在这个职业中,学习新的概念和言语/结构是跟上快速改变的必要条件。
以React为例,它是四年前才由Facebook开源的,它现已成为全球JavaScript开发人员的榜首挑选。
当然,Vue和Angular也有其合法的追随者集体。然后是Svelte和通用结构,例如Next.js或Nuxt.js。还有Gatsby 和 Gridsome 和 Quasar …。
假如你想成为一名超卓的JavaScript开发专家,你至少应该在不同的结构和库中有一些经历。
为了协助你在2020年成为前端大师,我收集了9个不同的项目,每个项目都有不同的主题和不同的JavaScript结构或库作为技能栈,您能够构建它们并将它们添加到学习方案中。记住,没有什么比实践构建东西更有协助的了,所以一往无前,让你的脑筋变得敏锐,让它成为实际。
运用React(带hook)构建电影查找运用程序
首要,您能够运用React构建电影查找运用程序。下图显现了终究运用的外观:
您将学到什么
在构建此运用程序时,您将运用相对较新的Hooks API来进步React技能。该示例项目运用了React组件,许多hook,一个外部API,当然还有一些CSS款式。
技能栈和功用
- React Hook
- create-react-app
- JSX
- CSS
在不运用任何类的情况下,这个项目为你供给了一个完美的入门到实战的时机,而且必定会在2020年为您供给协助。
您能够在此处找到示例项目。依照教程进行操作,或许自己动手做。
运用Vue构建谈天运用
对您来说,另一个很棒的项目是运用我最喜爱的JavaScript库:VueJS构建谈天运用程序。
该运用程序将如下所示:
学习本教程后,您将学习怎么从头开端设置Vue运用-创立组件,处理状况,创立路由,连接到第三方服务,乃至处理身份验证。
- Vue
- Vue
- Vue
- Vue
- Pusher
- CSS
这真的是一个很棒的项目,开端运用Vue或进步您的现有技能,以应对2020年的开展。
您能够在此处找到该教程。
运用Angular 8构建美丽的气候运用
此示例将协助您运用Google的Angular 8构建漂亮的气候运用程序:
这个项目将教您从头开端创立运用程序的名贵技能,从规划到开发,再到出产安排妥当布置。
- 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技能。看起来像这样:
本教程将向您展现怎么运用svelte3制造一个运用程序,从开端到完毕。它运用组件、款式和事情处理程序。
- Svelte 3
- Components
- Styling via CSS
- ES 6 语法
市面上并没有那么多好的的Svelte入门项目,所以我觉得这是一个不错的开端。
运用Next.js构建电商购物车
Next.js是最盛行的结构,用于创立支撑运用程序开箱即用的React运用程序。
该项目将向您展现怎么构建一个如下所示的电子商务购物车:
在这个项目中,您将学习怎么设置一个Next.js开发环境——创立新页面和组件、获取数据、设置款式并布置下一个运用程序。
- Next.js
- Components and pages
- Data fetching
- Styling
- Deployment
- SSR and SPA
有一个实在的比如(例如电子商务展现柜)来学习新的东西总是很快乐。您能够在此处找到该教程。
运用Nuxt.js构建功用完善的多言语博客网站
Nuxt.js代表Vue,Next.js代表React:一个很好的结构,结合了服务器端烘托和单页面运用程序的功用。
您能够创立的终究运用程序将如下所示:
这个示例项目将教您怎么运用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。这是该项意图成果:
在本教程中,您将学习怎么运用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。这也是一个很棒的静态网站生成器,可协助您创立超卓的博客:
该项目将教您怎么构建一个简略的博客,以开端运用Gridsome,GraphQL和Markdown。
它还介绍了怎么经过Netlify布置运用程序。
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
当然,这不是最全面的教程,但它的确涵盖了Gridsome和Markdown的基本概念,而且可能是一个很好的起点。
运用Quasar构建相似SoundCloud的音频播放器运用
Quasar是另一个Vue结构,也能够用于构建移动运用程序。
在此项目中,您将创立一个音频播放器运用,如下所示:
尽管其他项目首要重视Web运用程序,但本项目将向您展现怎么经过Quasar结构运用Vue创立移动运用程序。
您应该现已装备了可运转Android Studio / Xcode的Cordova设置。假如没有,该教程中将有一个指向Quasar网站的链接,在那里他们向您展现了怎么进行设置。
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Components
一个小项目,展现了Quasar在构建移动运用程序方面的强壮功用。
总结
在本文中,我向您展现了能够构建的9个项目,每个项目都专心于另一个JavaScript结构或库。
现在,挑选权全由您自己决议:您是否会运用曾经未运用的结构来测验一些新的东西?仍是要经过为现已具有必定常识的技能进行项目来增强技能?仍是您会依靠自己喜爱的结构/库,并在2020年完结一切项目?
更多文章引荐阅览 【 学习企鹅圈:731771211 】 :
2020年Web前端开发工程师商场怎么样?学会什么技能才干拿到高薪
共享七年职业生涯心得,认清自己是否真的合适转行前端开发工程师
【项目实战视频+源码】20w前端程序员疯抢的生长大礼包
前端修炼之道 : 怎么成为一名合格前端开发工程师?
前端的作业越来越难找,究竟是不是前端范畴现已饱和了?
发表评论