Structure of tree display.jsx

Introduction

The file tree_display.jsx used to be a big file with over 1250 and all the React components used to be inside it together affecting readibility and clean code. The purpose of this project is to refactor the file such as to create a readable, clean React component tree. For this we went through tree_display.jsx and decided that it would be better if we could move the different components (classes) inside the file into seperate files which will be considerably smaller. Another change that can be brought in is to change the way class components are created. In the previous code, components used to be created using the function React.createClass(). This still works, however the latest versions of React prefers class creation by extending the super class React.Component which will result in code which has a more familliar class structure. While doing these changes, we also made sure to improve general code cleanliness by removing duplicate and unused code.

Components in tree_display.jsx

The structure can be easily understood if discussed one component at a time. For this we move from the most innermost component and move up the tree. This approach is used as the innermost component will have no child components , and any component discussed at a point will have all it's childs discussed earlier. For this very reason, we have followed the same pattern for selecting components for refactoring.

Using this approach, the first component that we have taken for refactoring is RowAction.