（翻译）九个项目助你成为前端高手

简介

无论你是一个编程的新手还是你已经是一个有经验的开发者，在这个行业中，学习新的概念和语言/框架都是必须的，这样才能跟上快速的变化。举个例子来说，Facebook出的开源框架React只用了4年时间就成为了全球Javascript开发者的第一选择。当然，Vue和Angular也有可观的追随者数量。类似的还有Svelte，还有通用框架Next.js和Nuxt.js，以及Gatsby，Gastsby，Quasar，还有更多其他的。如果你想成为一个专业的Javascript开发者，你至少应该在不同框架和库方面有一些一些经验——除了具备好的JS基础之外。

为了帮助你成为前端开发高手，我收集了九个不同的项目，每一个都有不同的主题并且使用了不同的Javascript框架和库，作为一个技术栈，你可以构建它们并将它们添加到你的投资组合中。记住，没有什么能够比你自己动手开发项目更有帮助，所以去吧，磨炼你的心智，并且让它们成为现实！

使用React（使用hooks）开发一个电影检索的应用

首先你可以从使用React构建一个电影搜索应用开始。下面的图片是应用最终的样子。

你将学习到什么

构建这个应用将会提升你使用最新的React的Hooks API技能。这个示例项目使用React组件，一些hooks函数，一个外部的API，当然也有通过CSS写的一些样式。

技术栈 & 功能

• React with Hooks
• create-react-app
• JSX
• CSS

这个项目没有使用类，它给你了一个完美使用函数式react的入手点，在2020年这也是会很有帮助的。在这里你可以找到这个简单的项目：

www.freecodecamp.org/news/how-to…

跟随教程或者开发你自己风格的应用！

使用Vue开发一个聊天应用

另外一个极好的项目是使用我最喜欢的Javascript框架VueJS开发一个聊天应用。这个应用看起来将会是这个样子：

你将学习到什么

跟随教程，你讲学习到如何从头建立一个Vue应用，创建组件、处理状态、创建路由、连接第三方服务，甚至处理认证。

技术栈 & 功能

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

这真的是一个极好的项目，可以让你开始使用Vue，或者提高你现有的技术来应对2020年的发展。你可以在这里找到教程：

www.sitepoint.com/pusher-vue-…

使用Angular 8开发一个漂亮的天气应用

这个例子将帮助你使用谷歌的Angular 8构建一个漂亮的天气应用：

你将学到什么

这个项目将教给你宝贵的技能，比如从零创建一个应用程序，从设计到开发，一直到准备上线部署。

技术栈 & 功能

• Angular 8
• Firebase
• Server-Side Rendering
• CSS的Grid布局和Flexbox布局
• Mobile friendly & responsive
• Dark Mode
• 漂亮的UI设计

我非常非常喜欢这个综合的项目的地方是，你不是孤立的学习东西，而是从设计到最终部署的整个开发过程。你真的应该去做这个项目！

medium.com/@hamedbaato…

使用Sevlte开发一个待办事项的项目

Svelte相比React，Vue和Angular像是一个新生儿，但仍然是2020年的热点之一。待办事项不一定是最热门的话题，但它可以磨炼你的Svelte技能，项目看起来就像这样：

你将学到什么

这份教程将向你展示如何使用Svelte 3从头到尾构建一个应用。它使用了组件、样式和事件处理。

技术栈 & 功能

• Svelte 3
• 组件
• CSS样式
• ES 6语法

好的Svelte入门项目并不多，所以我觉得这是一个还算不错的入门项目。谁知道呢，也许你会创造一个更全面的Svelte教程，在明年的版本中呈现给大家？

medium.com/@hamedbaato…

用Next.js开发一个电子商务的购物车

Nextjs是创建React应用最流行的框架，它支持服务端渲染，开箱即用。这个项目将向你展示如何开发一个像下面这样的电子商务购物车：

你将学到什么

在这个项目中，你将学会如何配置Next.js的开发环境，创建新的页面和组件，获取数据，样式，并且部署一个Next应用。

技术栈 & 功能

