> ## Documentation Index
> Fetch the complete documentation index at: https://docs.litlyx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Learn how to track your first visit & event using React.

## Pre-Requisites

Before proceeding, ensure you:

<Steps>
  <Step title="Have installed React">
    Get started [here](https://react.dev/)
  </Step>

  <Step title="Get your workspace ID">
    Sign up on [Litlyx Dashboard](https://dashboard.litlyx.com/) and create a new workspace.
  </Step>
</Steps>

## 0. Create workspace

In this example, we used [Vite](https://vitejs.dev) as a local development server.

```bash npm theme={null}
npm create vite@latest my-app --template react-ts
```

<Note>Feel free to use your favorite development server tool, but to reproduce this example, you should use Vite to have the same structure.</Note>

## 1. Install

Choose your package manager & install the library.

<CodeGroup>
  ```bash npm theme={null}
  npm install litlyx-js
  ```

  ```bash yarn theme={null}
  yarn add litlyx-js
  ```

  ```bash pnpm theme={null}
  pnpm add litlyx-js
  ```

  ```bash bun theme={null}
  bun install litlyx-js
  ```
</CodeGroup>

## 2. Import

Now import Litlyx in your `entry-point` file. The easiest way in React is in the file `App.tsx`.

```javascript javascript theme={null}
import { Lit } from "litlyx-js"
```

<Note>If you have an advanced React workspace or you are a senior developer, import it in the chosen path where you configure the entire application.</Note>

## 3. Initialize

Next, initialize the Litlyx library with your workspace in your entry-point file (always `App.tsx` in this example) as follow:

```javascript javascript theme={null}
function App() {
    Lit.init("workspace_id");
    /* previously existing code */
}
```

This line of code will immediately start collecting web analytics such as: `Page Visits`, `Real-Time Users`, `Referrers`, `Bounce Rate`, `Countries`, `Unique Visitor Sessions`, `OS` & `Devices`.

<Note>If you have an advanced React workspace or you are a senior developer, remember not to show hardcoded IDs. Use a more secure pattern, for example, using an .env file and reading from it "workspace\_id".</Note>

## 4. Collect Custom Events

To customize your experience, add the following line in each function you desire. There is no limit to the number of events.

If you want to test if it works and everything is well configured, import the useEffect hook in the entry-point file (always `App.tsx` in this example):

```javascript javascript theme={null}
useEffect(() => {
    Lit.event("your_event_name");
}, [count])
```

If you want to exercise more control over your events, you can use the `metadata` field.

```javascript javascript theme={null}
useEffect(() => {
    Lit.event(
        "your_event_name", {
        metadata: {
            "functional-component": "App",
            value: count
        }
    });
}, [count])
```

In your dashboard, you can group them in the `Events` tab with the `Event Metadata Analyzer`.

<Note>Remember that `count` is a variable declared in `App.tsx` in the default structure if you used Vite. Otherwise, create your custom variable to listen to the click event.</Note>