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 が必要です。
$nr1 update$nr1 version@datanerd/nr1/2.49.1 darwin-x64 node-v14.15.1import React from 'react';
export default class HomeNerdlet extends React.Component { render() { return <h1>Hello, home Nerdlet!</h1>; }}アプリケーションをローカルで更新して提供する
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.jsonlaunchers および 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;次に、ヘッダーの代わりに 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;今のところ、Billboard チャートに静的な値を表示していますが、後の手順で、関数のローカル状態を使用して動的な値を指定します。
まだ行っていない場合は、Nerdpack のルート ディレクトリからアプリケーションを提供します。
$nr1 nerdpack:serveFound and loaded 2 nr1.json files on MyAwesomeNerdpack (aad7ebb6-8901-43d0-a681-0719b2c60a11) Nerdpack.Nerdpack: ✔ MyAwesomeNerdpack (aad7ebb6-8901-43d0-a681-0719b2c60a11) nr1.jsonLaunchers: ✔ launcher launchers/launcher/nr1.jsonNerdlets: ✔ home nerdlets/home/nr1.jsonThere 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:27888NOTE: 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 を使用して、ランチャーを開きます。
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;ここでは、 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;現在、状態を更新しないため、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;ここでは、クリックするたびにカウントを 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;useEffect() 1 秒ごとに count 値を自動的に増やします。カウントを自動化したので、インクリメント ボタンも削除しました。
ブラウザーに移動して、更新を確認します。
概要
このガイドでは、次の方法について学習しました。
- ローカルの New Relic Nerdpack を作成する
- Nerdpack でフックを使用する