Introducing C-React — A Modern React Developer Visualizer Tool
Introducing C-React
Welcome to an exciting revolution in the way you understand and navigate your React applications! Our open-source tool, C-React, provides a powerful visualizer for modern React applications, particularly those utilizing the latest features introduced in React 18. With C-React, you can mark and visualize concurrent rendering patterns on your web pages, differentiate between server-side rendered and client-side rendered components, and even assess performance metrics. C-React is a product of agile development, meticulously crafted using Kanban-style methodologies in a collaboration with the technology accelerator, OS Labs.
What are React 18 newest features?
React 18 has introduced a suite of improvements and features that make it a game-changer for web developers. It brings about out-of-the-box enhancements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense. The most notable addition, however, is concurrent rendering.
Concurrent rendering is a powerful new feature in React 18 that allows React to prepare multiple versions of your UI simultaneously. It’s interruptible, meaning React can start rendering an update, pause midway, and then continue later. This unique capability allows React to prepare new screens in the background without blocking the main thread, leading to an ultra-fluid user experience.
Concurrency unlocks new possibilities, but it can also complicate the internal structure of React applications. Understanding the relationships between components, their types, and their performance metrics can be challenging, especially when different components may follow varying fiber scheduling patterns. This is where our solution, C-React, comes in.
The Problem
The introduction of concurrency in React 18 has unlocked new interactivity for web developers. Features such as selective hydration and dynamic rendering methods like urgent vs non-urgent, client vs server, have enriched the potential of React applications.
However, the advancements brought forth by React 18, while powerful, have added new layers of complexity to managing and optimizing a React application. The task of keeping track of components, their relationships, and their types/performance metrics has become more intricate. Different components may follow varying fiber scheduling patterns, and distinguishing between server-side rendered and client-side rendered components can be daunting.
Our Solution
Enter C-React: A custom renderer and visualizer tool designed to alleviate these challenges and empower developers. C-React helps developers visualize components on the webpage that follow different fiber scheduling patterns. It differentiates and visualizes components that are of differing render priorities and those rendered on the server/client side. Furthermore, C-React integrates with web-vitals performance metrics of different components utilizing existing APIs, offering a comprehensive view of your application’s performance.
With C-React, navigating the new dimensions of React 18, especially its concurrent features, becomes more accessible and intuitive. Whether you are getting started with concurrent rendering or have already adopted it in your projects, C-React will streamline your debugging and optimization workflows, helping you build better React applications more efficiently.
Getting Started
C-React NPM Package
Firstly, you will need to install the C-React visualizer via NPM.
Use the following command to download it:
npm install creact-visualizerNext, import cRender from the creact-visualizer package into your root file:
import cRender from ‘creact-visualizer’;Now, you can render your root component using the cRender as shown in the example below:
import React from ‘react’;
import App from ‘./App’;
import cRender from ‘creact-visualizer’;const root = document.getElementById(‘root’);cRender(
<React.StrictMode>
<App />
</React.StrictMode>,
root
);Install C-React DevTool from the Chrome Web Store
The C-React Developer Tool displays a DOM component tree within the Chrome Developer Panel, which receives data sent from our Custom Renderer. Our Developer Tool dynamically updates and communicates with the webpage to visualize component changes and also provides performance metrics of components to promote efficient load times.
Here’s how to use:
1. Install the C-React DevTool from the Chrome Web Store.
2. Open your React application, or any website.
3. Open the Chrome Developer Tools and click on the C-React panel.
4. Watch the tree update dynamically as you navigate through your web page by clicking on components.
5. Click on tree nodes to see the corresponding element highlighted on your web page.
With C-React, you now have a clear visualization of your application’s internals, making it easier to understand, debug, and improve your React applications. Enjoy navigating the new dimensions of React 18 with ease and clarity!
Meet The Team
C-React | LinkedIn | Website | Github
Martin Carmona | LinkedIn | Github
Matthew MacDonald | LinkedIn | Github
