New React Developer Tools : What’s New Features?

A Smith
4 min readSep 16, 2019

--

Maintained by leading social media giant Facebook and a community of individual developers and companies React is NOT a framework compared to Angular or Vue.js, instead a Javascript library which continues to rise in popularity in both online and web-based businesses. React is used for the development of single-page or mobile applications as it is optimized to fetch constantly changing data for recording. To leverage the benefits of ReactJS, it is essential to partner with a ReactJS development company

Hence, there is a quick and relatively short learning curve involved in understanding React compared to other comprehensive libraries. Enterprises can streamline development without spending capital on the existing system.

Some quick Facts about ReactJS

  • React was developed by Facebook in 2011
  • Obtained open-source status in 2013 under the controversial BSD3 license
  • The first release of React’s Github repository generated 96,000 stars from developers
  • The community of almost 1200 active contributors
  • Regularly pushing updates to enrich the library. With millions of downloads, this library has proven its preference within technology companies.

Businesses have quickly adopted this technology due to its ease of use and simplicity, making the learning curve very quick. Code reusability with addition/modification of features in the existing system meant allocating relatively fewer resources in terms of time and budget on development and building larger teams, respectively. Delivering excellent looking user interfaces (UI), the fundamental principle which drives is that HTML and JavaScript are bound to work side-by-side.

Top companies using React’s capabilities include top-notch companies such as right from small companies to large scale enterprises.

  • Facebook
  • Instagram
  • Netflix
  • Whatsapp
  • Salesforce
  • Uber
  • The New York Times
  • CNN
  • Dropbox
  • DailyMotion
  • IMDB
  • Reddit

ReactJS Features

To provide a high-level overview of React’s capability, it is crucial to understand the core concepts and features associated with the library.

These are the core features which are summarized as follows:

Component Creation

  • React allows the development of module-like pieces of code called “Components”.
  • Code snippets provide a particular part of the user-interface, repeated across different web pages.
  • This is what we meant by reusability, which is a great way to save valuable time on development.
  • Declarative nature of React makes UI designing process relatively simple and minimizes load from product developers, allowing focusing on functions and business logic.

Virtual DOM

  • One of the most significant improvements in web development since AJAX, the virtual DOM is the reason allowing fast creation of scalable web apps.
  • React’s memory reconciliation algorithm, the library constructs a representation of the page in virtual memory.
  • Performs updates before rendering the final web-page into the browser.

Lifecycle methods

Lifecycle methods are hooks that allow execution of code at set points during a component’s lifetime.

React Hooks

Hooks are functions allowing developers to “hook into” React state and lifecycle features from function components. Hooks don’t run inside classes — rather they allow you to use React without classes.

New React DevTools

If you’re into React development, you must have tried the official React DevTools. Available in Chrome, Firefox and even as a standalone application for Safari and React Native debugging, this browser extension allows debugging your components.

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows seamless inspection of the React component hierarchies in the Chrome Developer Tools.

What’s New?

There are several significant changes in version 4!

This new version provides significant performance gains and improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects.

Which versions of React are supported?

react-dom

  • 0–14.x: No support
  • 15.x: Supported (except for the new component filters feature)
  • 16.x: Supported

react-native

  • 0–0.61: No support
  • 0.62: Support will be provided in future (when 0.62 is released)

DevTools: How to Access New Tools

React DevTools is available as an extension for Chrome and Firefox. In case you have already installed the extension, it should update automatically within the next couple of hours. If you use the standalone shell (e.g., in React Native or Safari), you can install the new version from NPM.

What happened to all DOM elements?

The new DevTools offers altogether several ways to filter components from the tree to make it easier to navigate deeply nested hierarchies. Host nodes (e.g. HTML, React Native ) are hidden by default, but this filter can be disabled.

Finally

React’s advantages make it a robust programming library. Companies are investing in this technology and realize React’s ability to help stay relevant in the market. The latest React library will help create modern and scalable applications.

It is vital to analyze the pros of different high-performance applications to drive user leads and increased revenues. React is that the library is assisting companies in achieving their goals, strengthening its relevance in the market for a longer time to come.

Originally published at www.hiddenbrains.com on September 16, 2019.

--

--

A Smith
A Smith

Written by A Smith

Albert Smith is a Digital Marketing Manager with Hidden Brains, a leading enterprise web & mobile app development company specializing in IoT, Cloud & Big Data

No responses yet