Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon

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

Save for later
  • 2 min read
  • 19 Feb 2019

article-image

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.
  • Unlock access to the largest independent learning library in Tech for FREE!
    Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
    Renews at $19.99/month. Cancel anytime
  • 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.

React Native 0.59 RC0 is now out with React Hooks, and more

Reactive programming in Swift with RxSwift and RxCocoa [Tutorial]

React 16.8 releases with the stable implementation of Hooks