ポートレットでReactを使用する

ポートレットでReactを使用する

ファストトラック記事は、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

npm Reactポートレットテンプレート を使用して、必要な構成の多くを自動化するか、モジュールを手動で作成できます。 便宜上、すべての手動ステップを以下にリストします。 このチュートリアルでは、既存のReactプロジェクトを移行する場合でも、新しいプロジェクトを構築する場合でも、ポートレットでReactを使用する方法を示します。 ポートレットの構造の詳細については、 npm Reactポートレットテンプレート リファレンスドキュメントを、今すぐテストおよびデプロイできるReactポートレットの例については、 react npmポートレットサンプル を参照してください。 OSGiモジュールを作成し、そのメタデータを構成することから始めます。

メタデータの構成

次の手順に従って、モジュールを作成し、Reactのメタデータを構成します。

  1. OSGiモジュールを作成します。 たとえば、 npm Reactポートレットテンプレート使用します。

  2. プロジェクトの bnd.bnd ファイルに Web-ContextPath BND Headerを指定します。 以下は、npm Reactポートレットテンプレートのデフォルト構成です。

    Web-ContextPath: /my-npm-react-portlet
    
  3. .babelrc ファイル を作成し、次のプリセットを追加します。

    {
        "presets": ["env", "react"]
    }
    
  4. オプションで、プロジェクトのルートフォルダーに .npmbundlerrc ファイル を追加します。 このファイルは必要ありません。 ただし、このファイルを設定して、ファイルを無視するなど、ニーズに合わせて liferay-npm-bundler をカスタマイズできます。

  5. build.gradle ファイルに次の依存関係を含めます。

    compileOnly group: "com.liferay", 
    name: "com.liferay.frontend.js.loader.modules.extender.api", 
    version: "2.0.2"
    
  6. 以下に示す構成で存在しない場合は、プロジェクトに package.json 作成します。 "main" JSパスを更新して、アプリのメインJSファイルを指すようにします。 liferay-npm-bundler がビルドスクリプトの最後に追加されることに注意してください。 これより前に、プロジェクトで必要な追加のビルドプロセスをリストします。

    {
        "dependencies": {
            "react": "15.6.2",
            "react-dom": "15.6.2"
        },
      "description": "React Portlet",
        "devDependencies": {
            "babel-cli": "^6.26.0",
            "babel-preset-env": "^1.7.0",
            "babel-preset-react": "6.24.1",
            "liferay-npm-bundler": "^2.0.0"
        },
        "main": "js/index.js",
        "name": "my-npm-react-portlet",
        "scripts": {
            "build": "babel --source-maps -d 
        build/resources/main/META-INF/resources 
        src/main/resources/META-INF/resources && liferay-npm-bundler"
        },
        "version": "1.0.0"
    }    
    

ポートレットでES2015 +構文を使用するには、ブラウザー用にトランスパイルする必要があります。 ビルドスクリプトに含まれるBabelがこれを処理します。

次ポートレットを構成できます。

ポートレットの構成

次の手順に従って、ポートレットを構成します。

  1. Portlet.class サービスを実装するコンポーネントクラスを作成します。

    @Component(
        immediate = true,
        property = {
            "com.liferay.portlet.display-category=category.sample",
            "com.liferay.portlet.instanceable=true",
            "javax.portlet.init-param.template-path=/",
            "javax.portlet.init-param.view-template=/view.jsp",
            "javax.portlet.name=" + MyNpmReactPortletKeys.MyNpmReact,
            "javax.portlet.resource-bundle=content.Language",
            "javax.portlet.security-role-ref=power-user,user"
        },
        service = Portlet.class
    )
    public class MyNpmReactPortlet extends MVCPortlet {
      ...
    }
    
  2. ReactプロジェクトにCSSスタイリングも含まれている場合は、次の追加プロパティを追加して、メインCSSファイルの場所を指定します。

    "com.liferay.portlet.header-portlet-css=/css/main.css"
    

    このパスはリソースパスに関連していることに注意してください。 Sassを使用している場合は、このプロパティに .scss 拡張子をドロップし、代わりに .css を使用します。 たとえば、メインCSSファイルが src / main / resources / META-INF / resources / css / app.scssにある場合、次の構成になります。

    "com.liferay.portlet.header-portlet-css=/css/app.css"
    
  3. コードの保守性を向上させるために、 あなたのモジュールのパッケージ名のエイリアスに使用NPMResolverのAPI。 次の例では、モジュールの名前を bootstrapRequireとして公開しています。

    @Override
    public void doView(
            RenderRequest renderRequest, RenderResponse renderResponse)
        throws IOException, PortletException {
    
        JSPackage jsPackage = _npmResolver.getJSPackage();
    
        renderRequest.setAttribute(
            MyNpmReactWebKeys.BOOTSTRAP_REQUIRE,
            jsPackage.getResolvedId() + " as bootstrapRequire");
    
        super.doView(renderRequest, renderResponse);
    }
    
    @Reference
    private NPMResolver _npmResolver;
    
  4. init.jsp内に、次のJavaスクリプトレットを追加して、ポートレットの view.jspbootstrapRequire 変数にアクセスします。

    <%
    String bootstrapRequire = (String)renderRequest.getAttribute(
      MyNpmReactWebKeys.BOOTSTRAP_REQUIRE
    );
    %>
    

次に、アプリのコンポーネントをレンダリングする方法を学びます。

コンポーネントのレンダリング

アプリコンポーネントをレンダリングするには、次の手順に従います。

  1. アプリのメインJSファイル(たとえば、index.js )内で、以下の関数を使用してコンポーネントをレンダリングします。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import AppComponent from './components/App' //parent component
    
    export default function(elementId) {
      ReactDOM.render(<AppComponent />, document.getElementById(elementId));
    }  
    
  2. view.jsp を開き、コンポーネントを収容する要素コンテナを追加します。 次に、 <aui:script> タグを追加し、 属性の値を必要とするため、エイリアスモジュール名を渡します。 最後に、前の手順でエクスポートしたモジュールの デフォルト 関数を呼び出し、コンテナIDを要素IDとして渡します。 <portlet:namespace /><div>id 追加すると、ポートレットに固有であり、ページ上の既存の要素と衝突しません。

    <%@ include file="/init.jsp" %>
    
-root ">
    <aui:script require="<%= bootstrapRequire %>">
        bootstrapRequire.default('<portlet:namespace />-root');
    </aui:script>

これで、プロジェクトでReactを使用する方法がわかりました!

関連トピック

ポートレットでのAngularの使用

ポートレットでVueを使用する

ポートレットでnpmを使用する

« ポートレットでのフロントエンドフレームワークの使用ポートレットでVueを使用する »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています