posthog.com/contents/docs/experiments/installation/react.mdx

---
title: React experiments installation
showStepsToc: true
---

import { Steps, Step } from 'components/Docs/Steps'
import ReactInstall from '../../integrate/_snippets/install-react.mdx'
import StepCreateExperiment from './_snippets/step-create-experiment.mdx'
import StepAddPrimaryMetric from './_snippets/step-add-primary-metric.mdx'
import StepValidateExperimentEvents from './_snippets/step-validate-experiment-events.mdx'
import StepValidateFeatureFlags from './_snippets/step-validate-feature-flags.mdx'
import StepEvaluateExperimentResults from './_snippets/step-evaluate-experiment-results.mdx'
import Wizard from '../../getting-started/_snippets/wizard.mdx'
import Tab from "components/Tab"

<Steps>

<Step title="Install PostHog React SDK" badge="required">

<Tab.Group tabs={['Wizard', 'Manual']}>
<Tab.List>
<Tab>Wizard</Tab>
<Tab>Manual</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>
    <Wizard />
</Tab.Panel>
<Tab.Panel>
    <ReactInstall />
</Tab.Panel>
</Tab.Panels>
</Tab.Group>

</Step>

<Step title="Capture conversion event" badge="required">

Once PostHog is initialized, you should be able to capture events. 

For this tutorial, let's capture a conversion event on a `<button id="cta">` click. 

```jsx
import { usePostHog } from '@posthog/react'

export function CTAButton() {
  const posthog = usePostHog()
  return (
    <button id="cta" onClick={() => posthog?.capture('cta clicked')}>
      Click me
    </button>
  )
}
```

</Step>

<Step checkpoint title="Validate PostHog events" subtitle="Confirm events are being sent to PostHog">

<StepValidateExperimentEvents />

</Step>

<Step title="Create an experiment" badge="required">

<StepCreateExperiment />

</Step>

<Step title="Add primary metric and launch" badge="required">

<StepAddPrimaryMetric />

</Step>

<Step title="Call feature flag" badge="required">

Use the React hooks to evaluate the experiment flag and render the `<button id="cta">` text based on the assigned variant. 

```jsx
// Method one: using the useFeatureFlagVariantKey hook
import { useFeatureFlagVariantKey } from '@posthog/react'

function CTAButton() {
  const variant = useFeatureFlagVariantKey('test-experiment-ff-key') // 'control' | 'test' | null
  return (
    <button id="cta">
      {variant === 'control' ? 'Control CTA' : 'Test CTA'}
    </button>
  )
}

// Method two: using the feature flags component
import { PostHogFeature } from '@posthog/react'

function CTAButton() {
  return (
    <>
      <PostHogFeature flag="test-experiment-ff-key" match="control">
        <button id="cta">Control CTA</button>
      </PostHogFeature>
      <PostHogFeature flag="test-experiment-ff-key" match="test">
        <button id="cta">Test CTA</button>
      </PostHogFeature>
    </>
  )
}

// You can also test your code by overriding the feature flag:
// e.g., posthog.featureFlags.overrideFeatureFlags({ flags: {'text-experiment-ff-key': 'test'}})
```

Now when a user triggers a `cta clicked` event, PostHog automatically assigns the user to a variant and records an experiment exposure. 

By default, users are split equally between variants. If you want to assign specific users to a specific variant, see more about [distribution and release conditions](/docs/experiments/creating-an-experiment#distribution-and-release-conditions).

</Step>

<Step checkpoint title="Validate feature flag calls">

<StepValidateFeatureFlags />

</Step>

<Step title="Evaluate experiment results" badge="recommended">

<StepEvaluateExperimentResults />

</Step>

</Steps>