R-Factor - React & Redux Refactoring Tools
JavaScript developers have always envied C# and Java programmers the variety of automated refactorings that they had available. Modern editors such as Atom, Visual Studio Code, Sublime or WebStorm (even when powered by plugins) provide only a limited number of primitive code transformations - not to mention technology-specific refactorings.
It’s time to change that.
Introducing R-Factor - an automated refactoring tool for JavaScript designed to help developers who work with React & Redux.
When working with React or Redux you perform lots of exactly the same operations on your code all the time. Surely some of them could have been automated. And that is exactly what R-Factor does for you.
In this article we will explain to you what R-Factor is and will show you examples of some of the most useful refactorings provided by R-Factor.
What is R-Factor?
R-Factor is an automated refactoring tool for JavaScript designed to help developers who work with React & Redux. It features automated transformations for very common code manipulations that React developers perform manually dozens of times every day. If you do not use Redux you are still going to get a lot of value from React refactorings.
If you value your time, you’ll love it. We know it’s awesome because we use it too. In fact, after we finished implementing proof of concept of the very first transformation, we kept scratching our heads thinking “why didn’t we do this earlier?”.
Try it
Don’t take our word for it - try it out on-line yourself!
Features
R-Factor is a set of 20 automated refactorings, 18 of which are focused on working with React components, 8 of which are Redux-specific. It comes with 16 configuration options to match your code formatting, naming & other preferences.
Usage
All refactorings will be available in the command palette of your editor. They will be applied to either your selection or else an entire file.
Performance
It’s very fast. A single refactoring usually takes about 100–200ms to execute.
It takes slightly longer in Sublime, because we need to run an external node process (approx. 500 ms).
Quality
R-Factor has been thoroughly tested. We have 100% test coverage. Every statement, every branch, every function & every line is covered. 836 test cases, all green! We have run this tool on over 20 different projects with different settings. We’ve gathered feedback from a few independent developers. It’s still just software, but we feel we did pretty damn good.
Supported editors
Examples
Here you will find examples of 4 out of 20 refactorings provided by R-Factor.
Add className
Adds className prop to a component and applies it to its root JSX element. Adds propTypes definition. Uses classNames if necessary.
Toggle component type
Turns a functional component into a class component and vice versa.
Generate propTypes
Adds missing propTypes definitions for every prop used in a component.
Connect
Connects a component to the Redux store with both mapStateToProps & mapDispatchToProps generated.
Complete list of refactorings
- Add className
- Connect
- Connect mapDispatchToProps
- Connect mapStateToProps
- Connect mergeProps
- Convert SVG to component
- Convert to arrow component
- Convert to class component
- Convert to function component
- Disconnect
- Disconnect mapDispatchToProps
- Disconnect mapStateToProps
- Disconnect mergeProps
- Generate propTypes
- Move defaultProps & propTypes out of class
- Move defaultProps & propTypes to class
- Sort attributes in objects
- Sort imports
- Toggle component type
- Toggle withRouter HOC
Summary
We hope that this article has provided you with enough information to get interested in R-Factor. We’re aware that this tool is by no means complete and we would really appreciate your feedback. Feel free to leave a comment or contact us via our support page. Ideas, suggestions, bug reports & complaint letters are more than welcome!
Happy R-Factoring!
On-line resources
website | try it tool | download | documentation | support | purchase
