• English日本語한국어
  • ログイン今すぐ開始

この機械翻訳は参考用に提供されます。

英語版と翻訳版に矛盾がある場合は、英語版が優先されます。詳細については、こちらのページをご覧ください。

問題を作成する

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


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

あなたが始める前に

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

まだ行っていない場合:

これで、 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 でフックを使用する
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.