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

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" />);