React フックを使用して New Relic アプリを構築する

nr1 CLI のバージョン 2.49.1 以降では、 React フックを使用して New Relic アプリケーションとカスタムビジュアライゼーションを構築できます。このガイドでは、動作中の React フックの Nerdlet の例をいくつか紹介します!

あなたが始める前に

Nerdpack の開発には、New Relic アカウントと New Relic CLI の nr1が必要です。

まだ行っていない場合:

New Relic アカウントにサインアップする
Node.jsをインストールする
CLI クイックスタートを完了する

これで、 my-awesome-nerdpackという Nerdpack ができました。この Nerdpack には、名前を付けた Nerdlet とランチャーがあります (ただし、このガイドでは、デフォルトのランチャー名「launcher」と Nerdlet 名「home」を使用します)。このガイドでは、この Nerdpack を使用します。

最後に、 nr1 が最新であることを確認してください。このガイドでは、最小バージョン 2.49.1 が必要です。

bash

$nr1 update
$nr1 version
@datanerd/nr1/2.49.1 darwin-x64 node-v14.15.1

ヒント

VSCode を使用する場合、アプリのビルドに使用できる拡張機能と拡張パックがあります。

import React from 'react';

export default class HomeNerdlet extends React.Component {
  render() {
    return <h1>Hello, home Nerdlet!</h1>;
  }
}

index.js

アプリケーションをローカルで更新して提供する

nr1を使用すると、Nerdpack のローカルビルドを New Relic に提供できます。これは、アプリケーションを公開する前に、実稼働環境に似た環境でアプリケーションを開発するのに役立ちます。

コードを変更する前に、Nerdpack のディレクトリ構造をよく理解しておいてください。

my-awesome-nerdpack/
├───README.md
├───launchers/
│   └───launcher/
│       └───nr1.json
├───nerdlets/
│   └───home
│       ├───index.js
│       ├───nr1.json
│       └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json

launchers および nerdlets ディレクトリには、アプリケーションのロジックが含まれています。ほとんどのコードを更新するのは、これらのディレクトリです。Nerdpack 全体の nr1.json ファイルには、Nerdpack、Nerdlets、およびランチャーに関するメタデータが保持されます。

ヒント

Nerdpack ファイル構造の詳細については、ドキュメントをお読みください。

my-awesome-nerdpack/nerdlets/home/index.jsで、 HomeNerdlet クラスを関数に変更します。

import React from 'react';

function HomeNerdlet() {
  return <h1>Hello, home Nerdlet!</h1>;
}

export default HomeNerdlet;

index.js

次に、ヘッダーの代わりに Billboard チャートを返します。

import React from 'react';
import { BillboardChart } from 'nr1';

function HomeNerdlet() {
  const clickCount = {
    metadata: {
      id: '1',
      name: 'Count',
      viz: 'main',
    },
    data: [{ y: 10 }],
  };
  return <BillboardChart data={[clickCount]} />;
}

export default HomeNerdlet;

index.js

今のところ、Billboard チャートに静的な値を表示していますが、後の手順で、関数のローカル状態を使用して動的な値を指定します。

まだ行っていない場合は、Nerdpack のルートディレクトリからアプリケーションを提供します。

bash

$nr1 nerdpack:serve
Found and loaded 2 nr1.json files on MyAwesomeNerdpack (aad7ebb6-8901-43d0-a681-0719b2c60a11) Nerdpack.
Nerdpack:
 ✔  MyAwesomeNerdpack (aad7ebb6-8901-43d0-a681-0719b2c60a11) nr1.json
Launchers:
 ✔  launcher launchers/launcher/nr1.json
Nerdlets:
 ✔  home nerdlets/home/nr1.json
There is no certificate created yet.
 ✔  New certificate created.
Webpack bundle analyzer is enabled (you need to wait for the first build to finish)
 └  You can head to http://127.0.0.1:27888
NOTE: To verify how your assets will look in production, you need to
      add "--mode=prod" when starting the development server.
🛠  Built artifact files for:ex.js...
 ⁎  aad7ebb6-8901-43d0-a681-0719b2c60a11--home built ✔
 ✔  Nerdpack built successfully!
 ★  Starting as orchestrator...
 ✔  Server ready! Test it at: https://one.newrelic.com/?nerdpacks=local
 ↩  Server will reload automatically if you modify any file!
 ℹ  Additionally, you can test the following artifacts at:
