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

时间 2020-04-04

标签让你能够 2020年成为前端大师项目繁體版

原文原文链接

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

以React为例，它是四年前才由Facebook开源的，它已经成为全球JavaScript开发人员的第一选择。vue

固然，Vue和Angular也有其合法的追随者群体。而后是Svelte和通用框架，例如Next.js或Nuxt.js。还有Gatsby 和 Gridsome 和 Quasar …，以及，以及。react

若是你想成为一名出色的JavaScript开发专家，你至少应该在不一样的框架和库中有一些经验。web

为了帮助你在2020年成为前端大师，我收集了9个不一样的项目，每一个项目都有不一样的主题和不一样的JavaScript框架或库做为技术栈，您能够构建它们并将它们添加到学习计划中。记住，没有什么比实际构建东西更有帮助的了，因此一往无前，让你的头脑变得敏锐，让它成为现实。编程

使用React（带hook）构建电影搜索应用程序

首先，您可使用React构建电影搜索应用程序。下图显示了最终应用的外观：segmentfault

您将学到什么服务器

在构建此应用程序时，您将使用相对较新的Hooks API来提升React技能。该示例项目利用了React组件，许多hook，一个外部API，固然还有一些CSS样式。markdown

技术栈和功能前端工程师

React Hook
create-react-app
JSX
CSS

在不使用任何类的状况下，这个项目为你提供了一个完美的入门到实战的机会，而且确定会在2020年为您提供帮助。app

您能够在此处找到示例项目。按照教程进行操做，或者本身动手作。

使用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前端工程师，全栈开发工程师、持续学习者。

如今关注公众号，送精品视频视频教程大礼包！