Cree una aplicación New Relic con ganchos de React

A partir de la versión 2.49.1 de nuestra nr1 CLI, puede crear la aplicación New Relic y visualizaciones personalizadas con enlaces de React. ¡Esta guía ofrece algunos ejemplos de Nerdlet de ganchos de React en acción!

Antes de que empieces

El desarrollo de Nerdpacks requiere una cuenta de New Relic y la CLI de New Relic, nr1.

Si aún no lo has hecho:

Regístrese para obtener una cuenta New Relic
Instalar Node.js
Complete el inicio rápido de CLI

Ahora tienes un Nerdpack, llamado my-awesome-nerdpack. Este Nerdpack tiene un Nerdlet y un iniciador que usted nombró (aunque esta guía usa el nombre de iniciador predeterminado, "lanzador", y el nombre de Nerdlet, "inicio"). Utiliza este Nerdpack a lo largo de esta guía.

Finalmente, asegúrese de que su nr1 esté actualizado. Esta guía requiere una versión mínima de 2.49.1:

bash

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

Sugerencia

Si usa VSCode, tenemos una extensión y un paquete de extensión que puede usar para crear su aplicación.

import React from 'react';

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

index.js

Actualice y entregue su aplicación localmente

Con nr1, puedes ofrecer una versión local de tu Nerdpack a New Relic. Esto le ayuda a desarrollar su aplicación en un entorno similar a la producción antes de publicarla.

Antes de cambiar cualquier código, familiarícese con la estructura de directorios de 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

Los directorios de lanzadores y nerdlets contienen la lógica de su aplicación. Es en estos directorios donde actualiza la mayor parte de su código. Los archivos nr1.json de Nerdpack contienen metadatos sobre su Nerdpack, Nerdlets y lanzadores.

Sugerencia

Lea nuestra documentación para obtener más información sobre la estructura de archivos de Nerdpack.

En my-awesome-nerdpack/nerdlets/home/index.js, cambie la clase HomeNerdlet a una función:

import React from 'react';

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

export default HomeNerdlet;

index.js

A continuación, devuelva un gráfico de Billboard en lugar de un encabezado:

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 ahora, muestra un valor estático en su gráfico de Billboard, pero en pasos posteriores, proporciona un valor dinámico utilizando el estado local de la función.

Si aún no lo has hecho, entrega tu aplicación desde el directorio raíz de tu 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.

Utilice la URL en la parte inferior del resultado para abrir su iniciador:

bash

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

Aquí ves tu Nerdlet con tu gráfico de Billboard que muestra el número "10":

Deje su servidor en funcionamiento, ya que recargará automáticamente su Nerdlet cuando modifique sus archivos.

Usa el gancho `useState()` en tu Nerdlet

Anteriormente, utilizabas un valor estático para tu gráfico de Billboard. Ahora, usa el estado local de su función para almacenar un valor dinámico y mostrar ese valor en el gráfico.

En my-awesome-nerdpack/nerdlets/home/index.js, llame a useState() en su componente de función:

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

Aquí llamas useState(). Este gancho devuelve dos valores, que captura en una matriz:

count: El valor actual en el estado local. Su valor predeterminado es 0, el argumento que le pasaste a useState().
setCount: Una función que usas para actualizar count

Cambie los datos de su gráfico de 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

En este momento, el valor del recuento será 0 en cada renderizado porque nunca actualiza el estado. Necesitas una manera de hacerlo.

Junto a su gráfico, muestre un botón 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

Aquí, agregaste un botón a tu Nerdlet que incrementa el conteo en 1 cada vez que haces clic en él.

Vaya a su browser que esté ejecutando Nerdlet para ver los cambios:

Haga clic en el botón varias veces para incrementar el recuento.

Usa el gancho `useEffect()` en tu Nerdlet

Tu Nerdlet ahora tiene un gráfico de Billboard y un botón. El gráfico muestra la cantidad de veces que hizo clic en el botón. Utilice useEffect() para incrementar automáticamente count.

En my-awesome-nerdpack/nerdlets/home/index.js, crea un efecto:

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 automáticamente el valor count cada 1 segundo. Como automatizó el recuento, también eliminó el botón de incremento.

Vaya a su browser para ver las actualizaciones:

Resumen

En esta guía, aprendió cómo:

Crea un New Relic Nerdpack local
Usa ganchos en tu Nerdpack

Te ofrecemos esta traducción automática para facilitar la lectura.

Cree una aplicación New Relic con ganchos de React

Antes de que empieces.css-21sua1{background:none;border:none;width:0;padding:0;}

Sugerencia

Actualice y entregue su aplicación localmente

Sugerencia

Usa el gancho useState() en tu Nerdlet

Usa el gancho useEffect() en tu Nerdlet

Resumen

Antes de que empieces

Usa el gancho `useState()` en tu Nerdlet

Usa el gancho `useEffect()` en tu Nerdlet