讯享网

 <p class="f_center"><img src="http://dingyue.ws.126.net/2023/0119/5d8e3d8cg00ropwtj0082d200hs002sg00hs002s.gif"/><br/></p><p id="1GE58DTQ">作者 | Kurt Bittner 、Pierre Pureur</p><p id="1GE58DTR">译者 | 平川</p><p id="1GE58DTS">策划 | 丁晓昀</p><p id="1GE58DTT">无论你是编程新手还是资深开发人员，学习新的概念和语言（或框架）都是跟上快速的技术发展节奏的必要条件。</p><p id="1GE58DTU">以 React 为例，它由 Facebook 在四年前开源，现在已经成为全球 JavaScript 开发者的首选。</p><p id="1GE58DTV">当然，Vue 和 Angular 也有它们自己的追随者。还有 Svelte 以及像 Next.js 或 Nuxt.js 这样的通用框架，还有 Gatsby、Gridsome，等等。</p><p id="1GE58DU0">如果你想成为一名出色的 JavaScript 开发专家，除了使用好 JS 之外，至少还应该有使用不同框架和库的经验。</p><p id="1GE58DU1">为了帮助你成为一个前端高手，我收集了 9 个项目，每个项目都有一个特定的主题和一个不同的 JavaScript 框架或库作为技术栈，你可以尝试构建它们。记住，没有什么比亲自动手去构建东西对你更有帮助的了，所以请勇往直前，磨砺你的头脑，放手去做吧。</p><p id="1GE58DU2">1 用 React 构建一个电影搜索 App</p><p id="1GE58DU3">首先，你可以用 React 开发一个电影搜索 App。下图是这个 App 最终的样子。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2F97a24de7j00ropwtl0098d200m800d5g00id00au.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58DU5">你将学到什么</p><p id="1GE58DU6">在构建这个 App 时，你将使用相对较新的 Hooks API，这有助于提高你的 React 技能。这个示例项目使用 React 组件、Hooks、一个外部 API，当然，还使用 CSS 进行样式化。</p><p id="1GE58DU7">技术栈和特性</p><p><ul><li id="1GE58E2P"></p><p id="1GE58DU8">React</p><p></li><li id="1GE58E2Q"></p><p id="1GE58DU9">create-react-app</p><p></li><li id="1GE58E2R"></p><p id="1GE58DUA">JSX</p><p></li><li id="1GE58E2S"></p><p id="1GE58DUB">CSS</p><p></li></ul></p><p id="1GE58DUC">这个项目不使用任何类，为你提供了一个进入 React 世界的完美入口，在 2023 年肯定对你有所帮助。</p><p id="1GE58DUD">你可以在这里（https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/）找到这个示例项目。请跟着教程做，或者提供你的反馈。</p><p id="1GE58DUE">2 用 Vue 构建一个聊天 App</p><p id="1GE58DUF">另一个项目是使用我最喜欢的 JavaScript 库 VueJS 构建一个聊天 App。</p><p id="1GE58DUG">这个 App 看起来像这样。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2Fdj00ropwtl0017d200og00g5g00id00c4.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58DUI">你将学到什么</p><p id="1GE58DUJ">跟随本教程，你将学习如何从零开始构建一个 Vue 应用程序——创建组件、处理状态、创建路由、连接到第三方服务，甚至是进行身份验证。</p><p id="1GE58DUK">技术栈和特性</p><p><ul><li id="1GE58E2T"></p><p id="1GE58DUL">Vue</p><p></li><li id="1GE58E2U"></p><p id="1GE58DUM">Vuex</p><p></li><li id="1GE58E2V"></p><p id="1GE58DUN">Vue Router</p><p></li><li id="1GE58E30"></p><p id="1GE58DUO">Vue CLI</p><p></li><li id="1GE58E31"></p><p id="1GE58DUP">Pusher</p><p></li><li id="1GE58E32"></p><p id="1GE58DUQ">CSS</p><p></li></ul></p><p id="1GE58DUR">这真的是一个入门 Vue 的好项目，它也有助于提高你现有的技能，解决 2023 年的开发问题。</p><p id="1GE58DUS">你可以在这里（https://www.sitepoint.com/pusher-vue-real-time-chat-app/）找到教程。</p><p id="1GE58DUT">3 用 Angular 8 构建一个漂亮的天气 App</p><p id="1GE58DUU">下面的例子将帮助你用谷歌的 Angular 8 构建一个漂亮的天气 App。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2F058cd099j00ropwtm0032d200og00drg00id00ab.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58DV0">你将学到什么</p><p id="1GE58DV1">这个项目将教你从零开始创建应用程序时的宝贵技能——从设计到开发，一直到生产就绪的部署。</p><p id="1GE58DV2">技术栈和特性</p><p><ul><li id="1GE58E33"></p><p id="1GE58DV3">Angular 8</p><p></li><li id="1GE58E34"></p><p id="1GE58DV4">Firebase</p><p></li><li id="1GE58E35"></p><p id="1GE58DV5">服务器端渲染</p><p></li><li id="1GE58E36"></p><p id="1GE58DV6">CSS 网格布局和 Flexbox</p><p></li><li id="1GE58E37"></p><p id="1GE58DV7">移动，响应迅速</p><p></li><li id="1GE58E38"></p><p id="1GE58DV8">暗色模式</p><p></li><li id="1GE58E39"></p><p id="1GE58DV9">漂亮的界面</p><p></li></ul></p><p id="1GE58DVA">我之所以非常喜欢这个项目，其中一个原因是你学到的东西并不是相互独立的。相反，你将了解整个开发过程——从设计到最终部署。</p><p id="1GE58DVB">你真的应该尝试一下这个项目。</p><p id="1GE58DVC">4 用 Svelte 构建一个待办事项 App</p><p id="1GE58DVD">Svelte 是这个领域的新进者——至少与 React、Vue 和 Angular 相比是这样。尽管如此，它仍是 2023 年的热门框架之一。</p><p id="1GE58DVE">好吧，待办事项 App 不一定是最热门的，但它确实可以帮助你磨练你的 Svelte 技能。它看起来是这样的。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2F574ca79dj00ropwtn0036d200og00iwg00id00e6.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58DVG">你将学到什么</p><p id="1GE58DVH">这个教程将向你展示如何从头到尾使用 Svelte 3 开发 App。它使用了组件、样式和事件处理器。</p><p id="1GE58DVI">技术栈和特性</p><p><ul><li id="1GE58E3A"></p><p id="1GE58DVJ">Svelte 3</p><p></li><li id="1GE58E3B"></p><p id="1GE58DVK">组件</p><p></li><li id="1GE58E3C"></p><p id="1GE58DVL">CSS 样式</p><p></li><li id="1GE58E3D"></p><p id="1GE58DVM">ES 6 语法</p><p></li></ul></p><p id="1GE58DVN">现在也并没有那么多好的 Svelte 启动项目，所以我发现这个项目（https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6）可以作为一个很好的起点。</p><p id="1GE58DVO">而且，谁知道呢，也许你就是那个创建另一个更全面的 Svelte 教程的人。</p><p id="1GE58DVP">5 用 Next.js 构建一个电子商务购物车</p><p id="1GE58DVQ">Next.js 是创建 React 应用程序的最流行框架，它支持开箱即用的服务器端渲染。</p><p id="1GE58DVR">这个项目将向你展示如何构建一个电子商务购物车，它看起来像这样。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2F9c0ba9e2j00ropwto005qd200m800b4g00id0096.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58DVT">你将学到什么</p><p id="1GE58DVU">在这个项目中，你将学习如何搭建 Next.js 开发环境——创建新的页面和组件、获取数据、样式化和部署 App。</p><p id="1GE58DVV">技术栈和特性</p><p><ul><li id="1GE58E3E"></p><p id="1GE58E00">Next.js</p><p></li><li id="1GE58E3F"></p><p id="1GE58E01">组件和页面</p><p></li><li id="1GE58E3G"></p><p id="1GE58E02">数据抓取</p><p></li><li id="1GE58E3H"></p><p id="1GE58E03">样式</p><p></li><li id="1GE58E3I"></p><p id="1GE58E04">部署</p><p></li><li id="1GE58E3J"></p><p id="1GE58E05">SSR 和 SPA</p><p></li></ul></p><p id="1GE58E06">通过真实的例子（比如电子商务展示）来学习新技术总是很好的。你可以在这里（https://snipcart.com/blog/next-js-ecommerce-tutorial）找到教程。</p><p id="1GE58E07">6 用 Nuxt.js 构建一个完整的多语言博客网站</p><p id="1GE58E08">Nuxt.js 之于 Vue 就像 Next.js 之于 React——一个结合了服务器端渲染和单页应用程序的强大框架。</p><p id="1GE58E09">创建的应用程序看起来像这样。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2Fd99ef46cj00ropwtp001jd200nc00cqg00id00a0.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58E0B">你将学到什么</p><p id="1GE58E0C">这个示例项目将教你如何使用 Nuxt.js 构建一个成熟的网站——从初始搭建到最终部署。</p><p id="1GE58E0D">它使用了 Nuxt 提供的许多很酷的功能，比如页面和组件，以及 SCSS。</p><p id="1GE58E0E">技术栈和特性</p><p><ul><li id="1GE58E3K"></p><p id="1GE58E0F">Nuxt.js</p><p></li><li id="1GE58E3L"></p><p id="1GE58E0G">组件和页面</p><p></li><li id="1GE58E3M"></p><p id="1GE58E0H">Storyblok 模块</p><p></li><li id="1GE58E3N"></p><p id="1GE58E0I">Mixin</p><p></li><li id="1GE58E3O"></p><p id="1GE58E0J">用于状态管理的 Vuex</p><p></li><li id="1GE58E3P"></p><p id="1GE58E0K">SCSS</p><p></li><li id="1GE58E3Q"></p><p id="1GE58E0L">Nuxt 中间件</p><p></li></ul></p><p id="1GE58E0M">这对你来说可能是一个非常酷的项目（https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial），它涵盖了 Nuxt.js 的许多特性。我个人也喜欢使用 Nuxt。你应该尝试一下它，因为它也将帮助你成为更好的 Vue 开发者。</p><p id="1GE58E0N">7 用 Gatsby 构建一个博客</p><p id="1GE58E0O">Gatsby 是一个很好的静态站点生成器，它在底层使用了 React 和 GraphQL。这个项目看起来是这样的。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2Fc496c376j00ropwtp002qd200m800bug00id009r.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58E0Q">你将学到什么</p><p id="1GE58E0R">在这个教程中，你将学习如何利用 Gatsby、React 和 GraphQL 构建一个出色的博客。</p><p id="1GE58E0S">技术栈和特性</p><p><ul><li id="1GE58E3R"></p><p id="1GE58E0T">Gatsby</p><p></li><li id="1GE58E3S"></p><p id="1GE58E0U">React</p><p></li><li id="1GE58E3T"></p><p id="1GE58E0V">GraphQL</p><p></li><li id="1GE58E3U"></p><p id="1GE58E10">插件和主题</p><p></li><li id="1GE58E3V"></p><p id="1GE58E11">MDX/Markdown</p><p></li><li id="1GE58E40"></p><p id="1GE58E12">Bootstrap CSS</p><p></li><li id="1GE58E41"></p><p id="1GE58E13">模板</p><p></li></ul></p><p id="1GE58E14">如果你曾经想过要开发一个博客，这就是一个很好的例子（https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-db3dc）。它将教你如何利用 React 和 GraphQL 做到这一点。</p><p id="1GE58E15">我并不是说 WordPress 是一个糟糕的选择，但有了 Gatsby，你可以使用 React 构建一个高性能的网站——这是一个很棒的组合。</p><p id="1GE58E16">8 用 Gridsome 构建一个博客</p><p id="1GE58E17">Gridsome 之于 Vue……好了，我们已经有 Next/Nuxt 了。</p><p id="1GE58E18">Gridsome 与 Gatsby 一样，两者都使用 GraphQL 作为数据层，不一样的是 Gridsome 使用了 VueJS。它也是一个很棒的静态站点生成器，可以帮你构建出很好的博客。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2F92d0cc00j00ropwtq001pd200og00cag00id0098.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58E1A">你将学到什么</p><p id="1GE58E1B">这个项目将教你如何使用 Gridsome、GraphQL 和 Markdown 构建一个简单的博客。</p><p id="1GE58E1C">它还介绍了如何通过 Netlify 来部署应用程序。</p><p id="1GE58E1D">技术栈和特性</p><p><ul><li id="1GE58E42"></p><p id="1GE58E1E">Gridsome</p><p></li><li id="1GE58E43"></p><p id="1GE58E1F">Vue</p><p></li><li id="1GE58E44"></p><p id="1GE58E1G">GraphQL</p><p></li><li id="1GE58E45"></p><p id="1GE58E1H">Markdown</p><p></li><li id="1GE58E46"></p><p id="1GE58E1I">Netlify</p><p></li></ul></p><p id="1GE58E1J">当然，这不是最全面的教程，但它确实涵盖了 Gridsome 和 Markdown 的基本概念（https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome），可以作为一个很好的起点。</p><p id="1GE58E1K">9 用 Quasar 构建一个类似 SoundCloud 的音频播放器</p><p id="1GE58E1L">Quasar 是另一个 Vue 框架，也可以用来构建移动 App。</p><p id="1GE58E1M">在这个项目中，你将构建这样的一个音频播放器。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0119%2F4a37c154j00ropwtr0047d200og00glg00af0072.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1GE58E1O">你将学到什么</p><p id="1GE58E1P">其他项目主要关注 Web 应用程序，而这个项目将向你展示如何使用 Quasar 框架构建一个移动 App。</p><p id="1GE58E1Q">你应该已经有一个可用的 Cordova 和 Android Studio/Xcode 开发环境。如果没有，教程中提供了一个 Quasar 网站的链接，在那里他们会告诉你如何搭建。</p><p id="1GE58E1R">技术栈和特性</p><p><ul><li id="1GE58E47"></p><p id="1GE58E1S">Quasar</p><p></li><li id="1GE58E48"></p><p id="1GE58E1T">Vue</p><p></li><li id="1GE58E49"></p><p id="1GE58E1U">Cordova</p><p></li><li id="1GE58E4A"></p><p id="1GE58E1V">WaveSurfer</p><p></li><li id="1GE58E4B"></p><p id="1GE58E20">UI 组件</p><p></li></ul></p><p id="1GE58E21">这是一个小项目（https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer），展示了 Quasar 在构建移动 App 方面的能力。</p><p id="1GE58E22">10 总结</p><p id="1GE58E23">我在本文中展示了 9 个可以构建的项目，每个项目都关注一个 JavaScript 框架或库。</p><p id="1GE58E24">现在，选择权就在你的手中——你是否会通过使用以前从未使用过的框架来尝试一些新东西？或者你想通过做一个你已经掌握了一些知识的技术项目来加强你的技能？还是继续使用你最喜欢的框架 / 库，在 2023 年用它们完成所有的项目？</p><p id="1GE58E26">https://levelup.gitconnected.com/9-projects-you-can-do-to-become-a-front-end-master-in-2023-ac</p><p id="1GE58E28">手写一个 react，看透 react 运行机制 (https://xie.infoq.cn/article/af5f8cd40e98ef8c190)</p><p id="1GE58E29">vue 和 react 的区别有哪些，哪个好 (https://xie.infoq.cn/article/af5f8cd40e98ef8c190 )</p><p id="1GE58E2A">Angular v15 发布：可以脱离 NgModules 构建组件了 (https://www.infoq.cn/article/oONc5r5opJF64kBCtzIv )</p><p id="1GE58E2B">Vue 3 不是**选择? 耗时两周从 Vue 2 迁移到 Svelte 后：代码执行更快、体验更佳 (https://www.infoq.cn/article/F1F3Q7Ptb1jM2ptmGbOG )</p><p id="1GE58E2C"><strong>声明：本文为 InfoQ 翻译，未经许可禁止转载。</strong></p>