原文地址

表格是最重要的存储和计算数据的格式之一，也是在线协同办公中一个关键组成部分。 本文介绍如何在10行代码内，使用React创建一个功能丰富的Excel表格。

首先，开始先建一个空的React项目create-react-app (如果你已经有了一个React项目，可以跳过这一步）

如果你用yarn的话

之后，进入my-spreadsheet目录中，安装表格库

将src/App.js替换为以下内容

并且，在src/index.css中增加一下代码

至此，所有准备工作做完了，可以直接启动项目了！使用以下命令

可以尽情玩转并尝试各种功能了～

本文中的表格库FortuneSheet是一个用原生React实现的表格组件，将来还会支持Vue，它是完全开源的，没有任何使用限制。 Github地址: https://github.com/ruilisi/fortune-sheet 在线体验Demo：https://ruilisi.github.io/fortune-sheet-demo/ 协同版Demo：https://xiemala.com/s/mkAyPu 官方文档：FortuneSheet Document (ruilisi.github.io)

本组件源于另一个开源项目Luckysheet，它使用jQuery实现，但在团队的使用过程中，发现其在设计层面的诸多问题，同时项目臃肿，难以维护，导致修改Bug和二次开发非常困难。团队思考再三，毅然决定扎入这数十万行代码的项目中，从中创建出一个全新的，设计合理，易于维护的表格组件，并同样完全开源。

FortuneSheet在Luckysheet的基础上做了很多优化，其中解决的核心痛点：

其余优化包括：

“协同”是在线表格最为核心的功能。传统表格软件和网页组件相比，最大的区别就是对协同编辑的支持和协同编辑的体验。因此，我们在开发FortuneSheet时，非常重视这一功能，在项目开始之初的架构阶段就思考好了具体的方案，并在版本更新迭代中优先加入。同时，提供了一个简单的后端demo来实现数据交互、存储。

一个优秀的开源项目，详细的文档是必不可少的。我们在每一次版本更新时，都会相应地去更新Readme和API文档。为了方便其他Developer更舒适地使用组件和贡献代码，我们在给出详细的API文档之外，还在Online Demo 中暴露出了API，并做了简单的演示，极大程度地方便开发者定制和接入功能。

由于新上线的功能复杂度越来越高，参与开发的成员越来越多，在这样庞大体量的项目中，Quality Assurance（质量控制）就成了必不可少的一环。本项目的质量控制流程包括严格的Pull Request代码评审、CICD和针对功能的Jest覆盖。 截至撰写时，已经有了22个test suites和99个test，并且还在持续增加、补充当中。越复杂的功能，越需要严格的测试覆盖。例如我们的核心功能—协同编辑，开发者就写了多达十六个测试（jest）来保障其正确性。