Difference between using App.js and ReactDOM.render in React.js

Question

There's a component named TestComponent below, I wanted to ask what's the difference between me using React.render to render the test component in the same page and me using the TestComponent in the App.js

Scenario 1

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class TestComponent extends Component {
componentDidMount(){
    console.log("Great");
}

render() {
    return (
        <p>
            {this.props.test}
        </p>
    );
 }}
ReactDOM.render(<TestComponent test="new" />);

Scenario 2

App.js

import React, { Component } from 'react';
import './index.css';
import TestComponent from "./components/TestComponent"

class Apps extends Component {
  render() {

    return (
        <div>

             <TestComponent test={this.props.test}/>

        </div>
    );

}}
ReactDOM.render(<App test="new" />);

the only difference is the wrapping div that you have in Apps. But you can return just TestComponent and the result is the same. — Chris
– Chris, Commented Jun 22, 2018 at 10:21

Siya Mzam · Accepted Answer · 2018-06-22 10:19:28Z

2

There is no difference. The only difference is that in scenario one, you are rendering a component and in scenario two you are rendering a component that itself returns, as something to be rendered, another component. So there really is no difference.

It's like saying

int i = 3;
return i * i;

and alternatively doing

int i = 1;
return (i + 2) * (i + 2);

So it is really a matter of composition. Scenario one renders a component that is not composed of any other and scenario two renders a component that is composed of other components.

answered Jun 22, 2018 at 10:19

Siya Mzam

4,7251 gold badge31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Difference between using App.js and ReactDOM.render in React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related