As many of you already know, we created Grafana using AngularJS, but we have been migrating to React for about two years now. One of the big missing pieces in our migration puzzle was the templating system. This post starts in late 2019 when I first got my hands on this mysterious and complex area of the Grafana code base.
ReactJS combines the speed of JavaScript with unique rendering capabilities to make applications that are highly dynamic, performance oriented, and responsive to user input. State of JS report 2018 cites performance as the major reason ReactJS has gained so much popularity in such a short time. When it comes to options for building single-page applications (SPAs), React delivers performance advantages over Angular and other JavaScript frameworks and libraries.
One thing I love about working at OpsRamp is how we always come together to figure out new ways to manage complexity or achieve difficult development goals. Take, for example, managing application states. It’s historically one of the biggest challenges in front-end development. We’re a lean team, so we needed to figure out a better way. In this article, I’ll address how we accomplish this with React at OpsRamp, and how you can apply some of these practices in your own workday.
Debugging is the art of removing bugs — hopefully quickly, and in this guide, I’ll show you multiple ways to debug React. In terms of React, we can have many different kinds of bugs, including: There are more categories than this, but it’s enough to get started debugging in React. Let’s open by talking about how to create a small application using React and how to debug it.
You may have noticed a lot of recent changes with the mobile apps. Rocket.Chat has been maintaining two native versions of the mobile app, one for Android and one for iOS. This has proved to be quite problematic and we had to split our resources which is inefficient. We therefore made the decision to build a new app based on a common framework. After months of deliberation, testing, and lots of community help, we have finally decided to move to the proven React Native framework.
The article, Serverless API with ReactJS, was first published on the Serverless Guru website. Let’s build a Serverless REST API for our ReactJS website! In my last article, Deploy ReactJS App with S3 Static Hosting, we discussed hosting a simple React app on AWS with S3. This works great for simple static pages but what if you want to do something more? How do you host your API on S3?
Ghost Inspector is an automated browser testing tool for continuously monitoring websites. We recently released our WordPress plugin to show test results inside your WordPress admin dashboard. In this tutorial, you will learn how to build your own plugin using React, Webpack, and the Ghost Inspector API. You can view the final source code on GitHub.
At FireHydrant we use Redux Form for all of our forms. It is extremely easy to build complex form logic with all sorts of added bonuses that make using it in our React/Redux front end a no brainer. However, when we started using React Select for our select fields we started running into some issues. You are likely running into some of the same issues we did and so this blog post will help get you off the ground and integrating these two libraries together.
In this blog post we will go through how you can create plugins for Grafana using ReactJS. This presumes you have some basic knowledge about writing components in React.
Back in the days of the wild wild web (www) and post JQuery era, one web framework stood above all others: AngularJS. A “ring to rule them all”, AngularJS consolidated quite a few micro-frameworks and provided many extensibility points of expansion if needed. Over time though, many performance and architectural questions began to arise, to the point of no return – when the guys @Google decided to migrate from AngularJS to Angular (a poor naming decision).
