01
使用React构建电影搜索应用
首先,可以使用React构建一个电影搜索应用。
你将学到什么内容:
构建这个应用时,你将使用相对较新的Hooks API来提升你的React技能。示例项目利用了React组件、许多Hooks、一个外部api,当然还有一些CSS样式。
技术栈和功能:
带Hooks的React
create-react-app
JSX
CSS
这个项目不使用任何类,为你提供了掌握函数式React编程的完美切入点。教程:
https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
02
使用Vue构建聊天应用
你将学到什么内容:
在这个教程中,你将学习如何从头开始设置一款Vue应用,创建组件、处理状态、创建路由、连接到第三方服务,甚至处理身份验证。
技术栈和功能
Vue
Vuex
Vue路由
Vue CLI
Pusher
CSS
可以用来入门Vue。教程:
https://www.sitepoint.com/pusher-vue-real-time-chat-app/
03
使用Svelte构建待办事项应用
你将学到什么内容:
本教程将向你展示如何从头到尾使用Svelte 3制作应用。它利用了组件、样式和事件处理程序。
技术栈和功能:
Svelte 3
组件
CSS样式
ES6语法
04
使用Next.js构建电子商务购物车
你将学到什么:
在这个项目中,你将学习如何设置Next.js开发环境、创建新页面和组件、获取数据和样式并部署一个next应用程序。
技术栈和功能:
Next.js
组件和页面
数据获取
样式
部署
SSR和SPA
教程:https://snipcart.com/blog/next-js-ecommerce-tutorial
05
使用Nuxt.js构建完整的多语言博客网站
你将学到什么内容:
这个示例项目将教你从初始设置到最终部署,使用Nuxt.js构建完整网站的全过程。它利用了Nuxt所提供的许多出色功能,如页面和组件以及SCSS样式。
技术栈和功能:
Nuxt.js
组件和页面
Storyblok模块
Mixins
用于状态管理的Vuex
SCSS样式
Nuxt中间件
教程:https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial
06
使用Gatsby建立博客
你将学到什么内容:
在本教程中,你将学习如何利用Gatsby构建出色的博客,可以很好地用来撰写自己的文章,同时利用React和GraphQL的能力。
技术栈和功能:
Gatsby
React
GraphQL
插件和主题
MDX/Markdown
引导CSS
教程:https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc