reactsniffer

1.0.19 • Public • Published

ReactSniffer

npm version license

NPM

ReactSniffer is a tool to support practitioners and researchers in detecting code smells in React-based web systems. The tool has two key components: a parser for analyzing the React files and a Smells Detector module for identifying the smells.

The Parser is a Command-Line Interface (CLI) implemented in Node, which receives as input a valid front-end file and generates an Abstract Syntax Tree (AST) in a JSON format. The Smells Detector module is also implemented in Node and relies on the AST to search and inspect React elements.

Installation

Use the package manager npm to install locally.

npm install -g reactsniffer

Usage

To use this tool you need to provide the repository directory (e.g., myproject/react/src)

reactsniffer myproject/react/src

Output

The output will show the smells into two summarized tables.

Two CSV files (one per file and another by component) with more details about each smell will be generated.

Supported Smells

ReactSniffer supports the following smells:

Smell Description
Large Component Component with too many props, attributes, and/or lines of code
Too Many Props Passing too many properties to a single component
Inheritance Instead of Composition Using inheritance to reuse code among components
Props in Initial State Initializing state with props
Direct DOM Manipulation Manipulating DOM directly
Force Update Forcing the component or page to update
JSX outside the render method Implementing markup in multiple methods
Uncontrolled Components A component that does not use props/state to handle form's data
Large File A file with several components and lines of code

License

MIT

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.19
    54
    • latest

Version History

Package Sidebar

Install

npm i reactsniffer

Weekly Downloads

121

Version

1.0.19

License

MIT

Unpacked Size

225 kB

Total Files

17

Last publish

Collaborators

  • fabiosferreira