欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[技术翻译]9个可以让你在2020年成为前端专家的项目

程序员文章站 2022-04-15 09:04:49
本次预计翻译三篇文章如下: "01.[译]9个可以让你在2020年成为前端专家的项目" 02.[译]预加载响应图像 03.[译]您应该知道的13个有用的JavaScript数组技巧 我为什么要创建这个git仓库?通过翻译国外的web相关的技术文章来学习和跟进web发展的新思想和新技术。git仓库地址 ......

本次预计翻译三篇文章如下:

  • 02.[译]预加载响应图像
  • 03.[译]您应该知道的13个有用的javascript数组技巧

我为什么要创建这个git仓库?通过翻译国外的web相关的技术文章来学习和跟进web发展的新思想和新技术。git仓库地址:

介绍

无论您是编程新手还是经验丰富的开发人员。在互联网这个行业中,必须不断学习新的概念和语言/框架以跟上快速变化的步伐。以react为例 - 4年前由facebook开源,它现在已经成为全球javascript开发人员的首选。vue和angular当然也有其相应的追捧者。然后是svelte,以及next.js或nuxt.js等通用框架,以及gatsby,gridsome,quasar等等。如果您想成为一名专业的javascript开发人员,那么您至少应该在不同的框架和库中拥有一些实战经验 - 除了使用原生的js完成工作任务。

为了帮助您在2020年成为前端专家(frontend master),我收集了9个不同的项目,每个项目都有不同的主题和不同的javascript框架或库作为技术栈,您可以构建这些项目并将其添加到学习目标中。请记住,没有什么比项目实战(actually building stuff)对您有更大的帮助了,因此,请不断进取(sharpen your mind),实现这一目标!

使用react(使用钩子)构建电影搜索应用程序

首先,您可以使用react构建电影搜索应用程序。下面是应用程序最终的示例图:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

构建这个应用程序,您将使用相对较新的hooks api来提升您的react技能。示例项目利用了react组件,钩子,一个外部api,当然还有一些css样式。

技术栈和功能

  • react with hooks
  • create-react-app
  • jsx
  • css

不使用任何类,该项目为您提供了功能的完美切入点,并且肯定会在2020年为您提供帮助。您可以在此处找到示例项目:请按照本教程进行操作,或者按照您自己的方式进行!

使用vue构建聊天应用

对您来说,另一个很棒的项目是使用我最喜欢的javascript库vuejs构建聊天应用程序。该应用程序将如下所示:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

在本教程之后,您将学习如何从头开始配置vue应用,创建组件,处理状态,创建路由,连接到第三方服务,甚至处理身份验证。

技术栈和功能

  • vue
  • vuex
  • vue router
  • vue cli
  • pusher
  • css

这真的是一个很棒的项目,可以开始使用vue或提升您现有的技能以应对2020年的开发。您可以在此处找到该教程:

使用angular 8构建美丽的天气应用

此示例将帮助您使用google的angular 8构建美观的天气应用程序:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

该项目将教您一些宝贵的技能,例如从头开始创建应用程序,从设计到开发,一直到生产部署。

技术栈和功能

  • angular 8
  • firebase
  • 服务端渲染
  • 使用栅格布局和flex布局
  • 移动端友好 & 响应式
  • 暗黑模式
  • 漂亮的ui

对于这个综合性项目,我真正喜欢的是,您不是单一地学习东西,而是从设计到最终部署的整个开发过程。您应该真正做到这一点!

使用svelte构建待办应用

与react,vue和angular相比,svelte kinda是新手,但仍是2020年的热门话题之一。好的,to-do应用程序不一定是那里最热门的话题,但这确实可以帮助您提高svelte技能看起来像这样:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

本教程将向您展示如何从头到尾使用svelte 3制作应用。它应用了组件,样式和事件处理程序。

技术栈和功能

  • svelte 3
  • 组件
  • 通过css样式
  • es 6语法

