Build a New Relic app with React hooks

Starting with version 2.49.1 of our nr1 CLI, you can build New Relic applications and custom visualizations with React hooks. This guide gives some Nerdlet examples of React hooks in action!

Before you begin

Developing Nerdpacks requires a New Relic account and the New Relic CLI, nr1.

If you haven't already:

Sign up for a New Relic account
Install Node.js
Complete the CLI quick start

Now, you have a Nerdpack, called my-awesome-nerdpack. This Nerdpack has a Nerdlet and a launcher that you named (though, this guide uses the default launcher name, "launcher", and Nerdlet name, "home"). You use this Nerdpack throughout this guide.

Finally, make sure your nr1 is up-to-date. This guide requires a minimum version of 2.49.1:

bash

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

Tip

If you use VSCode, we have an extension and an extension pack you can use to build your app.

import React from 'react';

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

index.js

Update and serve your application locally

With nr1, you can serve a local build of your Nerdpack to New Relic. This helps you develop your application in a production-like environment before you publish it.

Before you change any code, familiarize yourself with the Nerdpack's directory structure:

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

The launchers and nerdlets directories contain the logic of your application. It's in these directories that you update most of your code. The nr1.json files throughout the Nerdpack hold metadata about your Nerdpack, Nerdlets, and launchers.

Tip

Read our documentation to learn more about the Nerdpack file structure.

In my-awesome-nerdpack/nerdlets/home/index.js, change the HomeNerdlet class to a function:

import React from 'react';

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

export default HomeNerdlet;

index.js

Next, return a Billboard chart instead of a header:

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

For now, you're showing a static value in your Billboard chart, but in later steps, you supply a dynamic value using the function's local state.

If you're not already, serve your application from the root directory of your 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 the url at the bottom of the output to open your launcher:

bash

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

Here, you see your Nerdlet with your Billboard chart showing the number "10":

Leave your server running, as it will automatically reload your Nerdlet when you modify its files.

Use the `useState()` hook in your Nerdlet

Previously, you used a static value for your Billboard chart. Now, you use your function's local state to store a dynamic value and show that value in the chart.

In my-awesome-nerdpack/nerdlets/home/index.js, call useState() in your function component:

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

Here, you call useState(). This hook returns two values, which you capture in an array:

count: The current value in local state. Its default value is 0, the argument you passed to useState().
setCount: A function you use to update count

Change your Billboard chart data to use 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

Right now, the value of count will be 0 on every render because you never update the state. You need a way to do that.

Alongside your chart, render a button to increment 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

Here, you added a button to your Nerdlet that increments the count by 1 every time you click it.

Move to your browser that's running the Nerdlet to see your changes:

Click the button a few times to increment the count.

Use the `useEffect()` hook in your Nerdlet

Your Nerdlet now has a Billboard chart and a button. The chart shows the number of times you clicked the button. Use useEffect() to automatically increment count.

In my-awesome-nerdpack/nerdlets/home/index.js, create an effect:

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() automatically increments the count value every 1 second. Since you automated the count, you also removed the increment button.

Move to your browser to see the updates:

Summary

In this guide, you learned how to:

Create a local New Relic Nerdpack
Use hooks in your Nerdpack

Before you begin.css-21sua1{background:none;border:none;width:0;padding:0;}

Tip

Update and serve your application locally

Tip

Use the useState() hook in your Nerdlet

Use the useEffect() hook in your Nerdlet

Summary

Before you begin

Use the `useState()` hook in your Nerdlet

Use the `useEffect()` hook in your Nerdlet