React Developer Tools To Increase Your Programming Productivity

on

 

React Developer Tools To Increase Your Programming Productivity 


As you can understand from the title of this article, the goal is to be more productive developing React applications. That is why a long intro is unnecessary. 

There are only two points that I want to highlight at the very beginning of the article:

  1. This list is opinionated. That means first of all that you can make your additions. I am sure that it can be extended to 30 or even 40 React developer tools. That is why your comments on Facebook or Twitter are highly appreciated. 
  2. This article can be useful first of all to beginners. That is why I provide some additional historical or background information about React.js in some paragraphs.

React Developer Tools

Reactide

Github stars: 9662
Web-site: http://reactide.io/

react developer tools, reactide
Image source: http://reactide.io/

Reactide is an integrated development environment (IDE) for web developers using React.js. If you use this tool, you don’t need server configuration as well as build-tool. Reactide is a React developer tool, it is simply a desktop application that offers great opportunities for visualization thought live code editing. 

Belle

Web-site: http://nikgraf.github.io/belle

react developer tools, belle
Image source: http://nikgraf.github.io/belle/#/?_k=744r8m

This open-source library was built by the members of React community. Belle is a UI framework that was built because of the difficulties with creating a decent UI with React in a short period. Too much freedom with React can lead to a giant waste of time. And that is where the opinionated component library Belle comes in handy. You can easily customize these components, and think only about the features you need to have. Mobile support and consistent API complying with React are also two big pluses of this React dev tool.

react-styleguidist

Web-site: https://react-styleguidist.js.org/docs/getting-started

React development environment. You need to install webpack in order to use this tool. You can see some examples here and here.

React Material Admin


Web-site: https://flatlogic.com/templates/react-material-admin

react developer tools, template
Image source: https://flatlogic.com/templates/react-material-admin

Admin template is a great React development tool that simplifies the process of coding. The benefits of using admin templates are well known. This particular admin dashboard follows Google material design guidelines. It is completely jQuery and Bootstrap free and can be used for fast development of almost any kind of web application.

  • Basic Tables;
  • React Router;
  • Charts;
  • Authentication;
  • Basic Dashboard;
  • Notifications bar.

React Semantic UI


Web-site: https://react.semantic-ui.com/

react developer tools, react semantic
Image source: https://react.semantic-ui.com/

There is an original Semantic UI library. And to use it in React you need to use a React integration of this library and Semantic UI CSS package. It will help to speed up the development process because of the prebuilt UI components. React Semantic UI is jQuery-free. As you probably know jQuery is a library for DOM manipulation. That is why it is unnecessary to keep real DOM in sync with virtual DOM (React uses JS representation of the real DOM). 

Among other features semantic UI React has:

  • Declarative API
  • Shorthand Props
  • Sub Components
  • Augmentation
  • Auto Controlled State

Comments

Post a Comment