登陆

前端开发大师修炼攻略

admin 2019-11-09 223人围观 ,发现0个评论

假如你想成为一名专业的Java开发人员,那么除了把握Java之外,至少还应该具有一些其他结构和库的开发经历。本文收集了9个不同的项目,其间每个项目都运用了不同的Java结构或库,信任经过操练,你必定能够成为2020年的前端开发大师!

作者 | Simon Holdorf

译者 | 弯月,责编 | 郭芮

出品 | CSDN(ID:CSDNnews)

以下为译文:

不管你是编程新手仍是经历丰富的开发人员,已然踏入这个职业,你就有必要不断学习新概念和言语/结构,才干跟上这个国际瞬息万变的脚步。以React为例,4年前Facebook开源了React,随后它成为了全球Java开发人员的首选。可是,Vue和Angular也不甘落后。再到后来的Svelte、以及Next.js或Nuxt.js等通用结构,还有Gatsby、Gridsome、Quasar等等。

前端开发大师修炼攻略

假如你想成为一名专业的Java开发人员,那么除了把握Java之外,至少还应该具有一些其他结构和库的开发经历。

为了协助你成为2020年的前端开发大师,我收集了9个不同的项目,其间每个项目都有不同的主题,并运用了不同的Java结构或库,期望你能测验构建这些项目,并树立自己的展现效果。请记住,坐而论道并没有太大好处,不如现在就开端着手,逐前端开发大师修炼攻略一霸占这些难题!

运用React构建电影查找运用

首要,你能够用React构建一款电影查找运用。该运用终究大致如下:

你能够学习到的技能

构建这个运用程序能够让你更进一步把握React以及新式的Hooks API。上图中的项目运用了React组件、许多钩子、一个外部API、当然还有一些CSS款式。

技能栈与功用

  • React与钩子
  • 创立React运用
  • JSX
  • CSS

这个项目不需要运用任何类,能够为你供给一个触摸函数式React的完美关键,并协助你在2020年进步自我。如下链接是该项意图一个比如,你能够参阅链接中的教程,也能够构建自己风格的运用!

  • https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/

运用Vue构建谈天运用

另一个很棒的项目是运用我最喜爱的Java库VueJS构建谈天运用。该运用大致如下:

你能够学习到的技能

你能够跟从如下教程学习怎么从头开端设置Vue运用、创立组件、处理状况、创立路由、连接到第三方服务以及处理身份验证。

技能栈与功用

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

这是一个十分超卓的项目,既能够协助你入门Vue,也能够进步你的技能力以应对2020年的开发。教程链接如下:

  • https://www.sitepoint.com/pusher-vue-real-time-chat-app/

运用Angular 8构建一款美丽的天气预报运用

该运用能够协助你运用Google的Angular 8构建一款美丽的天气预报运用:

你能够学习到的技能

该项目能够教你一些厚实的技能,包含从头开端创立运用,从规划到开发,一直到出前端开发大师修炼攻略产布置。

技能栈与功用

  • Angular 8
  • Firebase
  • 服务器端烘托
  • CSS、Grid Layout和Flexbox
  • 人性化规划、呼应式移动运用
  • 夜间形式
  • 美丽的UI

这是一个归纳项目,你能够触摸到从规划到终究布置的整个开发进程。教程链接如下:

  • 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年的热门话题之一。尽管待办事项这类的运用有点老套,但这个项意图确能够协助你进一步把握Svelte。该运用大致如下:

你能够学习到的技能

该教程将向你展现怎么运用Svelte 3制造运用的整个进程。它运用了组件、款式和事情处理程序。

技能栈与功用

  • Svelte 3
  • 组件
  • 经过CSS设置款式
  • ES 6语法

优异的Svelte入门项目不是许多,因而我以为如下教程是一个很好的起点。或许你能够创立另一个更全面的Svelte教程,然后展现给咱们?

  • https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-17前端开发大师修炼攻略37f72c23a6

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

NextJs前端开发大师修炼攻略是最受欢迎的结构,你能够运用该结构创立支撑服务器端烘托的开箱即用的React运用。该项目将向你展现怎么构建如下所示的电子商务购物车:

你能够学习到的技能

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

技能栈与功用

  • Next.js
  • 组件和页面
  • 获取数据
  • 款式
  • 布置方法
  • SSR和SPA

经过一个实在的比如(例如电子商务购物车)学习新技能的方法一般都会前端开发大师修炼攻略深得人心。教程链接如下:

  • https://snipcart.com/blog/next-js-ecommerce-tutorial

运用Nuxt.js树立一个完好的多言语博客网站

Nuxt.js与Vue的联系就好象Next.js与React。一个好的结构能够结合服务器端烘托和单页运用程序的功用。该运用终究大致如下:

你能够学习到的技能

这个示例项目将教你怎么运用Nuxt.js,从初始设置到终究布置构建完好的网站。这个项目运用了Nuxt有必要供给的许多超卓功用,例如页面、组件以及SCSS款式。

技能栈与功用

  • Nuxt.js
  • 组件和页面
  • Storyblok模块
  • 混合桃花云雨组件
  • 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
  • Bootstrap CSS
  • 模板

假如你想创立一个博客,那么能够经过这个比如来学习怎么运用React和GraphQL创立博客网站。我并不是说挑选Wordpress欠好,可是你能够运用Gatsby,创立高性能的React网站!教程链接如下:

  • https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

运用Gridsome树立博客

Gridsome与Vue的联系嘛……咱们已经在介绍Nuxt的时分拿Next做类比了,可是Gridsome和Gatsby也是如此。两者都运用GraphQL作为数据层,只不过Gridsome运用VueJS。Gridsome是一个十分超卓的网站生成东西,它能够协助创立优异的博客:

你能够学习到的技能

这个项目将教你怎么运用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个你能够测验构建的项目,其间每个项目都专心于不同的Java结构或库。接下来,挑选权在你手中:你是否乐意测验从未用过的结构?仍是说2020年你期望在所有的项目中持续吃老本?

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

作者:Simon Holdorf,Java全栈开发。

一文了解超级账本DLT、库、开发东西有哪些, Hyperledger宗族成员你知道几个?

请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP