9个不错的前端开源项目

1.使用React(带hook)构建电影搜索应用程序

  首先,您可使用React构建电影搜索应用程序。下图显示了最终应用的外观:  vue

  

  在构建此应用程序时,您将使用相对较新的Hooks API来提升React技能。该示例项目利用了React组件,许多hook,一个外部API,固然还有一些CSS样式。react

  技术栈和功能web

  • React Hook
  • create-react-app
  • JSX
  • CSS

  在不使用任何类的状况下,这个项目为你提供了一个完美的入门到实战的机会,而且确定会在2020年为你提供帮助。服务器

  你能够在此处找到示例项目。按照教程进行操做,或者本身动手作。markdown

  https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/app

2.使用Vue构建聊天应用

  对你来讲,另外一个很棒的项目是使用我最喜欢的JavaScript库:VueJS构建聊天应用程序。框架

  该应用程序将以下所示:编辑器

  

  

  您将学到什么ide

  学习本教程后,您将学习如何从头开始设置Vue应用-建立组件,处理状态,建立路由,链接到第三方服务,甚至处理身份验证。性能

  技术栈和功能

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

  这真的是一个很棒的项目,开始使用Vue或提升你的现有技能,以应对2020年的发展。

  你能够在此处找到该教程。

  https://www.sitepoint.com/pusher-vue-real-time-chat-app/

3.使用Angular 8构建美丽的天气应用

  此示例将帮助你使用Google的Angular 8构建美观的天气应用程序:

  

  你将学到什么

  这个项目将教你从头开始建立应用程序的宝贵技能,从设计到开发,再到生产就绪部署。

  技术栈和功能

  • Angular 8
  • Firebase
  • Server-side rendering
  • CSS with Grid Layout and Flexbox
  • Mobile friendly and responsive
  • Dark mode
  • Beautiful UI

  我真的很是喜欢这个综合项目,由于你不会孤立地学习东西。相反,你将学习整个开发过程——从设计到最终部署。

  你真的应该作这个。

  https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e

4.使用Svelte构建待办应用

  Svelte有点像一个新来的孩子,至少与React, Vue和Angular相比是这样。尽管如此,它仍然是2020年的热门之一。

  待办事项不必定是最热门的话题,但这确实能够帮助您提升Svelte技能。看起来像这样:

  

  您将学到什么

  本教程将向您展现如何使用svelte3制做一个应用程序,从开始到结束。它使用组件、样式和事件处理程序。

  技术栈和功能

  • Svelte 3
  • Components
  • Styling via CSS
  • ES 6 语法

  市面上并无那么多好的的Svelte入门项目,因此我以为这是一个不错的开始。

  https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6

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

  Next.js是最流行的框架,用于建立支持应用程序开箱即用的React应用程序。

  该项目将向您展现如何构建一个以下所示的电子商务购物车:

   

  您将学到什么

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

  技术栈和功能

  • Next.js
  • Components and pages
  • Data fetching
  • Styling
  • Deployment
  • SSR and SPA

  有一个真实的例子(例如电子商务展现柜)来学习新的东西老是很高兴。您能够在此处找到该教程。

  https://snipcart.com/blog/next-js-ecommerce-tutorial

6.使用Nuxt.js构建功能完善的多语言博客网站

  Nuxt.js表明Vue,Next.js表明React:一个很好的框架,结合了服务器端渲染和单页面应用程序的功能。

  您能够建立的最终应用程序将以下所示:

   

  您将学到什么

  这个示例项目将教您如何使用Nuxt.js构建完整的网站——从初始设置到最终部署。

  它利用了Nuxt必须提供的许多很酷的功能,例如页面和组件以及SCSS的样式。

  技术栈和功能

  • Nuxt.js
  • Components and pages
  • Storyblok module
  • Mixins
  • Vuex for state management
  • SCSS for styling
  • Nuxt middlewares

  这对您来讲是一个很是酷的项目,涵盖了Nuxt.js的许多出色功能。我我的很喜欢与Nuxt合做,所以您应该真正尝试使用它,由于它也会使您成为更好的Vue开发人员。

  https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial

7.用盖茨比(Gatsby)创建博客

  Gatsby是一个很棒的静态站点生成器,它在后台使用React和GraphQL。这是该项目的结果:

  

  您将学到什么

  在本教程中,您将学习如何利用Gatsby构建出色的博客,以便在使用React和GraphQL的同时编写本身的文章。

  技术栈和功能

  • Gatsby
  • React
  • GraphQL
  • Plugins and themes
  • MDX/Markdown
  • Bootstrap CSS
  • Templates

  若是您想建立博客,这是一个很好的示例,说明如何利用React和GraphQL作到这一点。

  https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

  我并非说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框架,也能够用于构建移动应用程序。

  在此项目中,您将建立一个音频播放器应用,以下所示:

  您将学到什么

  虽然其余项目主要关注Web应用程序,但本项目将向您展现如何经过Quasar框架使用Vue建立移动应用程序。

  您应该已经配置了可运行Android Studio / Xcode的Cordova设置。若是没有,该教程中将有一个指向Quasar网站的连接,在那里他们向您展现了如何进行设置。

  技术栈和功能

  • Quasar
  • Vue
  • Cordova
  • WaveSurfer
  • UI Components

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

相关文章
相关标签/搜索