ReactABTests

_ReactABTests.md

React Feature Flags

1. Create an Optimizely Account
2. Create a React Application
3. Follow the Optimizely React SDK Quickstart

Requirements: Node >= 8.1 and npm >= 5.6

App.js

/* Complete code example of App.js by the end of the video */
/* NOTE: Replace <Your_SDK_Key> with the SDK Key of your project below */
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {
  createInstance,
  OptimizelyFeature,
  OptimizelyProvider,
  withOptimizely
} from '@optimizely/react-sdk';


const optimizely = createInstance({
  sdkKey: '<Your SDK Key>'
});

class PurchaseButton extends React.Component {
  onClick = () => {
    const { optimizely } = this.props
    // after we’ve confirmed purchase completed
    optimizely.track('purchase')
  }

  render() {
    return (
      <button onClick={this.onClick}>
        Purchase
      </button>
    )
  }
}

const WrappedPurchaseButton = withOptimizely(PurchaseButton)

function App() {
  return (
    <OptimizelyProvider
      optimizely={optimizely}
      user={{
        id: "user983"
      }}
    >
      <div className="App">
        <header className="App-header">
          <OptimizelyFeature feature="discount">
            {(enabled, variables) => `Got a discount of $${variables.amount}`}
          </OptimizelyFeature>
          <WrappedPurchaseButton></WrappedPurchaseButton>
        </header>
      </div>
    </OptimizelyProvider>
  );
}

export default App;