# はじめに · インストール

Edge をインストールして React で使い始めます。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ja/docs/installation/

<a id="installation"></a>

## インストール

React アダプターには React 18 または 19 が必要です。他のフレームワーク用アダプターはまだありません。

npm

```bash
npm install @bolerish/edge
```

pnpm

```bash
pnpm add @bolerish/edge
```

Yarn

```bash
yarn add @bolerish/edge
```

Bun

```bash
bun add @bolerish/edge
```

<a id="stylesheet"></a>

## デフォルトのスタイル

React はサーフェスの接続時にデフォルトの CSS を自動で用意します。Edge.Provider を使わずフックだけで接続する場合も、CSS のインポートは不要です。SSR では、アプリのスタイルより前に Edge.Styles をドキュメントごとに一度レンダリングしてください。CSP で nonce が必要な場合は、サーバーとハイドレーションで同じリクエストの nonce を使います。

```tsx
<Edge.Styles nonce={nonce} />
```

```css
@import "@bolerish/edge/style.css";
```

既存の CSS インポートも引き続き使えます。フレームワークに依存せず使える CSS ファイルも提供します。明示的に読み込む場合は、アプリやユーティリティのスタイルより前に配置してください。リセットはさらに前に読み込めます。 パッケージのパスで CSS を読み込むには、そのパスを解決できるビルドツールが必要です。

<a id="next-steps"></a>

## Edge を使い始める

[使い方](https://edge.bolerish.com/ja/docs/usage/)で光を共有する領域とサーフェスを決め、[React](https://edge.bolerish.com/ja/docs/react/usage/)の手順で接続します。