チュートリアル: React NativeのJSS入門
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このチュートリアルでは、React Nativeアプリケーション用の最初のJSSを作成して実行する方法について説明します。
React Native用のJSSを使用してアプリケーションを作成する前に、次のようにReact Nativeガイドに従って開発環境を設定する必要があります。
-
React NativeのJSSアプリケーション サンプルは、react-native initコマンドを使用してReact Native CLIで作成されたプロジェクトに基づいています。React Nativeを設定するときは、React Native CLI Quickstartタブを選択する必要があります。
-
新しいページビューで、使用可能なオプションから開発用オペレーティングシステムとターゲットオペレーティングシステムを選択します。
-
React Nativeガイドの指示に従って、依存関係をインストールします。
-
このセットアップ プロセス中に作成したアプリケーションを実行できることを確認します。
-
-
JSSで構築されたReact Nativeアプリで使用できる アプリケーションモード について理解しておいてください。
-
JSS CLIをインストールします。
React NativeのJSSで作成された基本アプリは、次の構成とツールでテストされています。
-
Windows/Android、開発マシンにUSBで接続された物理デバイスを使用。
-
macOS / iOS、Xcodeシミュレーターを使用。
このチュートリアルでは、次の方法について説明します。
-
アプリケーションを作成します。
-
アプリケーションを実行します。
アプリケーションを作成する
React NativeのJSSを使用してアプリケーションを作成するには:
-
次のコマンドを実行します。
RequestResponsenpx create-sitecore-jss@ver<version-number> react-native [--appName <your-app-name> --fetchWith [REST | GraphQL]]<version-number> を使用するバージョンに置き換えます。たとえば、21.
手記GraphQLを選択する場合、アプリケーションはSitecoreに接続されている必要があります。GraphQL要求は 、切断モードではサポートされていません。
アプリケーションを実行する
JSS React Nativeアプリケーションを起動するには、使用しているアプリケーションモードに応じて、ターミナルで次のいずれかのスクリプトを実行します。
-
Sitecoreインスタンスが利用できない場合は、アプリケーションを切断モードで起動します。
手記スクリプト定義は、新しいJSS React Nativeアプリケーションのpackage.jsonファイルにあります。
-
Androidアプリの場合:
RequestResponsejss start-android -
iOSアプリの場合:
RequestResponsejss start-ios
-
-
Sitecoreインスタンスがあり、それに対して開発する場合は、JSSアプリケーションをSitecoreに接続してデプロイし、アプリケーションを 接続モードで起動します。
-
Androidアプリの場合:
RequestResponsejss start-android:connected -
IOSアプリの場合:
RequestResponsejss start-ios:connected
-
React Nativeのビルドプロセスでは、React Native Metroバンドラーからの出力と、XcodeやAndroid SDKなどのReact Nativeプラットフォーム固有のコンパイラーからの出力を含む1つまたは2つの個別のターミナルウィンドウまたはタブが開きます。
ビルド プロセスが完了すると、シミュレーターまたは物理デバイスの画面にJSS React Nativeサンプル アプリが表示されます。
最初のビルドには数分かかる場合があります。通常、後続のビルドははるかに高速です。これはReact Nativeの正常な動作です。