Introducing R-Factor, a refactoring tool for React and Redux

2 min read

Yesterday, Kamil Mielnik, a JavaScript Developer who specializes in React technology stack, introduced a new automated refactoring tool for React and Redux called R-Factor. Just like C# and Java programmers, who are spoiled with a variety of refactoring tools, JavaScript developers can use this tool to save their time.

With this refactoring tool, React developers will not have to spend time writing very common code manipulations. R-Factor does not break your code, keeps your formatting, and can refactor a file in a reasonable amount of time. It comes with a set of 20 automated refactorings. Out of this 20 automated refactorings, 10 are for React components, 8 are for Redux, and the remaining two are other refactorings.

It also provides 16 configuration options, using which you can match your code formatting, naming, and other preferences. Though the initial goal of this tool was to only cover React and Redux refactoring, in the future, we could see some features going beyond React and Redux.

Following are some of the refactorings that are introduced:

Add className: This will add the className prop to a component and apply it to its root JSX element.
Convert SVG to component: With this refactoring, you can convert an SVG into a React component.
Convert to arrow component: This will turn a component into a functional component defined as an arrow function.
Convert to function component: You can convert a component to a functional component defined as a function.
Connect: This connects a component to the Redux store with both mapStateToProps & mapDispatchToProps generated.

This refactoring tool is supported on Windows, Linux, and macOS and the supported editors include Atom, Sublime Text 3, and VSCode. For using the R-Factor tool, you need to buy the license key. Before you actually start using it on your project, you can try the R-Factor tool online.

To know more in detail, check out the official website of R-Factor.