react+apollo+prisma简单demo搭建---1、Frontend开始

react+apollo+prisma入门demo搭建—1、Frontend入门

根据HOW TO GRAPHQL官网的例子，做了些对最新版的改动，适合最新框架的学习。

本系列文章注重前端方面的开发，对于node方面的放在下一个系列。在此过程中有任何问题，都欢迎在评论中提问，会及时反馈

系列目录：

第一章. Frontend开始
第二章. Queries组件编写（Loading Links）
第三章. Mutations组件编写（Creating Links）
第四章. 页面路由
第五章. 身份验证

目标是写一个Hackernews应用。以下是应用功能：

• 显示链接列表
• 搜索链接
• 用户登录
• 登录用户可以创建链接
• 经过身份验证的用户可以点赞链接（每个链接和用户一次）
• 当其他用户点赞链接或创建一个新的链接时，实时更新

下面是构建应用将使用的技术:

• 前端
  • React: 用于构建用户界面的前端框架
  • Apollo Client: 功能齐全的GraphQL客户端
• 后端
  • prisma: 灵活的后端平台组合 GraphQL + Serverless
  • graphql-yoga：使用简单、功能齐全的GraphQL server，拥有出色的性能和好的开发者体验

开始

为了照顾更加全面的读者，我写的会尽量详细，熟练的开发者可进行快速选择性的阅读

创建一个app

首先我们创建一个react项目，我们使用create-react-app做这些事情，本系列使用mac电脑，使用window的开发者可自行替换运行命令

npx create-react-app simple-hackernews

运行完成后，我们创建了一个叫 simple-hackernews的project，运行一下看看

cd simple-hackernews
yarn start

Note: 这里使用了yarn命令，与npm类似࿰