React and the power of visualisation

What if you could build custom tools to visualize your telemetry data? See how React unlocks the programmability of the New Relic One platform.

#1about 3 minutes

Understanding the core concepts of React

React is a JavaScript framework that uses components, JSX, props, state, and a virtual DOM to build complex user interfaces efficiently.

#2about 2 minutes

How Facebook's UI challenges led to React's creation

React was created at Facebook to solve complex UI synchronization issues that older methods like event buses and DOM monitoring could not handle effectively.

#3about 1 minute

Why developers and businesses choose to use React

React simplifies development by automating UI updates with the virtual DOM, leading to faster applications and a better user experience.

#4about 2 minutes

Understanding the New Relic One observability platform

New Relic One is an observability platform that combines a telemetry data platform, full-stack observability, and applied intelligence to help understand complex systems.

#5about 2 minutes

Using React to build custom apps on New Relic

The New Relic One platform allows developers to build custom React applications, called Nerdlets, for tailored data visualizations and dashboards.

#6about 5 minutes

Setting up your New Relic development environment

To start building a New Relic application, you need a free account, an API key, the New Relic One CLI, and a generated application package.

#7about 9 minutes

Implementing the UI with React Map GL and Grid

The application's user interface is built by installing and configuring the React Map GL component for the map and using New Relic's Grid component for layout.

#8about 5 minutes

Fetching and displaying data with NRQL queries

Data is fetched from the New Relic platform using NRQL (New Relic Query Language) and integrated into the React application to populate the table and map.

#9about 3 minutes

Adding custom data-driven markers to the map

Custom markers are created as a separate React component and then rendered on the map, with their positions corresponding to the latitude and longitude from the fetched data.

#10about 2 minutes

Exploring an advanced example: The Cloud Optimizer app

The Cloud Optimizer is an example of a complex New Relic One application that analyzes cloud instance utilization to identify potential cost savings.

#11about 4 minutes

Resources for building your own New Relic apps

Get started with building your own applications using the developer documentation, GitHub examples, the community support forum, and a free New Relic account.