所有文章

React Web APP

我们使用javascript SDK建立了两个新的的React案例，可以通过如下连接跳转Github的源码页面。
https://github.com/feature-flags-co/ffc-js-client-side-sdk-react-jotai-demo
https://github.com/feature-flags-co/ffc-js-client-side-sdk-react-redux-demo
下方的快速入门教程使用的是我们为React独立开发的SDK。建议学习后使用Javascript SDK进行实际的项目生产。

可点击此处在Github中查看React 快速入门使用的Quick Demo源码

建立一个全新的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'
          }
        ]
      }
    }
  });