URL: /guides/react

---
title: React
description: Add the FormShield beacon to a React single-page app
---

In a client-rendered React app (Create React App, Vite, or any SPA), add the beacon as a plain `<script>` tag in your HTML shell. The beacon auto-initializes and records a pageview on the initial document load. You need a publishable key (`fs_pub_live_…`) from your project's Settings.

If your app renders HTML on a server, see the [Next.js](/guides/nextjs) or [TanStack Start](/guides/tanstack-start) guide instead — those can also report crawlers server-side.

## Add the beacon

Put the script tag in the HTML shell that serves your app. For Create React App that is `public/index.html`; for Vite it is `index.html` at the project root. Add it just before `</body>`.

```html
<!-- public/index.html (CRA) or index.html (Vite) -->
<script
  async
  src="https://api.formshield.dev/js/formshield.js"
  data-fs-project-key="fs_pub_live_…"
  data-fs-action="pageview"
  data-fs-mode="pageload"
></script>
```

Replace `fs_pub_live_…` with your key. The tag is `async` and loads once when the document loads, before React mounts. Open the app and the pageview appears in the dashboard Logs.

<Note>
  The publishable key is safe in client code. You do not need a server or a build-time secret to embed the beacon.
</Note>

## Route changes

`data-fs-mode="pageload"` records one pageview when the document loads. A React SPA changes routes without reloading the document, so client-side navigations are not yet recorded as separate pageviews — that is a follow-up. Today the beacon records a single pageview on initial load.

If you need a pageview per route now, render the HTML on a server and use [server reporting](/guides/server-reporting), which sees every request the server handles.

## Next steps

<CardGroup cols={2}>
  <Card title="Pageview tracking" icon="chart-line" href="/guides/pageview-tracking">
    Every beacon attribute and the observation shape.
  </Card>
  <Card title="Server reporting" icon="server" href="/guides/server-reporting">
    Capture crawlers and AI bots from your origin.
  </Card>
</CardGroup>