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

ゝ一纸荒年。 2022-12-28 01:36 213阅读 0赞

## 简介 ##

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

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

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

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

![Example project React][]

### 你将学习到什么 ###

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

### 技术栈 & ###

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

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

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

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

## 使用Vue开发一个聊天应用 ##

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

![Example project Vue][]

### 你将学习到什么 ###

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

### 技术栈 & 功能 ###

*  Vue
 *  Vuex
 *  Vue Router
 *  Vue CLI
 *  Pusher
 *  CSS

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

[https://www.sitepoint.com/pusher-vue-real-time-chat-app/][https_www.sitepoint.com_pusher-vue-real-time-chat-app]

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

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

![b78e0547f72204b3ce4bbac50a35cf00.png][]

### 你将学到什么 ###

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

### 技术栈 & 功能 ###

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

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

[https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e][https_medium.com_hamedbaatour_build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e]

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

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

![ae3d128bdc5da64e8fc1067b43be0f86.png][]

### 你将学到什么 ###

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

### 技术栈 & 功能 ###

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

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

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

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

![c6192988b066e31594d0d424d448f37f.png][]

### 你将学到什么 ###

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

### 技术栈 & 功能 ###

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

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

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

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

![Example project Nuxt][]

### 你将学到什么 ###

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

### 技术栈 & 功能 ###

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

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

## 使用Gatsby开发一个博客 ##

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

![Example project Gatsby][]

### 你将学到什么 ###

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

### 技术栈 & 功能 ###

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

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

## 使用Gridsome开发一个博客 ##

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

![70ebd982662a9d2d5125668f9dad80da.png][]

### 你将学到什么 ###

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

### 技术栈 & 功能 ###

*  Gridsome
 *  Vue
 *  GraphQL
 *  Markdown
 *  Netlify

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

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

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

![Example project Quasar][]

### 你将学到什么 ###

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

### 技术栈 & 功能 ###

*  Quasar
 *  Vue
 *  Cordova
 *  Wavesurfer
 *  UI Components

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

## 总结 ##

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

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

## 原文链接 ##

[9 Projects you can do to become a Frontend Master][]

[Example project React]: /images/20221120/ae6ac4faa88f4a178ade64b024804815.png
[https_www.freecodecamp.org_news_how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7]: https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
[Example project Vue]: /images/20221120/aaddcc94d1df4d86a337373800442b3e.png
[https_www.sitepoint.com_pusher-vue-real-time-chat-app]: https://www.sitepoint.com/pusher-vue-real-time-chat-app/
[b78e0547f72204b3ce4bbac50a35cf00.png]: /images/20221120/58c97d08bd81480f99721665f143ba68.png
[https_medium.com_hamedbaatour_build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e]: https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e
[ae3d128bdc5da64e8fc1067b43be0f86.png]: https://img-blog.csdnimg.cn/img_convert/ae3d128bdc5da64e8fc1067b43be0f86.png
[c6192988b066e31594d0d424d448f37f.png]: https://img-blog.csdnimg.cn/img_convert/c6192988b066e31594d0d424d448f37f.png
[Example project Nuxt]: https://img-blog.csdnimg.cn/img_convert/96664d7677282b64194eccc7e8fd1f95.png
[Example project Gatsby]: https://img-blog.csdnimg.cn/img_convert/f95f94106817127ae3ac047423186d86.png
[70ebd982662a9d2d5125668f9dad80da.png]: https://img-blog.csdnimg.cn/img_convert/70ebd982662a9d2d5125668f9dad80da.png
[Example project Quasar]: https://img-blog.csdnimg.cn/img_convert/7ab4ef67f7f27b368f841b90ee1469f3.png
[Link 1]: https://thesmartcoder.dev/9-awesome-projects-you-can-build-with-vanilla-javascript/
[9 Projects you can do to become a Frontend Master]: https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h