CODEWITHSUNDEEP
reactjs
Ben S
Ben S

Reputation: 1457

How much static HTML should I serve with React?

How much static HTML should I serve with React as opposed to just leaving it in the HTML file?

(I am just getting started with React.)

I have a single page application, which, greatly simplified, looks like this:

<body>

  <div id="container">

    <div id="header">
      <div id="header_dynamic_content">
      </div>
    </div>

    <div id="dynamic_content">
    </div>

    <div id="footer">
    </div>

  </div>
</body>

Is it best/common practice to use React to only handle the dynamic content and to leave everything that is static in the HTML file? Or should I use React Components to serve everything?

So this?

class DynamicOne extends React.Component {
  render() {
    return (
      /* My Content */
    );
  }
}

class DynamicTwo extends React.Component {
  render() {
    return (
      /* My Content */
    );
  }
}

ReactDOM.render(<DynamicOne />, document.getElementById('header_dynamic_content'));
ReactDOM.render(<DynamicTwo />, document.getElementById('dynamic_content'));

or this?

class DynamicOne extends React.Component {
  render() {
    return (
      /* My Content */
    );
  }
}

class DynamicTwo extends React.Component {
  render() {
    return (
      /* My Content */
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <div id="header">
          <div id="header_dynamic_content">
            <DynamicOne />
          </div>
        </div>

        <div id="dynamic_content">
          <DynamicTwo />
        </div>

        <div id="footer">
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Upvotes: 3

Views: 374

Answers (1)

SomoKRoceS
SomoKRoceS

Reputation: 3053

According to React Documentation:

Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

Ref

Happy coding :)

Upvotes: 2

Related Questions