让你可以在2020年成为前端大师的9个项目

无论您是刚开始编程还是已经是一名经验丰富的开发人员,在这个行业中,学习新的概念和语言/框架是跟上快速变化的必要条件。

以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
  • Vuex
  • Vue Router
  • Vue CLI
  • 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年完成所有项目?


原文:https://medium.com/better-pro...
作者:Simon Holdorf
翻译:杜尼卜

如果对你有所启发和帮助,可以点个关注、收藏,也可以留言讨论,这是对作者的最大鼓励。

作者简介:Web前端工程师,全栈开发工程师、持续学习者。

现在关注公众号,送精品视频视频教程大礼包!
subscribe2.png


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 721

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木65阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木42阅读 7.2k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木33阅读 6.1k评论 9

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