> For AI agents: the complete documentation index is available at https://rsbuild.rs/llms.txt, the full documentation bundle is available at https://rsbuild.rs/llms-full.txt.

# ReactLynx

Learn how to build a [ReactLynx](https://lynxjs.org/react/introduction) application for [Lynx](https://lynxjs.org/) using Rsbuild.

## Create a ReactLynx application

Create a ReactLynx application with [@lynx-js/create-lynx](https://www.npmjs.com/package/@lynx-js/create-lynx):


```sh [npm]
npm create @lynx-js/lynx@latest
```

```sh [yarn]
yarn create @lynx-js/lynx
```

```sh [pnpm]
pnpm create @lynx-js/lynx@latest
```

```sh [bun]
bun create @lynx-js/lynx@latest
```

Then select `Rsbuild` when prompted to "Select build tool".

## Use ReactLynx in an existing project

To compile ReactLynx, you need to register the [ReactLynx plugin](https://lynxjs.org/api/rspeedy/react-rsbuild-plugin) provided by Lynx. The plugin will automatically add the necessary configuration for ReactLynx builds.

Install `@lynx-js/react` and the plugin:


```sh [npm]
npm add @lynx-js/react
```

```sh [yarn]
yarn add @lynx-js/react
```

```sh [pnpm]
pnpm add @lynx-js/react
```

```sh [bun]
bun add @lynx-js/react
```

```sh [deno]
deno add npm:@lynx-js/react
```


```sh [npm]
npm add @lynx-js/react-rsbuild-plugin -D
```

```sh [yarn]
yarn add @lynx-js/react-rsbuild-plugin -D
```

```sh [pnpm]
pnpm add @lynx-js/react-rsbuild-plugin -D
```

```sh [bun]
bun add @lynx-js/react-rsbuild-plugin -D
```

```sh [deno]
deno add npm:@lynx-js/react-rsbuild-plugin -D
```

Then register the plugin in Rsbuild config, and name the environment `lynx` so that it is built into a Lynx bundle:

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';

export default defineConfig({
  environments: {
    lynx: {},
  },
  plugins: [pluginReactLynx()],
});
```

For more details, see the [ReactLynx documentation](https://lynxjs.org/react/introduction).