设为首页 - 加入收藏 阜新站长网 (http://www.0418zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 用户 2000 阿里 宣布
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

9个项目助你在2020年成为前端大神!

发布时间:2019-11-07 03:21 所属栏目:[优化] 来源:刘小夕
导读:DEV的年度热文,读完觉得不错,所以翻译出来供大家参考,个人水平有限,文中可能会有一些翻译错误,可以在评论区指正。 本篇文章一共涉及了9个流行的框架/库,没有具体的介绍使用方法,而是给了一些非常棒的实战教程。 初学者(也许一些有经验的开发者也是

DEV的年度热文,读完觉得不错,所以翻译出来供大家参考,个人水平有限,文中可能会有一些翻译错误,可以在评论区指正。

9个项目助你在2020年成为前端大神!

本篇文章一共涉及了9个流行的框架/库,没有具体的介绍使用方法,而是给了一些非常棒的实战教程。

初学者(也许一些有经验的开发者也是一样)在读完官方文档,想写一个项目练手的时候不知道做什么项目好,或是有想法,但是无从下手。那么这篇文章将会给你带来很大的帮助。

导读

无论你是编程新手还是经验丰富的开发人员。在这个行业中,我们不得不一直学习新概念和新语言或是框架,才能跟上快速变化。以React为例 —— FaceBook 四年前开源,现在它已经成为了全球JS开发者的首选。但是与此同时,Vue 和 Angular 也有自己的追求者。然后是 Svelte,Next 和 Nuxt.js,Gatsby,Gridsome,quasar 等等,如果你想成为专业的 JavaScript 开发人员,你在使用自己熟悉的框架进行开发的同时,还需要对不同的框架和库有一些了解。

为了帮助你在2020年成为一个前端大神,我收集了9个使用了不同JS框架/库的项目,你可以去构建或者将他们加入到自己未来的开发计划中。记住,没什么比实际开发一个项目更有帮助。所以,不要犹豫,试着去开发一下。

1. 使用React(with hooks)构建一个电影搜索应用

首先,你可以使用React构建一个电影搜索应用。展示如下:

9个项目助你在2020年成为前端大神!

你将学到什么?

构建这个项目,你可以使用较新的 Hook API 来提升你的 React 技能。示例项目使用了React组件,很多 hooks 以及一些外部的 API,当然还有一些CSS样式。

技术栈/点

  1. React(Hooks)
  2. create-react-app
  3. JSX
  4. CSS

你可以在这里看到这个示例项目:www.freecodecamp.org/news/how-to…

2.使用Vue构建一个聊天应用

另外一个要介绍给你的很棒的项目是使用Vue构建的聊天应用程序。展示如下:

9个项目助你在2020年成为前端大神!

你将学到什么?

您将学习到如何从头开始设置Vue应用,创建组件,处理状态,创建路由,连接到第三方服务,甚至是处理身份验证。

技术栈/点

  1. Vue
  2. Vuex
  3. Vue Router
  4. Vue CLI
  5. Pusher
  6. CSS

这真的是一个非常棒的项目,不管是用来学习Vue或者是提升现有的技能,以应对2020年的发展。你可以查看这个教程: www.sitepoint.com/pusher-vue-…

3. 使用Augular8构建一款漂亮的天气应用

此示例将帮助你使用 Google 的 Angular 8 来构建一块漂亮的天气应用程序:

9个项目助你在2020年成为前端大神!

你将学到什么?

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

技术栈/点

  1. Angular 8
  2. Firebase
  3. SSR
  4. 网络布局和Flexbox
  5. 移动端友好 && 响应式布局
  6. 深色模式
  7. 漂亮的用户界面

对于这个综合项目,我真正喜欢的是,不是孤立地学习东西,而是从设计到最终部署的整个开发过程。

medium.com/@hamedbaato…

4. 使用 Svelte 构建一个 To-Do 应用

与React,Vue和Angular相比,Svelte 还很新,但仍是热门之一。好的,To-Do应用不一定是那里最热门的项目,但这确实可以帮助你提高Svelte技能,如下:

9个项目助你在2020年成为前端大神!

你将学到什么?

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

技术栈/点

  1. Svelte 3
  2. Components
  3. CSS
  4. ES6语法

Svelte 没有太多优秀的入门项目,这个是我觉得不错的一个上手项目:medium.com/codingthesm…

5. 使用 Next.js 构建购物车

Next.js 是一个轻量级的 React 服务端渲染应用框架,该项目将向你展示如何构建一个如下所示的购物车:

9个项目助你在2020年成为前端大神!

你将学到什么?

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

技术栈/点

  1. Next.js
  2. 组件和页面
  3. 数据获取
  4. 样式
  5. 部署
  6. SSR和SPA

你可以在此处找到该教程:snipcart.com/blog/next-j…

6. 使用 Nuxt.js 构建一个多语言博客网站

Nuxt.js 是 Vue 服务端渲染应用框架。你可以创建一个如下所示的应用程序:

9个项目助你在2020年成为前端大神!

你将学到什么?

这个示例项目从初始设置到最终部署一步一步教你如何使用 Nuxt.js 构建一个完整的网站。它使用了 Nuxt 提供的许多出色功能,如页面和组件以及SCSS样式。

技术栈/点

  1. Nuxt.js
  2. 组件和页面
  3. Storyblok模块
  4. Mixins
  5. Vuex
  6. SCSS
  7. Nuxt中间件

这个项目包含了涵盖了 Nuxt.js 的许多出色功能。我个人很喜欢使用 Nuxt 进行开发,你应该尝试使用它,这将使你成为更好的 Vue 开发人员!www.storyblok.com/tp/nuxt-js-…

除此之外,我还找到了一个B站的视频:www.bilibili.com/video/av211…

7. 使用 Gatsby 构建一个博客

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章