Capture The Flag - Complete Example

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import {
  createInstance,
  OptimizelyProvider,
  OptimizelyFeature,
} from '@optimizely/react-sdk'

const optimizely = createInstance({
  sdkKey: '<Your_SDK_Key>', // TODO: Update to your SDK Key
})

function App() {
  return (
    <OptimizelyProvider
      optimizely={optimizely}
      user={{
        id: 'user123',
      }}
    >
      <div className="App">
        <header className="App-header">
          <OptimizelyFeature feature="astronaut_feature">
            {(isEnabled) => (
              isEnabled
                ? <img src={"//optimize.ly/astronaut"} className="App-logo" alt="logo" />
                : <img src={logo} className="App-logo" alt="logo" />
            )}
          </OptimizelyFeature>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </OptimizelyProvider>
  );
}

export default App;