Launchers:
 ⁎  launcher https://onenr.io/0z7wkEkMnjL
 ℹ  You can use "npm start -- --mode=prod" to run the development server in prod mode.

出力の下部にある URL を使用して、ランチャーを開きます。

bash

Launchers:
 *  launcher https://onenr.io/0z7wkEkMnjL
 ℹ  You can use "npm start -- --mode=prod" to run the development server in prod mode.

ここでは、「10」という数字を示す Billboard チャートに Nerdlet が表示されています。

ファイルを変更すると Nerdlet が自動的にリロードされるため、サーバーを実行したままにします。

Nerdlet で `useState()` フックを使用する

以前は、ビルボードチャートに静的な値を使用していました。ここで、関数のローカル状態を使用して動的な値を保存し、その値をチャートに表示します。

my-awesome-nerdpack/nerdlets/home/index.jsで、関数コンポーネントで useState() を呼び出します。

import React, { useState } from 'react';
import { BillboardChart } from 'nr1';

function HomeNerdlet() {
  const [count, setCount] = useState(0);

  const clickCount = {
    metadata: {
      id: '1',
      name: 'Count',
      viz: 'main',
    },
    data: [{ y: 10 }],
  };
  return <BillboardChart data={[clickCount]} />;
}

export default HomeNerdlet;

index.js

ここでは、 useState()を呼び出します。このフックは、配列にキャプチャする 2 つの値を返します。

count: ローカル状態の現在の値。デフォルト値は 0 で、これは useState()に渡した引数です。
setCount: 更新に使用する関数 count

Billboard チャートデータを countを使用するように変更します。

import React, { useState } from 'react';
import { BillboardChart } from 'nr1';

function HomeNerdlet() {
  const [count, setCount] = useState(0);

  const clickCount = {
    metadata: {
      id: '1',
      name: 'Count',
      viz: 'main',
    },
    data: [{ y: count }],
  };
  return <BillboardChart data={[clickCount]} />;
}

export default HomeNerdlet;

index.js

現在、状態を更新しないため、count の値はすべてのレンダリングで 0 になります。それを行う方法が必要です。

グラフの横に、 countをインクリメントするボタンをレンダリングします。

import React, { useState } from 'react';
import { BillboardChart } from 'nr1';

function HomeNerdlet() {
  const [count, setCount] = useState(0);

  const clickCount = {
    metadata: {
      id: '1',
      name: 'Count',
      viz: 'main',
    },
    data: [{ y: count }],
  };
  return (
    <div>
      <BillboardChart data={[clickCount]} />
      <button onClick={() => setCount(count + 1)}>Increment count</button>
    </div>
  );
}

export default HomeNerdlet;

index.js

ここでは、クリックするたびにカウントを 1 ずつ増やすボタンを Nerdlet に追加しました。

Nerdlet を実行しているブラウザに移動して、変更を確認します。

ボタンを数回クリックしてカウントを増やします。

Nerdlet で `useEffect()` フックを使用する

Nerdlet に Billboard チャートとボタンが追加されました。グラフには、ボタンをクリックした回数が表示されます。 useEffect() を使用して countを自動的にインクリメントします。

my-awesome-nerdpack/nerdlets/home/index.jsで、エフェクトを作成します。

import React, { useState, useEffect } from 'react';
import { BillboardChart } from 'nr1';

function HomeNerdlet() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount(() => count + 1);
    }, 1000);
  });

  const clickCount = {
    metadata: {
      id: '1',
      name: 'Count',
      viz: 'main',
    },
    data: [{ y: count }],
  };
  return (
    <div>
      <BillboardChart data={[clickCount]} />
    </div>
  );
}

export default HomeNerdlet;

index.js

useEffect() 1 秒ごとに count 値を自動的に増やします。カウントを自動化したので、インクリメントボタンも削除しました。

ブラウザーに移動して、更新を確認します。

概要

このガイドでは、次の方法について学習しました。

ローカルの New Relic Nerdpack を作成する
Nerdpack でフックを使用する

この機械翻訳は、参考として提供されています。

React フックを使用して New Relic アプリを構築する

あなたが始める前に.css-21sua1{background:none;border:none;width:0;padding:0;}

ヒント

アプリケーションをローカルで更新して提供する

ヒント

Nerdlet で useState() フックを使用する

Nerdlet で useEffect() フックを使用する

概要

あなたが始める前に

Nerdlet で `useState()` フックを使用する

Nerdlet で `useEffect()` フックを使用する