Where would I add existing JS Code to react-boilerplate

Question

I spent a while toying around with react-boilerplate, reading the docs, searching the web etc. I built up some simple components and containers no problem.

I have a large amount of code that creates DOM nodes and returns them using javascript. For a simple example

  function makeSomething(){    
        let div = document.createElement('div');
        div.innerHTML = 'where would this go in reactjs boilerplate';
        return div
  }

My code does a ton of DOM manipulation, adding table rows, deleting rows and columns, moving rows, fetching data from remote sources. It is all written in javascript except for ajax calls which use jquery.

My question is how do I call and place the returned nodes into a container?

here is a simplified example of trying to add a js created node in a container:

export default class VendorsPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  // Since state and props are static,
  // there's no need to re-render this component
  shouldComponentUpdate() {
    return false;
  }
  renderdiv(){
    let div = document.createElement('div');
    div.innerHTML = 'hi there'
      return div
  }
  render() {
    return (
        //how do I put renderdiv in here
    );
  }
}

Jayce444 · Answer 1 · 2017-02-05T04:24:27.277

Well the way you'd do it in your example is like so:

export default class VendorsPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  // Since state and props are static,
  // there's no need to re-render this component
  shouldComponentUpdate() {
    return false;
  }
  renderdiv(){
    return 'hi there';
  }
  render() {
    return (
      <div>{this.renderdiv()}</div>
    );
  }
}

Since you have to return something enclosed in a single pair of tags with React, it's usually best to have just have some default enclosing tags (like a div) and then put everything you want rendered inside that. So if you wanted to keep your renderdiv() function that same as it was originally you could instead do it like this:

  renderdiv(){
    div = document.createElement('div');
    div.innerHTML = 'hi there'
      return div
  }
  render() {
    return (
        <div>{this.renderdiv()}</div>
    );
  }

and it'd do the same thing, except you'd have a parent div. It'd probably be better to transfer your code to React format so you don't end up with a hybrid

First example works fine, the second example throws an error which I have not found out how to fix: If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. The DOM nodes I am looking to render come from thousands of line of code. I was hoping to use that code as is and wrap the rest of the page around it. I am thinking it may not be possible — Iannazzi, Feb 05 '17 at 09:55
Yeah just ran it and got the same error. The reason is the way it's done in javascript (i.e. div = document.createElement('div');) doesn't create a React element object. It just creates a plain element, which can't be rendered. I had a quick Google search and I can't seem to find a way to straight up convert from one to the other. You might need to do some editing of the original code to make it React compatible :( — Jayce444, Feb 05 '17 at 10:09

Where would I add existing JS Code to react-boilerplate

1 Answers1