9 个项目助你在 2023 年成为“前端大佬”

简介

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

以 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
推荐阅读
相关专栏
前端与跨平台
78 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。