建立一个全新的React Web APP 项目

使用Create React App 中文文档建立一个空的React Web APP项目

npx create-react-app quick-demo
cd quick-demo

安装敏捷开关Js与React SDK

npm install ffc-js-client-side-sdk
npm install ffc-react-client-sdk

如果 npm install ffc-react-client-sdk 不成功，请尝试使用 yarn 安装，代码如下

yarn add ffc-react-client-sdk

初始化SDK

点击查阅 SDK 官方文档
 点击查阅 SDK Github 开源文档

打开src文件夹中的index.js文件，导入 FfcProvider

import { asyncWithFfcProvider } from 'ffc-react-client-sdk'

此教程使用 asyncWithFfcProvider 方法初始化 SDK，将文件中的原有 ReactDOM.createRoot 和 root.render 主代码替换成如下代码：

(async () => {
  const FfcProvider = await asyncWithFfcProvider({
    options: {
      anonymous: true,
      api: 'https://api.featureflag.co',
      secret: '{项目环境对应的秘钥}',
      bootstrap: []
    }
  });

  const root = ReactDOM.createRoot(document.getElementById('root'));

  root.render(
    <React.StrictMode>
      <FfcProvider>
        <App />
      </FfcProvider>
    </React.StrictMode>
  );
})();

回到敏捷开关后台，根据引导创建账户和第一个开关后。在"组织机构"页中的"项目"子板，找到对应的项目与环境的 secret 秘钥值，将其复制

回到代码 index.js 中，将刚刚复制的 secret 填入到 asyncWithFfcProvider 的 options 中的 secret 的右侧

使用 SDK 的 feature flag 控制 Learn React

打开 src 文件夹中的 App.js文件，导入 withFfcConsumer

import { withFfcConsumer } from 'ffc-react-client-sdk';

并在文件下方，用withFfcConsumer包裹 APP function组件

export default withFfcConsumer()(App);

在 function APP 的入口处加入 { flags }

function App({ flags }) {
  return (
    <div className="App">
        ...
    </div>
  );
}

回到敏捷开关后台，找到之前建立的 feature flag，并复制其 key，如下图所示：

回到 src 文件夹中的 App.js文件，我们使用 Flags.{Key} 或 Flags['{Key}'] 来获得 feature flag 针对用户(这个教程中是随机用户)的返回值。
我们通过这种方法来控制 Learn React 是否可以做一个超链接。将原function APP的代码改为如下所示：

function App({ flags }) {
  const reactDemoFlag = flags.ReactDemoFlag   // 或使用 flags['ReactDemoFlag']
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        {
          reactDemoFlag === 'false' ?
            <div>
              Learn React
            </div>
            :
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
        }
      </header>
    </div>
  );
}

使用 UI 控制功能的发布、切换、回滚

使用 feature flag 控制 Learn React 的超链接能力。如下图所示，当我们将返回值切换为false时，右侧的 Learn React 不具备超链接能力。

当我们将返回值切换为 true 时，右侧的 Learn React 具备了超链接能力，如下图所示

使用SDK初始化用户画像

回到index.js文件，我们在初始化Provider的代码处添加 user 信息，并将 anonymous 设为 false。如下所示，我们初始化了一个用户名为 "demo-user-20220530" 的用户画像信息。

const FfcProvider = await asyncWithFfcProvider({
    options: {
      anonymous: false,
      api: 'https://api.featureflag.co',
      secret: 'NDdmLWY2MTUtNCUyMDIyMDUyNTA0MzY1MV9fMTU5X18xODVfXzM4Nl9fZGVmYXVsdF9mOWQ1YQ==',
      bootstrap: [],
      user: {
        userName: 'demo-user-20220530',
        id: 'demo-user-20220530',
        customizedProperties: [
          {
            "name": "age",
            "value": '18'
          }
        ]
      }
    }
  });

除了这种初始化用户信息的方式外，我们还可以使用 .identify 方法，具体详情可以查看 SDK 详情。

千人千面的做灰度发布与回滚

初始化后，我们可以通过UI对 feature flag 做更复杂的控制。比如我们可以设置超链接模式的 Learn React 只对用户 "demo-user-20220530" 开放。设置如下所示：

或通过自定义规则设置，如下图所示：

我们通过设置 feature flag 中的 "用户目标"， "自定义规则"，可以实现千人千面的发布与回滚。通过使用百分比分配，可以实现渐进式发布与回滚。