我们开始制作第一个路由页面——“发现”页面。在开始制作页面之前，我们需要先分析一下页面上的内容，看看这个页面上有什么内容，这些内容是怎么摆放的。
页面分析
在开始编码之前，我们先查看一下“设计稿”。
从布局上来讲，我们可以将“发现”页面的内容分为三部分，“头部（页面标题）”、“内容（事件列表）”，“底部（页面导航）”。
从内容上来讲，中间是个事件列表。我们需要调用 File-X API 来获取数据，并在页面中进行渲染
继续阅读[File-X Demo] — 项目初始化
使用 create-react-app 创建项目
我们的项目使用 create-react-app 这个官方脚手架来初始化项目。
继续阅读Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
使用 React 制作 File-X 客户端系列教程
本系列教程将会教大家如何使用 react 并结合 Feat 开发工程提供的 File-X API 一步一步地搭建一个第三方 File-X 客户端。
File-X 的 Feat.com 开放项目的一个功能模块。方便用户记录自己的高光时刻，并可查看周边及好友的发生的事件情况。想要了解更多，可查看 File-X API 概述 以及 File-X API 参考
通过这个系列教程，大家将会学会（了解）：
- 使用
create-react-app创建 React 单页面应用 - 使用
react-router-dom控制前端路由 - OAuth 2.0 Implicit Grant Type 的认证流程
- 如何调用 File-X API
File-X API 概述
File-X API 是一套可用于发布时间、获取信息流等使用File-X功能的 RESTful API。对于大部分的网页应用（包括移动应用），File-X API 是授权访问用户的File-X数据的最佳选择。
File-X API 提供了关于Event, Plates的富有表现力的接口，让你可以灵活地访问用户的 File-X 数据。你可以选择一种你喜欢的编程语言，通过这些API在你的应用中添加 File-X 的特色功能，如：
- 获取一个事件列表
- 创建、更新、发布、删除事件
- 修改事件的可见性，公开、仅好友可见或私密
- 获取“此时”数据流
- 获取“此地”数据流
你只需要选择一个与你的应用语言相匹配的 File-X API 客户端，并且以用户角色进行认证。
继续阅读跨章节数据加载
需求
章节滚动到底部时，自动加载下一章内容，章节滚动到顶部时，自动加载上一章内容。
解决办法
未找到合适的解决办法
遇到的问题
用户滚动起来手感很不畅爽
长内容的加载问题
需求
用户可以在Dimzou中插入很长得内容，比如一本完整的圣经的内容或本文内容为4.5兆大小。内容插入之后，再次访问文章，页面内容可以正常加载。
当前解决办法
将段落的内容分成区块进行显示。使用 react-virtualized 优化页面渲染
出现的问题
在 windows 的 edge 中长度为4.5兆的文本内容的后半部分无法完整显示出来。微软的edge浏览器对内容有最大高度限制。 react-virtualized 自动设置的高度值超出这个范围，不起作用，造成页面最多只能滚动到内容的中间部分。
API 基本规范
资源实体
在feat.com上面定义的资源都含有一下基本字段
interface ResourceBasic {
created_at: string;
updated_at: string;
kind: string;
}Dimzou API 参考
此API参考是按资源类型组织的。每种资源类型都有一个或多个数据表示形式和一个或多个方法。
继续阅读Feat API OAuth 授权
长内容的内容定位
需求描述
使用者可以根据编辑的需要，将内容定位到对应段落的具体位置，使对应段落在页面上显示。如：用户点击侧栏的大纲，页面自动显示对应位置的内容。用户点击消息推送的“查看按钮”，页面自动显示对应段落。
解决办法
由于 react-virtualized 的功能限制，设置 scrollToIndex 参数时，页页面滚动都对应的段落位置。所以现在的实现方式是：反复滚动页面，知道目标段落出现在页面中。具体步骤为：先计算当前渲染位置与目标段落的之间隔了多少个段落，然后根据相隔的段落数量，获得一个预计的滚动范围，滚动页面。反复操作页面的滚动条位置，直到目标段落出现在页面内，然后将目标段落定位到页面顶部附近。
出现的问题
在 safari 中使目标段落出现在页面内的操作，容易进入一个死循环，页面一直在上下滚动，无法停下来。这种现象在定位到文章末尾段落的时候特别容易出现
其他：
演示DEMO： https://f9yg3.codesandbox.io