[FIXED] How to wrap vanilla javascript functions to reactjs without major modifications

Issue

This is part of my migration job from vanilla javascript to reactjs

export const WTree = () => {


    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
}

I just wrapped legacy code within

export const WTree = () => { 
}

Now I have to use normally in ReactJs

import { WTree } from 'components/binarytree/tree'

class App extends React.Component {

  render() {
    let tree = WTree.Tree
  }
}

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

I am thinking to use simple approach as below to gain more readability

class App extends React.Component {

  render() {
    let tree = Tree

  }
}

Please help me

Solution

It looks like what you're trying to do is just to use a data structure inside a React.js component - there's need for "migration" or changing anything. React.js is just a UI library so unless you're moving from one UI library to another, you don't have to migrate anything.

Your BinaryTree-related code is not legacy code - it's just JavaScript. You don't have to wrap anything inside arrow functions and then export it - this is not something that's React specific or it requires.

Just do:

function Tree () {
  this.root = null;
}
Tree.prototype.treverse = function(val) { ... }
// ...

export default Tree;

Then in your React component, just do the following:

import Tree from './components/binarytree/tree';

class App extends React.Component {
  constructor(props) {
    this.tree = new Tree()
  }

  componentDidMount() {
    // this is an example of a lifecycle method and how
    // you could use your tree data structure
    this.tree.addValue(...)
  }

  render() {
    // do whatever you need to do here
  }
}

Note: You most likely don't want to do let tree = new Tree() inside the render method, so move it to the constructor and use it however you need it in one of the lifecycle methods and/or event handlers.

---

Alternatively, if you do want to use the import { Tree } from '...' syntax, you could change your tree.js slighly by doing the following:

export function Tree () {
  this.root = null;
}
Tree.prototype.treverse = function(val) { ... }
// ...

Then, you can do:

import { Tree } from './components/binarytree/tree';
// ...

Hope this helps.

Answered By - goto

Answer Checked By - Marilyn (PHPFixing Volunteer)