Building a React dashboard to visualize workflow and job events

Data visualization is the process of translating large data sets and metrics into charts, graphs, and other visuals. The resulting visual representation of data makes it easier to identify and share real-time trends, outliers, and new insights about the information represented in the data. Using CircleCI webhooks, we can gather data on workflow and job events. In this tutorial, I will lead you through the steps to create a React-based dashboard to visualize this data.

Data Visualization Made Easy with ReactJS, Nivo and InfluxDB

If a picture is worth a thousand words, then a well-done data visualization is worth a million. The quality of a dashboard can make or break an application. In this tutorial, you will learn how to make high-quality data visualizations easily by using the Nivo charting library with ReactJS. You will also learn how to query data stored in InfluxDB to make your charts dynamic and versatile.

Create a Reusable Text Input With React Hook Form

Sometimes, managing several input fields gets crazy complex. You may need to recreate the same thing for each form and that’s can be really time-consuming. With a reusable Text Input in React, you can create just one input element in just one component and reuse it everywhere in any form. Let’s do this.

React Advanced 2021 Workshop: "Building a Sentry: 7 years of open-source React"

Sentry’s Evan Purkhiser and David Wang will walk through Sentry’s 2000+ file Typescript/React codebase at a special workshop that took place at React Advanced 2021. They’ll tell war stories of the good, the bad, and the ugly. Gaze in wonder at their modern usage of Typescript, react hooks, and styled components. Recoil in disgust at their legacy Reflux usage and perplexing Webpack configuration. Step away from the workshop with a working knowledge of techniques to keep a large-scale frontend codebase modern and maintainable.
Sponsored Post

Build successful React Native apps with Raygun

React Native has come a long way since an internal prototype at Facebook to where it is now. The cross-platform framework is now a go-to tool for businesses to develop natively rendered mobile apps for iOS and Android. Thanks to its reduced development time with hot reloading to its focus on runtime performance with natively rendered views, React Native has gained traction with large-scale companies like Shopify and Tesla. Web developers have made the leap from the browser to mobile bringing with them all of their tools and expertise, and it is consistently the most popular cross-platform framework.

Rollbar SDKs: Using Rollbar in React

Introducing the new Rollbar for React JS Library! This new version of the Rollbar SDK features a declarative API to support the latest React API capabilities and allow greater flexibility in customizing Rollbar's behavior. This video introduces the new library's main features with an accompanying setup demo to show how to add the library to your React apps.

Continuous integration for React applications using Jest and Enzyme

React continues to be the web framework of choice for many UI developers, second only to jQuery, according to Stack Overflow. It provides an intuitive model for building data-driven user interfaces, and efficiently updates the DOM when this data changes. React pairs nicely with Redux, which enables managing the data that React needs to render interfaces. Redux offers a predictable way to structure and update the data in those frontend applications.