This tutorial walks you through how to check your first Feature Gate in Statsig from end to end. Feature Gates, also known as feature flags, are a way to safely control the rollout of new features to your users without deploying additional code. Common examples for using Feature Gates include shipping new UI elements, API endpoints, or product features.

By the end of this tutorial, you have:

* Created a **Feature Gate** in the Statsig console, with  **targeting rules** to enable the feature for a segment of Users
* Initialized a **Statsig Client SDK**
* Checked a single **feature gate** in your code using the `checkGate` function

## Prerequisites

1. A [Statsig account](https://console.statsig.com/sign_up)
2. An existing application you can integrate the Statsig Client SDK into

## Step 1: In the Statsig console

### Create a Feature Gate

This example adds a Feature Gate to deploy a new UI element to a user with the "statsig.com" email domain. You can follow along with a specific feature if you have your own scenario in mind.

1. Navigate to [Feature Gates](https://console.statsig.com/gates) in the Statsig console.

2. Then, click on **Get Started** if you don't have any Feature Gates set up yet, or **Create** to create a new one.

3. Name your gate "Example Gate". The SDK also uses this name to identify the Feature Gate later.

4. Enter a description for your Feature Gate. It's good practice to describe it in a way that other teammates can easily understand. For example: "This Feature Gate is for launching an example feature for Statsig employees only."

### Create a targeting rule

When you create a Feature Gate in Statsig, Statsig excludes all users from the feature by default. To enable the feature, add a rule that lets users pass the gate. The steps below walk through adding that rule in the console.

1. In the console, on the page for the Feature Gate you just created, click on **Add New Rule**.

2. Give this rule a **Name**, such as "Statsig Users Only".

3. Select **Email** as the targeting criteria to target users based on their email address.

4. In the User section of the dropdown, select the **Any Of (Case Insensitive)** operator, and then add `statsig.com` for email-based user targeting.

5. Set the **Pass Percentage** to `100%`. Doing so ensures that all users with the `statsig.com` email domain pass the Feature Gate and see the new feature.

6. Click **Add Rule** to add this rule to your Feature Gate.

7. Next, hit **Save** on the bottom right to commit these changes to the Feature Gate.

You can now test this feature gate by configuring the User object in the "Test Gate" section.

### Create a Client API Key

Now that you've set up the Feature Gate from the console, it's time to integrate it into your product with the Statsig SDK. First, create a new Client API key to use in your product.

1. Navigate to [**Keys & Environments**](https://console.statsig.com/api_keys) in the Statsig console. You can also find this by going to **Settings** at the bottom left of the Statsig console.

2. Scroll down to **API Keys**. Click on **Generate New Key**.

3. In the dropdown, select **Client**.

4. Copy the Client API Key you just created to your clipboard.

## Step 2: In your code

### Initialize the Statsig SDK

Now that you have a Client API Key, integrate the Statsig Client SDK into your product. This tutorial uses the React SDK, but you can use a different SDK if you prefer.

{% callout type="tip" %}
Statsig offers over 20 client and server-side SDKs. Check out the full list of [SDKs](/sdks/quickstart#all-sdks) to find the one that best fits your needs.
{% /callout %}

1. Install the Statsig React SDK using your preferred package manager. This tutorial uses npm.

{% codetabs %}
```bash npm
npm install @statsig/react
```
{% /codetabs %}

2. Import the SDK in your `App.js` file:

{% codetabs %}
```tsx Import SDK
import { StatsigProvider } from "@statsig/react-bindings";
```
{% /codetabs %}

3. Wrap your app's content within the `StatsigProvider` component. The following code snippet also creates a [User](/sdks/user) object for targeting your Feature Gate.

{% codetabs %}
```tsx Setup Provider
function App() {
  return (
    <StatsigProvider
      sdkKey="client-KEY"
      user={{ userID: "Example", email: "example@statsig.com" }}>
        <div>Hello world</div>
    </StatsigProvider>
  );
}

export default App;
```
{% /codetabs %}

4. Make sure to also replace `client-KEY` with the Client API Key you copied in Step 3.

### Check your Feature Gate

Evaluate a Feature Gate in your product code by getting the client with the `useStatsigClient` hook and calling `checkGate`. If you aren't sure where to place your flag, refer to [Best Practices for feature flags](/feature-flags/best-practices).

1. Add the following code to your `App.js` file. In this snippet, the `example_gate` is the name of the Feature Gate you created in Step 1.

{% codetabs %}
```tsx Check Gate
const { client } = useStatsigClient();
return (
  <div>Gate is {client.checkGate('check_user') ? 'passing' : 'failing'}.</div>
);
```
{% /codetabs %}

2. Run your app. The app renders "Gate is passing" because the [targeting rule](#create-a-targeting-rule) targets all users with the `statsig.com` email domain, and this client's User object uses that same domain.

3. After you set up your gate, [monitor the impact of your new feature rollout](/feature-flags/view-exposures) or [manage flag lifecycles](/feature-flags/feature-flags-lifecycle).

## Run your first A/B test

This tutorial configured a simple feature flag. To do more complex feature rollouts or metric analysis, continue to the next tutorial to run your first A/B test in Statsig.