Créez une application New Relic avec des hooks React

À partir de la version 2.49.1 de notre nr1 CLI, vous pouvez créer des applications New Relic et des visualisations personnalisées avec des hooks React. Ce guide donne quelques exemples de hooks React en action dans Nerdlet !

Avant de commencer

Le développement de Nerdpacks nécessite un compte New Relic et la CLI New Relic, nr1.

Si vous ne l'avez pas déjà fait :

• Inscrivez-vous pour un compte New Relic
• Installer Node.js
• Complétez le démarrage rapide de la CLI

Vous disposez désormais d'un Nerdpack, appelé my-awesome-nerdpack. Ce Nerdpack contient un Nerdlet et un lanceur que vous avez nommé (cependant, ce guide utilise le nom du lanceur par défaut, « lanceur », et le nom du Nerdlet, « home »). Vous utilisez ce Nerdpack tout au long de ce guide.

Enfin, assurez-vous que votre nr1 est à jour. Ce guide nécessite une version minimale de 2.49.1 :

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

import React from 'react';

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

Mettez à jour et diffusez votre application localement

Avec nr1, vous pouvez proposer une version locale de votre Nerdpack à New Relic. Cela vous aide à développer votre application dans un environnement de type production avant de la publier.

Avant de modifier un code, familiarisez-vous avec la structure du répertoire 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

Les répertoires launchers et nerdlets contiennent la logique de votre application. C'est dans ces répertoires que vous mettez à jour la plupart de votre code. Les fichiers nr1.json du Nerdpack contiennent des métadonnées sur votre Nerdpack, vos Nerdlets et vos lanceurs.

Dans my-awesome-nerdpack/nerdlets/home/index.js, remplacez la classe HomeNerdlet par une fonction :

import React from 'react';

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

export default HomeNerdlet;

index.js

Copier

Ensuite, renvoyez un graphique Billboard au lieu d'un en-tête :

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

Copier

Pour l'instant, vous affichez une valeur statique dans votre graphique Billboard, mais dans les étapes ultérieures, vous fournissez une valeur dynamique à l'aide de l'état local de la fonction.

Si ce n'est pas déjà fait, diffusez votre application depuis le répertoire racine de votre Nerdpack :

bash

Copier

$
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.

Utilisez l'URL en bas de la sortie pour ouvrir votre lanceur :

bash

Copier

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

Ici, vous voyez votre Nerdlet avec votre tableau d'affichage affichant le numéro « 10 » :

Laissez votre serveur en marche, car il rechargera automatiquement votre Nerdlet lorsque vous modifierez ses fichiers.

Utilisez le hook useState() dans votre Nerdlet

Auparavant, vous utilisiez une valeur statique pour votre graphique Billboard. Maintenant, vous utilisez l’état local de votre fonction pour stocker une valeur dynamique et afficher cette valeur dans le graphique.

Dans my-awesome-nerdpack/nerdlets/home/index.js, appelez useState() dans votre composant de fonction :

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

Copier

Ici, vous appelez useState(). Ce hook renvoie deux valeurs, que vous capturez dans un éventail :

• count:La valeur actuelle dans l'état local. Sa valeur par défaut est 0, l'argument que vous avez passé à useState().
• setCount:Une fonction que vous utilisez pour mettre à jour count

Modifiez les données de votre graphique Billboard pour utiliser 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

Copier

À l’heure actuelle, la valeur de count sera 0 à chaque rendu car vous ne mettez jamais à jour l’état. Il vous faut un moyen de faire ça.

À côté de votre graphique, affichez un bouton pour incrémenter 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

Copier

Ici, vous avez ajouté un bouton à votre Nerdlet qui incrémente le compte de 1 à chaque fois que vous cliquez dessus.

Accédez à votre navigateur qui exécute le Nerdlet pour voir vos modifications :

Cliquez sur le bouton plusieurs fois pour augmenter le nombre.

Utilisez le hook useEffect() dans votre Nerdlet

Votre Nerdlet dispose désormais d'un graphique Billboard et d'un bouton. Le graphique montre le nombre de fois que vous avez cliqué sur le bouton. Utilisez useEffect() pour incrémenter automatiquement count.

Dans my-awesome-nerdpack/nerdlets/home/index.js, créez un effet :

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

Copier

useEffect() incrémente automatiquement la valeur count toutes les 1 seconde. Puisque vous avez automatisé le comptage, vous avez également supprimé le bouton d'incrémentation.

Accédez à votre navigateur pour voir les mises à jour :

Résumé

Dans ce guide, vous avez appris à :

• Créer un Nerdpack New Relic local
• Utilisez des crochets dans votre Nerdpack