译者 | Kurt Bittner 、Pierre Pureur
翻译者 | 武川
策画 | 丁晓昀
不论你是程式设计初学者却是现职合作开发人员，自学捷伊基本概念和词汇（或架构）都是跟得上加速的控制技术产业发展节拍的先决条件。
以 React 为例，它由 Facebook 在六年前开放源码，那时早已正式成为亚洲地区 JavaScript 合作开发人员的必选。
总之，Vue 和 Angular 也有它他们的拥护者。除 Svelte 和像 Next.js 或 Nuxt.js 这种的通用型架构，除 Gatsby、Gridsome，之类。
假如你想正式成为一位出众的 JavaScript 合作开发研究者，除采用好 JS 以外，最少还假如有采用相同架构和库的实战经验。
为的是协助你正式成为两个后端剑客，我搜集了 9 个工程项目，每一工程项目都有两个某一的主轴和两个相同的 JavaScript 架构或库做为控制技术栈，你能试著构筑它。读懂，没甚么比亲自动手去构筑小东西对你更有协助的了，因此请一往无前，磨练你的洞察力，一来吧。
1 用 React 构筑两个影片搜寻 App
具体来说，你能用 React 合作开发两个影片搜寻 App。右图是那个 App 最后的模样。
你将教给甚么
在构筑那个 App 时，你将采用相较较捷伊 Hooks API，这有利于提升你的 React 专业技能。那个实例工程项目采用 React 模块、Hooks、两个内部 API，总之，还采用 CSS 进行样式化。
控制技术栈和特性
React
create-react-app
JSX
CSS
那个工程项目不采用任何类，为你提供了两个进入 React 世界的完美入口，在 2023 年肯定对你有所协助。
你能在这里（https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/）找到那个实例工程项目。请跟着教程做，或者提供你的反馈。
2 用 Vue 构筑两个聊天 App
另两个工程项目是采用我最喜欢的 JavaScript 库 VueJS 构筑两个聊天 App。
这个 App 看起来像这种。
你将教给甚么
跟随本教程，你将自学如何从零开始构筑两个 Vue 应用程序——创建模块、处理状态、创建路由、连接到第三方服务，甚至是进行身份验证。
控制技术栈和特性
Vue
Vuex
Vue Router
Vue CLI
Pusher
CSS
这真的是两个入门 Vue 的好工程项目，它也有利于提升你现有的专业技能，解决 2023 年的合作开发问题。
你能在这里（https://www.sitepoint.com/pusher-vue-real-time-chat-app/）找到教程。
3 用 Angular 8 构筑两个漂亮的天气 App
下面的例子将协助你用谷歌的 Angular 8 构筑两个漂亮的天气 App。
你将教给甚么
那个工程项目将教你从零开始创建应用程序时的宝贵专业技能——从设计到合作开发，一直到生产就绪的部署。
控制技术栈和特性
Angular 8
Firebase
服务器端渲染
CSS 网格布局和 Flexbox
移动，响应迅速
暗色模式
漂亮的界面
我之因此非常喜欢那个工程项目，其中两个原因是你教给的小东西并不是相互独立的。相反，你将了解整个合作开发过程——从设计到最后部署。
你真的假如试著一下那个工程项目。
4 用 Svelte 构筑两个待办事项 App
Svelte 是那个领域的新进者——最少与 React、Vue 和 Angular 相比是这种。尽管如此，它仍是 2023 年的热门架构之一。
好吧，待办事项 App 不一定是最热门的，但它确实能协助你磨练你的 Svelte 专业技能。它看起来是这种的。
你将教给甚么
那个教程将向你展示如何从头到尾采用 Svelte 3 合作开发 App。它采用了模块、样式和事件处理器。
控制技术栈和特性
Svelte 3
模块
CSS 样式
ES 6 语法
那时也并没那么多好的 Svelte 启动工程项目，因此我发现那个工程项目（https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6）能做为两个很好的起点。
而且，谁知道呢，也许你就是那个创建另两个更全面的 Svelte 教程的人。
5 用 Next.js 构筑两个电子商务购物车
Next.js 是创建 React 应用程序的最流行架构，它支持开箱即用的服务器端渲染。
那个工程项目将向你展示如何构筑两个电子商务购物车，它看起来像这种。
你将教给甚么
在那个工程项目中，你将自学如何搭建 Next.js 合作开发环
控制技术栈和特性
Next.js
模块和页面
数据抓取
样式
部署
SSR 和 SPA
通过真实的例子（比如电子商务展示）来自学新控制技术总是很好的。你能在这里（https://snipcart.com/blog/next-js-ecommerce-tutorial）找到教程。
6 用 Nuxt.js 构筑两个完整的多词汇博客网站
Nuxt.js 之于 Vue 就像 Next.js 之于 React——两个结合了服务器端渲染和单页应用程序的强大架构。
创建的应用程序看起来像这种。
你将教给甚么
那个实例工程项目将教你如何采用 Nuxt.js 构建两个成熟的网站——从初始搭建到最后部署。
它采用了 Nuxt 提供的许多很酷的功能，比如页面和模块，和 SCSS。
控制技术栈和特性
Nuxt.js
模块和页面
Storyblok 模块
Mixin
用于状态管理的 Vuex
SCSS
Nuxt 中间件
这对你来说可能是两个非常酷的工程项目（https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial），它涵盖了 Nuxt.js 的许多特性。我个人也喜欢采用 Nuxt。你假如试著一下它，因为它也将协助你正式成为更好的 Vue 合作开发人员。
7 用 Gatsby 构筑两个博客
Gatsby 是两个很好的静态站点生成器，它在底层采用了 React 和 GraphQL。那个工程项目看起来是这种的。
你将教给甚么
在那个教程中，你将自学如何利用 Gatsby、React 和 GraphQL 构建两个出众的博客。
控制技术栈和特性
Gatsby
React
GraphQL
插件和主轴
MDX/Markdown
Bootstrap CSS
模板
假如你曾经想过要合作开发两个博客，这就是两个很好的例子（https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc）。它将教你如何利用 React 和 GraphQL 做到这一点。
我并不是说 WordPress 是两个糟糕的选择，但有了 Gatsby，你能采用 React 构筑两个高性能的网站——这是两个很棒的组合。
8 用 Gridsome 构筑两个博客
Gridsome 之于 Vue……好了，我们早已有 Next/Nuxt 了。
Gridsome 与 Gatsby 一样，两者都采用 GraphQL 做为数据层，不一样的是 Gridsome 采用了 VueJS。它也是两个很棒的静态站点生成器，能帮你构筑出很好的博客。
你将教给甚么
那个工程项目将教你如何采用 Gridsome、GraphQL 和 Markdown 构筑两个简单的博客。
它还介绍了如何通过 Netlify 来部署应用程序。
控制技术栈和特性
Gridsome
Vue
GraphQL
Markdown
Netlify
总之，这不是最全面的教程，但它确实涵盖了 Gridsome 和 Markdown 的基本基本概念（https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome），能做为两个很好的起点。
9 用 Quasar 构筑两个类似 SoundCloud 的音频播放器
Quasar 是另两个 Vue 架构，也能用来构筑移动 App。
在那个工程项目中，你将构筑这种的两个音频播放器。
你将教给甚么
其他工程项目主要关注 Web 应用程序，而那个工程项目将向你展示如何采用 Quasar 架构构筑两个移动 App。
你假如早已有两个可用的 Cordova 和 Android Studio/Xcode 合作开发环境。假如没，教程中提供了两个 Quasar 网站的链接，在那里他们会告诉你如何搭建。
控制技术栈和特性
Quasar
Vue
Cordova
WaveSurfer
UI 模块
这是两个小工程项目（https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer），展示了 Quasar 在构筑移动 App 方面的能力。
10 总结
我在本文中展示了 9 个能构筑的工程项目，每一工程项目都关注两个 JavaScript 架构或库。
现在，选择权就在你的手中——你是否会通过采用以前从未采用过的架构来试著一些新小东西？或者你想通过做两个你早已掌握了一些知识的控制技术工程项目来加强你的专业技能？却是继续采用你最喜欢的架构 / 库，在 2023 年用它们完成所有的工程项目？
https://levelup.gitconnected.com/9-projects-you-can-do-to-become-a-front-end-master-in-2023-a4389153148c
手写两个 react，看透 react 运行机制 (https://xie.infoq.cn/article/af5f8cd40e98e968650f8c190)
vue 和 react 的区别有哪些，哪个好 (https://xie.infoq.cn/article/af5f8cd40e98e968650f8c190 )
Angular v15 发布：能脱离 NgModules 构筑模块了 (https://www.infoq.cn/article/oONc5r5opJF64kBCtzIv )
Vue 3 不是最佳选择? 耗时两周从 Vue 2 迁移到 Svelte 后：代码执行更快、体验更佳 (https://www.infoq.cn/article/F1F3Q7Ptb1jM2ptmGbOG )
声明：本文为 InfoQ 翻译，未经许可禁止转载。
