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.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
01:58 MIN
Building with familiar React APIs and real CSS
Lynx: Native for More
09:39 MIN
Q&A: Learning curve, deployment, and team workflows
Making the switch from web to mobile development
04:57 MIN
Live coding a basic app and inspecting the DOM
Is Flutter ready for the web yet? - A live coding comparison between Flutter and React
02:04 MIN
Why React developers naturally transition to React Native
Challenges of building React and React Native apps
07:39 MIN
Live demo and recap of the dApp architecture
Connect Metamask with web3js
05:09 MIN
Live demo of a React app with role-based access
Say goodbye to building boring APIs with Azure Data API Builder
04:00 MIN
The past, present, and future of React Native
There's an app for that - on the role of cross platform development in the app development ecosystem
03:01 MIN
Summary of benefits from Ariakit and React 19
Building Interactive Async UI with React 19 and Ariakit
WeAreDevelopers LIVE days are changing - get ready to take partStarting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
Chris Heilmann
Dev Digest 134 - Where pixels sing?News and ArticlesWeAreDevelopers LIVE Data and Security Day is on Wednesday, 25/09/2024. Learn about OPC UA Updates, Best Practices for Using GitHub Secrets, Passwordless Web 1.5, Emerging AI Security Risks, Data Privacy in LLMs and get a chance to t...
Chris Heilmann
Dev Digest 136 - No JS(on) of mineNews and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Chris Heilmann
Dev Digest 109 -Egg-citing things…As we are heading into the Easter break, here are some things to spend some time on. There's resources on improving the performance of your code and you hear from the winners of CODE100 Amsterdam what it was like to be on stage. Also, hang tight as t...
From learning to earning
Jobs that call for the skills explored in this talk.