# React (/docs/getting-started/react)

For a complete overview of features in the [React SDK](/docs/sdk/react) check out the docs regarding those. For getting started read on.

## Install [#install]

```bash
npm i @obelism/improve-sdk-react
```

## Setup [#setup]

### Configure the client [#configure-the-client]

First let's generate our [React handlers](/docs/sdk/react#api) and expose them so we can import them in multiple places;

```tsx
import { generateImproveProvider } from '@obelism/improve-sdk-react'

export default generateImproveProvider(...)
```

This makes it possible to import all React handlers from that file. First one we need is our provider that sits around your app;

```tsx
import { render } from 'react-dom'

import { ImproveProvider } from 'utils/improveSdk'

const App = () => (
	<ImproveProvider>
		<Menu />

		<Page />

		<Footer />
	</ImproveProvider>
)

render(<App />, document.getElementById('root'))
```

Now we can start using the hooks in our application.

### Consume the test value [#consume-the-test-value]

Let's say we have the following Menu component;

```tsx
export const Menu = () => {
    return (
        <menu>
            <a href="/">
                <Logo />
            </a>

            <nav>
                <a href="/">Home</a>
                <a href="/products">All product</a>
                <a href="/about-us">About us</a>
                <a href="/about-us">Account</a>
            <nav>
        </menu>
    )
}
```

And we want to know if people will find their way to the homepage without having the dedicated Home link. For this we can run an AB test like so;

```tsx
import { useTestValue } from 'utils/improveSdk'

export const Menu = () => {
    const noHomeLinkValue = useTestValue("no-home-link")

    return (
        <menu>
            <a href="/">
                <Logo />
            </a>

            <nav>
                {noHomeLinkValue === 'control' ? <a href="/">Home</a> : null}
                <a href="/products">All product</a>
                <a href="/about-us">About us</a>
                <a href="/about-us">Account</a>
            <nav>
        </menu>
    )
}
```

Nice, now if we've setup the AB test as 50/50, then half of the visitors will now no longer see the homepage link in the navigation. But we will have no idea if people still get to the homepage.

### Keep track of visitors [#keep-track-of-visitors]

Next step is to send events to Improve on what the visitor is doing. Let's add two events;

- When the visitor sees the menu we mark the start of the AB test; "menu_view"
- When the user clicks on a homepage link we mark the end of the AB test; "home_link_click"

Let's also add a scope to the click event, this way we can see the split between clicks on the logo and the navigation and the control.

```tsx
import { useTestValue, usePostAnalytic } from 'utils/improveSdk'

export const Menu = () => {
    const postAnalytic = usePostAnalytic()
    const noHomeLinkValue = useTestValue("no-home-link")

    useEffect(() => {
        postAnalytic('menu_view', 'menu')
    }, [postAnalytic])

    return (
        <menu>
            <a href="/" onClick={() => postAnalytic('home_link_click', "logo")}>
                <Logo />
            </a>

            <nav>
                {noHomeLinkValue === 'control' ? (
                    <a href="/" onClick={() => postAnalytic('home_link_click', "nav")}>
                        Home
                    </a>
                ) : null}
                <a href="/products">All product</a>
                <a href="/about-us">About us</a>
                <a href="/about-us">Account</a>
            <nav>
        </menu>
    )
}
```

`usePostAnalytic()` takes no arguments and returns a function you call with an event name and a required `scope`: events are test-independent and attributed server-side. What ties this component's events to the test is the `useTestValue("no-home-link")` call: reading a variant emits the **exposure** the server joins events against. Audience-excluded and holdout visitors aren't exposed, so their events aren't counted toward the test.

<Callout type="info">
	Recommended default: alongside any custom events, fire a `page_view` once per
	page load with the current path as its scope (`postAnalytic('page_view',
	pathname)`). See [Track page views like Google
	Analytics](/docs/guides/events#default-track-page-views-like-google-analytics);
	it's the default start event for tests and powers the Events dashboard's
	Popular pages report.
</Callout>

### Done! [#done]

Now it's time to publish your first AB test and measure what your visitors are doing!