Crie um aplicativo New Relic com ganchos React

A partir da versão 2.49.1 da nossa CLI nr1 , você pode criar o aplicativo New Relic e visualizações personalizadas com ganchos React. Este guia fornece alguns exemplos Nerdlet de ganchos React em ação!

Antes de você começar

O desenvolvimento de Nerdpacks requer uma conta New Relic e a CLI da New Relic, nr1.

Se você ainda não o fez:

Cadastre-se para uma conta New Relic
Instale o Node.js.
Conclua o início rápido da CLI

Agora você tem um Nerdpack chamado my-awesome-nerdpack. Este Nerdpack tem um Nerdlet e um launcher que você nomeou (embora este guia use o nome padrão do launcher, "launcher", e o nome do Nerdlet, "home"). Você usa este Nerdpack ao longo deste guia.

Por fim, certifique-se de que seu nr1 esteja atualizado. Este guia requer uma versão mínima de 2.49.1:

bash

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

Dica

Se você usa VSCode, temos uma extensão e um pacote de extensões que você pode usar para construir seu aplicativo.

import React from 'react';

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

index.js

Atualize e sirva seu aplicativo localmente

Com nr1, você pode servir uma versão local do seu Nerdpack para a New Relic. Isso ajuda você a desenvolver seu aplicativo em um ambiente de produção antes de publicá-lo.

Antes de alterar qualquer código, familiarize-se com a estrutura de diretórios do 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

Os diretórios launchers e nerdlets contêm a lógica do seu aplicativo. É nesses diretórios que você atualiza a maior parte do seu código. Os arquivos nr1.json em todo o Nerdpack contêm metadados sobre seu Nerdpack, Nerdlets e inicializadores.

Dica

Leia nossa documentação para saber mais sobre a estrutura de arquivos do Nerdpack.

Em my-awesome-nerdpack/nerdlets/home/index.js, altere a classe HomeNerdlet para uma função:

import React from 'react';

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

export default HomeNerdlet;

index.js

Em seguida, retorne um gráfico Billboard em vez de um cabeçalho:

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

Por enquanto, você está mostrando um valor estático em seu gráfico Billboard, mas em etapas posteriores, você fornecerá um valor dinâmico usando o estado local da função.

Se ainda não o fez, sirva seu aplicativo a partir do diretório raiz do seu 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.

Use o URL na parte inferior da saída para abrir seu inicializador:

bash

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

Aqui, você vê seu Nerdlet com seu gráfico da Billboard mostrando o número “10”:

Deixe seu servidor funcionando, pois ele recarregará automaticamente seu Nerdlet quando você modificar seus arquivos.

Use o gancho `useState()` no seu Nerdlet

Anteriormente, você usava um valor estático para o gráfico da Billboard. Agora, você usa o estado local da sua função para armazenar um valor dinâmico e mostrar esse valor no gráfico.

Em my-awesome-nerdpack/nerdlets/home/index.js, chame useState() em seu componente de função:

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

Aqui, você chama useState(). Esse gancho retorna dois valores, que você captura em uma matriz:

count: O valor atual no estado local. Seu valor padrão é 0, o argumento que você passou para useState().
setCount: Uma função que você usa para atualizar count

Altere os dados do seu gráfico Billboard para usar 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

No momento, o valor de count será 0 em cada renderização porque você nunca atualiza o estado. Você precisa de uma maneira de fazer isso.

Ao lado do seu gráfico, renderize um botão para incrementar 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

Aqui, você adicionou um botão ao seu Nerdlet que aumenta a contagem em 1 cada vez que você clica nele.

Vá para o Browser que está executando o Nerdlet para ver suas alterações:

Clique no botão algumas vezes para aumentar a contagem.

Use o gancho `useEffect()` no seu Nerdlet

Seu Nerdlet agora tem um gráfico Billboard e um botão. O gráfico mostra o número de vezes que você clicou no botão. Use useEffect() para incrementar automaticamente count.

Em my-awesome-nerdpack/nerdlets/home/index.js, crie um efeito:

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() incrementa automaticamente o valor count a cada 1 segundo. Como você automatizou a contagem, também removeu o botão de incremento.

Vá para o seu Browser para ver as atualizações:

Resumo

Neste guia, você aprendeu como:

Crie um Nerdpack New Relic local
Use ganchos em seu Nerdpack

Esta tradução de máquina é fornecida para sua comodidade.

Crie um aplicativo New Relic com ganchos React

Antes de você começar.css-21sua1{background:none;border:none;width:0;padding:0;}

Dica

Atualize e sirva seu aplicativo localmente

Dica

Use o gancho useState() no seu Nerdlet

Use o gancho useEffect() no seu Nerdlet

Resumo

Antes de você começar

Use o gancho `useState()` no seu Nerdlet

Use o gancho `useEffect()` no seu Nerdlet