title: How to wrap vanilla javascript functions to reactjs without major modifications
body: <p>This is part of my migration job from vanilla javascript to reactjs </p>
  
  <pre><code>
  export const WTree = () =&gt; {
  
  
      function Tree() {
          this.root = null;
      }
  
  
      Tree.prototype.traverse = function(val) {
          this.root.visit(1);
          console.log(this);
          // this.root.visit(this.root);
      }
  
      Tree.prototype.sorted = function(val) {
          var tree = new Tree();
          this.root.sorted(tree);
          tree.traverse()
  
  
      }
  
  
      Tree.prototype.addValue = function(val) {
  
          var n = new Node(val);
          if (this.root == null) {
              this.root = n;   
              // this.root.x = width / 2;
              // this.root.y = 16;
          }
          else {
          this.root.addNode(n);
          }
      }
  
      Tree.prototype.remove = function(val) {
          // debugger;
          var n = this.search(val)
          if (n != null) {
              if (this.root == n) {
  
                  if (this.root.right != null) {
                      this.root = this.root.right;
                  } else if (this.root.left != null) {
                      this.root = this.root.left;
                  }
  
              }
              n.remove();
  
          }
  
      }
  
      Tree.prototype.search = function (val) {
          var found = this.root.search(val);
          if (found == null) {
              console.log(val + ' not found');
          } else {
              console.log(val + ' found');
          }
          return found;
      }
  
  
  
      return Tree
  }
  </code></pre>
  
  <p>I just wrapped legacy code within </p>
  
  <pre><code>export const WTree = () =&gt; { 
  }
  </code></pre>
  
  <p>Now I have to use normally in ReactJs</p>
  
  <pre><code>import { WTree } from 'components/binarytree/tree'
  
  class App extends React.Component {
  
    render() {
      let tree = WTree.Tree
    }
  }
  </code></pre>
  
  <p>But I have to apply similar logic on 100s of components, so I don't want to modify or touch too much on legacy codes.
  Now I am losing readability from WTree.Tree</p>
  
  <p>I am thinking to use simple approach as below to gain more readability</p>
  
  <pre><code>class App extends React.Component {
  
    render() {
      let tree = Tree
  
    }
  }
  </code></pre>
  
  <p>Please help me</p>