• Next.js
• 组件和页面
• 数据获取
• 样式
• 部署
• SSR和SPA（服务端渲染和单页应用）

通过一个实际的例子学习新的东西总是很好的，比如电子商务展示。你可以在这里找到教程：有一个实际的例子，如电子商务展示，学习新的东西总是很好的。你可以在这里找到教程：

medium.com/@hamedbaato…

使用Nuxt.js开发一个完整的多语言博客网站

Nuxt.js之于Vue，就像Next.js之于React。这是一个很好的框架，能够将服务端渲染和单页应用的优势结合起来。你创建的最终应用看起来就像是这个样子：

你将学到什么

这个示例项目将教你如何使用Nuxt.js建立一个完整的网站，从最初的设置到最后的部署。它利用Nuxt提供的许多酷炫的功能，比如页面和组件，以及SCSS的样式。

技术栈 & 功能

• Nuxt.js
• 组件和页面
• Storyblok module
• Mixins（混合）
• Vuex状态管理
• SCSS
• Nuxt中间件

对你来说这会是一个非常酷的项目，它涵盖了Nuxt.js的许多重要功能。我个人很喜欢用Nuxt工作，你真的应该试试这个，因为它会让你成为一个更好的Vue开发者!

medium.com/@hamedbaato…

使用Gatsby开发一个博客

Gatsby是非常好的静态网站生成器，它的底层是使用React和GraphQL。这个项目最终的样子就像下面这样：

你将学到什么

在本教程中，你将学习如何利用Gatsby建立一个优秀的博客，你可以很好地利用Gatsby写自己的文章，同时可以使用React和GraphQL。

技术栈 & 功能

• Gatsby
• React
• GraphQL
• Plugins & Themes
• MDX / Markdown
• Bootstrap
• 模板

如果你曾想开发一个博客，那么这是一个利用React和GraphQL来实现的绝佳范例。我并不是说WordPress是不好的选择，但是利用Gatsby，你还可以使用React开发一个高性能的网站，这是一举两得的选择！

medium.com/@hamedbaato…

使用Gridsome开发一个博客

Gridsome对于Vue来说......好吧，我们已经有了Next/Nuxt，但对于Gridsome和Gatsby来说也是如此。两者都使用GraphQL作为数据层，但Gridsome利用了VueJS。它也是一个很棒的静态网站生成器，可以帮助你创建很棒的博客：

你将学到什么

从这个项目中你将学到如何开始使用Gridsome，GraphQL, 和Markdown开发一个简单的博客。它还包含了如何通过Netlify部署应用。

技术栈 & 功能

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

这肯定不是最全的教程，但它涵盖了Gridsome和Markdown的基本概念，可以作为一个好的的入门教程。

medium.com/@hamedbaato…

使用Quasar开发一个类似于SoundCloud的音频播放器

Quasar是另一个Vue框架，它可以用来开发移动应用。在这个项目中，你创建的音乐播放器看起来会是这个样子：

你将学到什么

虽然其他项目主要集中在Web应用程序上，但本项目将向您展示如何通过Quasar框架使用Vue创建一个移动应用。你应该已经有一个可以进行开发的Cordova设置和android studio / xcode配置。如果还没有的话，在教程中有一个链接到Quasar网站，在那里他们向你展示如何设置。

技术栈 & 功能

• Quasar
• Vue
• Cordova
• Wavesurfer
• UI Components

这是一个小项目，它展示了Quasar在构建移动应用方面的强大功能。

medium.com/@hamedbaato…

总结

在这篇文章中，我向你展示九个你可以开发的项目，每个项目都使用了不同的Javasript框架或者库。现在是你决定的时候了：你会使用你从未使用过的框架尝试开发项目吗？或者你想通过做一个项目来提升你已有的技能吗？或者你会依赖你最拿手的框架或者库来完成所有项目的开发吗？

我最近开了一个新网站：The Smart Coder，在这里，我将为社区创造免费的内容，比如更加优质的javascript项目

原文链接

9 Projects you can do to become a Frontend Master