简介

无论编程小白还是资深开发者，都要不断学习新概念和新语言/框架，才能在这个快速变化的行业内立于不败之地。

以 React 为例——Facebook 在四年前将 React 开源，现在 React 已成为全球 JavaScript 开发人员的首选。

同时，Vue 和 Angular 也有稳定的追随者。然后是 Svelte 和通用框架，如 Next.js 或 Nuxt.js，此外还有 Gatsby、Gridsome 和 Quasar 等等。

专业的 JavaScript 开发者不仅要会使用自己熟悉的框架做项目，还要对其他框架和库有一些了解。

为帮助大家成为“前端大神”，我归纳了 9 个不同主题的项目，这 9 个项目分别使用不同 JavaScript 框架/库作为技术栈，大家可以试着搭建下列这些项目，将其添加进你的项目组合中。一定要记住，搭建项目是提升个人技能最有效的方法。

使用 React With Hooks 构建电影搜索应用

你可以先使用 React 构建一个电影搜索应用。搭建好后如下图：

你将学到什么？

在构建这个应用的过程中，你可以使用相对较新的 Hooks API 提高 React 技能。此示例项目使用了 React 组件、多个钩子、一个外部 API，还有一些 CSS 样式。

技术栈和功能

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

这个项目在没有使用任何类的情况下，提供了一个完美的功能性 React 入口点。

请点击这里查看示例项目，大家可以按照教程操作，或根据自己的偏好构建自定义项目。

用 Vue 构建聊天应用

第二个项目是用我最喜欢的 JavaScript 库 VueJS 构建一个聊天应用。

构建好的应用如下：

你将学到什么？

你可以根据本教程学习如何从零开始搭建一个 Vue 应用——创建组件、处理状态、创建路由、 连接第三方服务以及处理身份验证。

技术栈和功能

• Vue
• Vuex
• Vue 路由
• Vue CLI
• 推进器
• CSS

这确实是一个学习 Vue 的好项目，也是一个提高个人技能的好项目。

可以点击这里查看该教程。

用 Angular 8 构建一个精美的天气应用

本示例将使用谷歌的 Angular 8 构建一个精美的天气应用：

你将学到什么？

本项目将教给你一些从零开始创建应用的宝贵技能——从开发设计到生产部署。

技术栈和功能

• Angular 8
• Firebase
• 服务器端渲染
• CSS 网格布局和 Flexbox
• 移动端友好&响应式布局
• 深色模式
• 精美的用户界面

我特别喜欢这个综合项目的原因是我们不是在学习孤立的内容，而是在学习是整个开发过程——从设计到最后的部署。

大家都应该尝试一下这个项目。

用 Svelte 构建一个 To-Do 应用

与 React、Vue 和 Angular 相比, Svelte 出现的时间较短，但它是 2023 年的热门框架之一。

To-Do 应用不一定最热门，但可以帮大家锻炼 Svelte 技能。 构建好的应用如下图：

你将学到什么？

本教程将向你展示如何使用 Svelte 3 从零开始构建应用，它使用了组件、样式和事件处理器。

技术栈和功能

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

优秀的 Svelte 新手项目比较少，这个项目是一个很好的新手项目。

而且，很有可能你能创建一个更全面的 Svelte 教程，明年这篇文章里的就是你创建的教程。

用 Next.js 构建一个网络购物车

Next.js 是最受欢迎的基于 React 的服务端渲染框架，开箱即用。

本项目将教大家如何构建一个如下图的网络购物车：

你将学到什么？

在本项目中，你将学习如何设置 Next.js 开发环境——创建新页面和组件、获取数据、设计样式和部署 Next 应用。

技术栈和功能

• Next.js
• 组件和页面
• 数据获取
• 样式
• 部署
• SSR 和 SPA

点击这里查看该教程。

用 Nuxt.js 构建一个完善的多语言博客网站

Nuxt.js 是基于 Vue 的服务器端渲染框架，是一个结合了服务器端渲染和单页应用的伟大框架。

创建好的应用如下图：

你将学到什么？

本示例项目将教会你如何使用 Nuxt.js 搭建一个完整的网站——从最开始的设置到最后的部署。

它使用了 Nuxt 的许多功能，如页面、组件和 SCSS 样式。

技术栈和功能

• Nuxt.js
• 组件和页面
• Storyblok 模块
• Mixins
• Vuex 状态管理
• SCSS 样式
• Nuxt 中间件

这个项目涵盖了 Nuxt.js 的许多出色功能。我个人非常喜欢用 Nuxt 进行开发，所以大家不妨试试这个项目，它能助你成为更好的 Vue 开发者。

用 Gatsby 构建一个博客

Gatsby 是一个优秀的静态站点生成器，允许在 hood 下使用 React 和 GraphQL。项目如下图：

你将学到什么？

通过本教程你将学习如何利用 Gatsby 搭建优秀的博客，同时利用 React 和 GraphQL。

技术栈和功能

• Gatsby
• React
• GraphQL
• 插件和主题
• MDX/Markdown
• Bootstrap CSS
• Templates

这是一个用 React 和 GraphQL 开发博客的绝佳示例。

我并不是说 WordPress 不好，但通过 Gatsby，你可以使用 React 创建高性能网站。

用 Gridsome 构建博客

Gridsome 和 Vue 的关系与 Gatsby 和 React 的关系一样。

Gridsome 和 Gatsby 都使用 GraphQL 作为数据层，但 Gridsome 使用 VueJS。这也是一个优秀的静态网站生成器，可以帮助你创建博客：

你将学到什么？

该项目将教你如何使用 Gridsome、GraphQL 和 Markdown 构建一个简单的博客。

它还介绍了如何使用 Netlify 部署应用程序。

技术栈和功能

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

这肯定不是最全面的教程，但涵盖了 Gridsome 和 Markdown 的基本概念，是一个极佳的新手项目。

用 Quasar 构建一个类似 SoundCloud 的音频播放器应用

Quasar 是另一个 Vue 框架，也可用于构建移动应用。

在本项目中，你将创建一个音频播放器应用，如下：

你将学到什么？

其他项目主要关注网络应用，但本项目教大家使用 Vue 通过 Quasar 框架创建一个移动应用。

大家应该已经有一个配置了 Android Studio/Xcode 的 Cordova 设置。如果没有，本教程中有一个 Quasar 网站的链接。

技术栈和功能

• Quasar
• Vue
• Cordova
• WaveSurfer
• UI 组件

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

总结

本文给大家展示了 9 个可以建立的项目，每个项目都专注于一个 JavaScript 框架或库。

你愿意使用以前没有使用过的框架来开发新应用吗？或是通过设置一些你已经有所了解的项目来加强你的技能?还是使用最喜欢的框架/库做 2023 年的所有项目?选择权全在你手里。

如果你喜欢本文并且想支持我，欢迎关注我的推特，了解更多关于编程、制作、写作和职业的信息。

原文作者：Simon Holdorf
原文链接：https://levelup.gitconnected.com/9-projects-you-can-do-to-become-a-front-end-master-in-2023-a4389153148c