Visual brutish component scan of React projects
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src/reactocular
.gitignore
.travis.yml
LICENSE
README.md
project.clj

README.md

reactocular Build Status

/ˈrɪˈaktɒkjʊlə/
noun

  1. of or connected to React and vision.
    "project anxiety caused by reactocular trauma"

adjective

  1. visual, brutish, inelegant

Visual brutish component scan of React projects. reactocular visualizes your React component hierarcy using tangle and Graphviz

1 Minute Version

You can use reactocular from command-line if you have Graphviz and Leiningen like this:

lein run ../hsl/digitransit-ui/app

There is also a convenient uberjar available to download. You can use it like a regular Java app like this:

java -jar reactocular.jar ../hsl/digitransit-ui/app

The result is a set of files with various visualiations of your components. You can see that there is still work to do, in this project as well as the example :)

Component diagram with references between components. Shows also which components are «elementary» building blocks (blue), as well as «stateless» functional components (gray). A dark gray signifies «page».

Example components.svg (from Digitransit)

Module diagram with folder structure (solid black) and component references (solid blue)

Example modules.svg (from Digitransit)

Also if you want to use the code from Clojure, add to your project.clj:

Clojars Project

Backlog

  • Stylize the graph
  • Add overall statistics
  • Add simple list view
  • Check against other projects and improve

=======

License

Copyright © 2015 Markku Rontu

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.