那里没有很多优秀的svelte入门项目,因此我觉得这是一个很好的起点。谁知道呢,也许您是在创建另一篇更全面的svelte教程的人,它将在本帖子的明年版本中介绍?

使用next.js构建电子商务购物车

nextjs是用于创建支持应用程序开箱即用的react应用程序的最受欢迎的框架。该项目将向您展示如何构建一个如下所示的电子商务购物车:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

在这个项目中,您将学习如何设置next.js开发环境,创建新页面和组件,获取数据,样式并部署下一个应用程序。

技术栈和功能

  • next.js
  • 组件和页面
  • 数据获取
  • 样式
  • 部署方式
  • ssr和spa

拥有一个真实的例子(例如电子商务展示柜)来学习新的东西总是很高兴。您可以在这里找到该教程:

建立完整的多语言博客网站nuxt.js

nuxt.js对vue的作用是next.js的反映。一个很好的框架,可以结合服务器端渲染和单页应用程序的功能。您可以创建的最终应用程序将如下所示:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

这个示例项目将教您从初始设置到最终部署,如何使用nuxt.js构建完整的网站。它利用了nuxt必须提供的许多优秀功能,如页面和组件以及scss样式。

技术栈和功能
  • nuxt.js
  • 组件和页面
  • storyblok模块
  • 混合(mixins)
  • vuex状态管理
  • scss样式
  • nuxt中间件

这对您来说是一个非常酷的项目,涵盖了nuxt.js的许多优秀功能。我个人很喜欢使用nuxt,因此您应该真正尝试使用它,因为它也将使您成为更好的vue开发人员!

用gatsby建立博客

gatsby是一个出色的静态站点生成器,在后台使用react和graphql。这是该项目的结果:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

在本教程中,您将学习如何利用gatsby构建优秀的博客,在使用react和graphql的同时可以很好地编写自己的文章。

技术栈和功能

  • gatsby
  • react
  • graphql
  • 插件和主题
  • mdx/markdown
  • bootstrap
  • 模板

如果您想创建博客,这是一个很好的示例,说明如何利用react和graphql做到这一点。我并不是说wordpress是一个不好的选择,但是有了gatsby,您可以在使用react的同时创建高性能站点!

用gridsome建立博客

gridsome适用于vue,好吧,我们已经在next/nuxt中拥有了,但是gridsome和gatsby也是如此。两者都使用graphql作为数据层,但是gridsome使用vuejs。这也是一个很棒的静态站点生成器,它将帮助您创建出色的博客:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

该项目将教您如何构建一个简单的博客,以开始使用gridsome,graphql和markdown。它还介绍了如何通过netlify部署应用程序。

技术栈和功能

  • gridsome
  • vue
  • graphql
  • markdown
  • netlify

当然,这不是最全面的教程,但涵盖了gridsome和markdown的基本概念,可能是一个很好的起点。

使用quasar构建类似于soundcloud的音频播放器应用

quasar是另一个vue框架,也可以用于构建移动应用程序。在这个项目中,您将创建一个音频播放器应用程序,如下所示:

[技术翻译]9个可以让你在2020年成为前端专家的项目

您将学到什么

尽管其他项目主要关注web应用程序,但该项目将向您展示如何通过quasar框架使用vue创建移动应用程序。您应该已经配置了cordova工作环境,并配置了android studio/xcode。如果没有,则在教程中有一个指向quasar网站的链接,他们向您介绍了如何进行设置。

技术栈和功能

  • quasar
  • vue
  • cordova
  • wavesurfer
  • ui组件

一个小项目,展示了quasar在构建移动应用程序方面的强大功能。

结论

在本文中,我向您展示了您可以构建的9个项目,每个项目专注于一个javascript框架或库。现在,选择权全由您自己决定:您是否会使用以前未使用的框架来尝试一些新的东西?还是要通过为已经具备一定知识的技术进行项目来增强技能?还是您会依赖自己喜欢的框架/库,并在2020年完成所有项目?随时发表评论,不要忘记关注我,以获取更多即将发布的帖子!

原文链接: