前端开发大师修炼指南
如果你想成为一名专业的JavaScript开发人员，那么除了掌握JavaScript之外，至少还应该具备一些其他框架和库的开发经验。本文收集了9个不同的项目，其中每个项目都使用了不同的JavaScript框架或库，相信通过练习，你一定可以成为2020年的前端开发大师！
作者 | Simon Holdorf
译者 | 弯月，责编 | 郭芮
出品 | CSDN（ID：CSDNnews）
以下为译文：
无论你是编程新手还是经验丰富的开发人员，既然踏入这个行业，你就必须不断学习新概念和语言/框架，才能跟上这个世界瞬息万变的步伐。以React为例，4年前Facebook开源了React，随后它成为了全球JavaScript开发人员的首选。然而，Vue和Angular也不甘落后。再到后来的Svelte、以及Next.js或Nuxt.js等通用框架，还有Gatsby、Gridsome、Quasar等等。
如果你想成为一名专业的JavaScript开发人员，那么除了掌握JavaScript之外，至少还应该具备一些其他框架和库的开发经验。
为了帮助你成为2020年的前端开发大师，我收集了9个不同的项目，其中每个项目都有不同的主题，并使用了不同的JavaScript框架或库，希望你能尝试构建这些项目，并建立自己的展示成果。请记住，纸上谈兵并没有太大益处，不如现在就开始动手，逐个攻克这些难题！
使用React构建电影搜索应用
首先，你可以用React构建一款电影搜索应用。该应用最终大致如下：
你可以学习到的技术
构建这个应用程序可以让你更进一步掌握React以及新兴的Hooks API。上图中的项目利用了React组件、许多钩子、一个外部API、当然还有一些CSS样式。
技术栈与功能
React与钩子
创建React应用
JSX
CSS
这个项目不需要使用任何类，可以为你提供一个接触函数式React的完美契机，并帮助你在2020年提升自我。如下链接是该项目的一个例子，你可以参考链接中的教程，也可以构建自己风格的应用！
https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
使用Vue构建聊天应用
另一个很棒的项目是使用我最喜欢的JavaScript库VueJS构建聊天应用。该应用大致如下：
你可以学习到的技术
你可以跟随如下教程学习如何从头开始设置Vue应用、创建组件、处理状态、创建路由、连接到第三方服务以及处理身份验证。
技术栈与功能
Vue
Vuex
Vue Router
Vue CLI
Pusher
CSS
这是一个非常出色的项目，既可以帮助你入门Vue，也可以提高你的技术力以应对2020年的开发。教程链接如下：
https://www.sitepoint.com/pusher-vue-real-time-chat-app/
使用Angular 8构建一款漂亮的天气预报应用
该应用可以帮助你利用Google的Angular 8构建一款漂亮的天气预报应用：
你可以学习到的技术
该项目可以教你一些扎实的技术，包括从头开始创建应用，从设计到开发，一直到生产部署。
技术栈与功能
Angular 8
Firebase
服务器端渲染
CSS、Grid Layout和Flexbox
人性化设计、响应式移动应用
夜间模式
漂亮的UI
这是一个综合项目，你可以接触到从设计到最终部署的整个开发过程。教程链接如下：
https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e
使用Svelte构建待办事项应用
与React，Vue和Angular相比，Svelte是一款新兴的框架，但仍是2020年的热门话题之一。虽然待办事项这类的应用有点老套，但这个项目确实可以帮助你进一步掌握Svelte。该应用大致如下：
你可以学习到的技术
该教程将向你展示如何使用Svelte 3制作应用的整个过程。它利用了组件、样式和事件处理程序。
技术栈与功能
Svelte 3
组件
通过CSS设置样式
ES 6语法
优秀的Svelte入门项目不是很多，因此我认为如下教程是一个很好的起点。也许你可以创建另一个更全面的Svelte教程，然后展现给大家？
https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6
使用Next.js构建电子商务购物车
NextJs是最受欢迎的框架，你可以利用该框架创建支持服务器端渲染的开箱即用的React应用。该项目将向你展示如何构建如下所示的电子商务购物车：
你可以学习到的技术
在这个项目中，你将学习如何设置Next.js开发环境，创建新页面和组件，获取数据，样式以及部署下一个应用程序。
技术栈与功能
Next.js
组件和页面
获取数据
样式
部署方式
SSR和SPA
通过一个真实的例子（例如电子商务购物车）学习新技术的方式一般都会深得人心。教程链接如下：
https://snipcart.com/blog/next-js-ecommerce-tutorial
使用Nuxt.js建立一个完整的多语言博客网站
Nuxt.js与Vue的关系就好象Next.js与React。一个好的框架可以结合服务器端渲染和单页应用程序的功能。该应用最终大致如下：
你可以学习到的技术
这个示例项目将教你如何使用Nuxt.js，从初始设置到最终部署构建完整的网站。这个项目利用了Nuxt必须提供的许多出色功能，例如页面、组件以及SCSS样式。
技术栈与功能
Nuxt.js
组件和页面
Storyblok模块
混合组件
Vuex的状态管理
SCSS样式
Nuxt中间件
这个项目非常炫酷，其涵盖了很多Nuxt.js的出色功能。我个人非常喜欢使用Nuxt，所以你也应该试试看，希望通过这个项目你可以看成长为更出色的Vue开发人员！教程链接如下：
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial
使用Gatsby建立博客
Gatsby是一个出色的静态站点生成器，其底层使用React和GraphQL。该项目的结果大致如下：
你可以学习到的技术
在这个教程中，你将学习如何利用Gatsby构建出色的博客，其实就相当于你使用React和GraphQL编写自己的博文。
技术栈与功能
Gatsby
React
GraphQL
插件和主题
MDX /Markdown
Bootstrap CSS
模板
如果你想创建一个博客，那么可以通过这个例子来学习如何利用React和GraphQL创建博客网站。我并不是说选择Wordpress不好，但是你可以使用Gatsby，创建高性能的React网站！教程链接如下：
https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc
使用Gridsome建立博客
Gridsome与Vue的关系嘛……我们已经在介绍Nuxt的时候拿Next做类比了，然而Gridsome和Gatsby也是如此。两者都使用GraphQL作为数据层，只不过Gridsome使用VueJS。Gridsome是一个非常出色的网站生成工具，它可以帮助创建优秀的博客：
你可以学习到的技术
这个项目将教你如何利用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
使用Quasar构建类似于SoundCloud的音频播放器应用
Quasar是另一个Vue框架，也可用于构建移动应用程序。在这个项目中，你将创建一个音频播放器应用，如下所示：
你可以学习到的技术
上述其他项目主要关注Web应用程序，但该项目将向你展示如何通过Quasar框架使用Vue创建移动应用。在这个项目开始之前，你应该配置好Cordova，并配置了android studio / xcode。如果没有的话，那么可以点击教程中的链接，打开quasar网站，学习如何设置。
技术栈与功能
Quasar
Vue
Cordova
Wavesurfer
UI组件
这是一个小项目，主要展示了Quasar在构建移动应用方面的强大功能。
https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer
总结
在本文中，我展示了9个你可以尝试构建的项目，其中每个项目都专注于不同的JavaScript框架或库。接下来，选择权在你手中：你是否愿意尝试从未用过的框架？还是说2020年你希望在所有的项目中继续吃老本？
原文：https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h
作者：Simon Holdorf，JavaScript全栈开发。
本文为 CSDN 翻译，转载请注明来源出处。
前端开发大师修炼指南相关推荐
- 前端初学者开发学习视频_初学者学习前端开发的实用指南
前端初学者开发学习视频 by Nikita Rudenko 通过尼基塔·鲁登科(Nikita Rudenko) 初学者学习前端开发的实用指南 (A practical guide to learnin ...
- Web前端开发面试考点指南
Web 前端面试指南与高频考题解析指南 第一章 面试准备:简历编写和面试前准备 一般来说,跳槽找工作要经历投递简历.准备面试.面试和谈 offer 四个阶段.其中面试题目会因你的等级和职位而异,从入门 ...
- 全栈开发工程师修炼指南
全栈开发工程师是指掌握多种技能,能够独立开发应用程序的前端和后端以及数据库工作的开发人员.前端通常是指用户在应用程序中能看到或交互的部分,后端是应用程序中处理业务逻辑,数据库交互,用户认证,服务端配置 ...
- 「全栈之路」Web前端开发的后端指南
前言 在若干次前的一场面试,面试官看我做过 python爬虫/后端 的工作,顺带问了我些后端相关的问题:你觉得什么是后端? 送命题.当时脑瓦特了,答曰:逻辑处理和数据增删改查... 当场被怼得体无完肤 ...
- 「真®全栈之路」Web前端开发的后端指南
前言 在若干次前的一场面试,面试官看我做过python爬虫/后端 的工作,顺带问了我些后端相关的问题:你觉得什么是后端? 送命题.当时脑瓦特了,答曰:逻辑处理和数据增删改查... 当场被怼得体无完肤, ...
- iviewui前端开发实例技术指南
安装nodejs,参考 https://blog.csdn.net/yan_dk/article/details/90633166 安装nodojs环境不再细述. 开发实例1-后台系统 下载开源的后台 ...
- 丁鹿学堂：2023前端开发vue3入门指南（vu3视图自动绑定案例解析）
vue3中数据和视图自动绑定 vue3中data中的数据,会自动和使用它的视图绑定,数据发生变化时视图会自动更细,无需我们手动操作dom 案例:创建一个按钮,记录点击次数. <!DOCTYPE ...
- web前端好学吗？如何能提高CSS编写技巧 提高Web前端开发效率
前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...
- 总结：前端开发从入门到高薪中文指南.pdf
提到前端工程师,很多人的第一反应都是:那个工资高,门槛低的职业.没错,也正因如此,越来越多的人开始投入前端岗位. 可是有些人似乎不太了解前端岗位为何如此高薪,认为自己看了些教程,读了几本书,会用HTM ...
最新文章
- linux下清理信号量,Linux下kill的信号量列表
- linux vga 分辨率低,vga输出 1440x900 分辨率问题
- javascript深入理解js闭包
- 树莓派+神经计算棒2实时人脸检测
- 滴滴海量离线数据的在线化 — FastLoad
- Flink 能够改写成 FlinkSQL的理论依据：命令式代码 vs 声明式代码
- Android事件处理之多点触摸与手势识别
- 面试官：如何实现 List 集合去重？
- 数据库设计14个技巧
- f5源站获取http/https访问的真实源IP解决方案
- opencv imshow plt imshow
- AndroidStudio常用字体
- 日志分析软件 Splunk
- vmware虚拟机 配置动态 静态 固态IP 三种模式: 桥接模式 nat模式和仅主机模式 Host-only模式
- android-b9是什么设备,Android 设备上可以实现 3D Touch 吗？| 原力计划
- 算法设计与分析复习--回溯法
- byte的取值范围-128~127原理
- 经典数字游戏——数独（Sudoku）解法的Python代码实现
- API接口自动化测试框架搭建（十三）-优化operate_conf.py并创建用户数据目录data
- 三叶草考试模拟系统服务器,三叶草学考模拟系统