---
title: "Reactプロジェクトを立ち上げる"
slug: "set-up-the-react-project"
abstract: "JS SDKとコンポーネントを使って認証情報で認証する方法Sitecore Search。"
---
# Reactプロジェクトを立ち上げる
このウォークスルーは、[Search UIコンポーネントを使ったRapid Developmentのウォークスルーシリーズ](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/rapid-development-using-search-ui-components-walkthrough-series.html "Rapid development using Search UI components walkthrough series")のパート1です。
以下の方法を学びます:
- JS SDKをインストールしてUI Components React。
- 認証情報を取り戻す。
- 認証情報で認証してください。
## View the entities
Sitecore Searchドメインが複数のエンティティ向けに設定されている場合は、開始前にそれらのエンティティや詳細に精通することを強くお勧めします。
Sitecore Searchドメイン内のエンティティを見るには:
1. Sitecore Search認証情報を使ってSitecore Searchにログインしてください。
2. メニューバーで **「Administration**」をクリックし、「 **ドメイン設定**」をクリックします。
3. **General Settings**タブで「**Entities**」をクリックします。
**エンティティ**ページには、実装内のすべてのエンティティとその属性のリストが表示されます。
4. 特定のエンティティの属性を見るには、**Attributes**タブの**Entity**ドロップダウンリストで、そのエンティティの名前をクリックしてください。
## ウィジェットをView
作成が必要なウィジェットのインベントリ作成を始めることをお勧めします。Sitecore Searchのユーザーインターフェースの**Widgets**セクションには、実装用に設定されたすべてのウィジェットが一覧で、現在アプリケーションで使用されていないものも含まれます。
ウィジェットやそれらがホストされているページの詳細を見るには:
1. Sitecore Search認証情報を使ってSitecore Searchにログインしてください。
2. すべてのウィジェットのリストを見るには、メニューバーで **「Widgets**」をクリックしてください。
テーブルには、各ウィジェットのホストページ(または複数ページ)のname、rfk\_id、type、status、そしてホストページが表示されます。
3. ページ一覧を見るには、メニューバーの **「Pages**」をクリックしてください。
> !注ウィジェットコンポーネントのレンダリングを成功させるためには、ウィジェットコンポーネントがSitecore Searchで設定されたものと同じrfk\_idとtypeを持ち、ウィジェットが公開され*Active*ステータスを持つことを確認してください。
## JS SDKをインストールしてUI Components React
開発者はSitecore Search JS SDKやUI Componentsパッケージをプロジェクトにインストールできます。Reactコードでは、他のJSパッケージと同様にこれらのパッケージからクラス、関数、オブジェクトをインポートできます。
Reactの最新のJS SDKとUI Componentsをインストールするには:
1. Search JS SDK for Reactをプロジェクトに追加するには、プロジェクト内で以下の動作を実行してください。
npm install --save @sitecore-search/react
2. プロジェクトにReact Search UI Componentsを追加するには、プロジェクト内で以下の手順を実行してください。
npm install --save @sitecore-search/ui
3. ReactプロジェクトのRootコンポーネントで、以下のようにWidgetsProviderコンポーネントをインポートします。
import { PageController, WidgetsProvider } from "@sitecore-search/react";
const Root = () => {
PageController.getContext().setLocaleLanguage('en');
PageController.getContext().setLocaleCountry('us');
return (
)};
> !注複数のロケージを設定していない場合は、PageControllerコンポーネントとreturn文の前の2行を削除できます。この場合、デフォルトのロケールが自動的に使われます。
## 認証情報の取得
プライバシーとコンテンツを保護するため、申請をする前にアプリケーションがSearchで認証することを求めています。アカウントとドメインに関連付けられた認証情報を使用する必要があります。
Searchの認証情報を取得するには:
1. Sitecore Searchの認証情報でログインしてSitecore Searchしてください。
2. メニューバーで **Developer Resources**をクリックします。
3. 右側の **APIキー** ペインで、データリクエスト用のキーをコピーします。
## 認証情報で認証してください
プライバシーとコンテンツを保護するため、申請を行う前にアプリケーションはSearchで認証する必要があります。アカウントとドメインに関連付けられた認証情報を使用する必要があります。データ請求の前や最初のデータ請求時に認証を選択することができます。
> !重要JS SDKはクッキーを設定し、イベントを追跡する際にUUIDを含みます。検索結果をパーソナライズするために訪問者情報(UUID)が必要です。
JS SDKがアプリケーションを認証した後、JS SDKは今後のすべてのリクエストに必要な認証情報を含めます。
React申請のRootまたはAppの要素に資格を含めることをお勧めします。
サブドメインが設定されたときに認証するには:
- ReactプロジェクトのRootコンポーネントで、[認証用の正しい認証情報](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/js-sdk-reference/credentials-for-authentication.html "Credentials for authentication")を持つWidgetsProviderコンポーネントと、ロケールを設定するPageControllerコンポーネントを追加してください。これは以下のコードブロックに示されています。
import { PageController, WidgetsProvider } from "@sitecore-search/react";
const Root = () => {
PageController.getContext().setLocaleLanguage('en');
PageController.getContext().setLocaleCountry('us');
return (
)}
> !注複数のロケージを設定していない場合は、PageControllerコンポーネントとreturn文の前の2行を削除できます。この場合、デフォルトのロケールが自動的に使われます。
>
> 使用する認証情報は、ドメインの設定方法によってSitecore Search異なります。サブドメインがSearchで設定されていない場合の認証手順については、「 [ドメイン設定なしで認証」](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/rapid-development-using-search-ui-components-walkthrough-series/authenticate-without-domain-set-up.html "Authenticate without domain set up")を参照してください。
>
> env属性の値は、アジア/オセアニアドメインの場合apse2、ヨーロッパドメインの場合prodEu、米国ドメインの場合prodのいずれかでなければなりません。