在 React 应用程序上使 tracker 工作相当简单。

虽然您可以在创建新项目时直接从平台获取复制粘贴版本的代码，但该代码过于基础，会使自定义和添加额外插件变得更加困难。

假设您正在构建一个 SPA（单页应用程序），您只需要将以下代码添加到您的入口点：

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

换句话说，您可以在脚本开始时实例化 tracker，一旦页面加载，您就可以使用 useEffect 钩子启动它。

需要说明的是，您配置的 projectKey 是 OpenReplay 平台提供的。出于安全原因，此值不应在代码中硬编码存储，而应存放在某种配置文件/系统中。

有多种解决此问题的方案；根据您的设置，您可以使用类似 create-react-app 对 ENV 变量的支持 的方式。

如果您正在用 React 构建一个复杂的应用程序，很可能您正在使用 Next、Remix 或类似的框架。请务必查看我们的设置部分以找到您正在使用的框架。

如果您在 React 项目上设置 tracker 时遇到任何问题，请加入我们的 Slack 社区 并直接向我们的开发人员询问！