Where does the output come from?

The output is “Hello, RaymondGuo!”, as there are two renders explicitly in Welcome Component and App Component, so where does the output come from, it is rendered by Welcome Component or App Component? I just want to know the logic under the surface, thanks!

  **Your code so far**

class Welcome extends React.Component {
constructor(props) {
  super(props);

}
render() {
  return (
      <div>
        { /* Change code below this line */ }
        <p>Hello, <strong>{this.props.name}</strong>!</p>
        { /* Change code above this line */ }
      </div>
  );
}
};

class App extends React.Component {
constructor(props) {
  super(props);

}
render() {
  return (
      <div>
          { /* Change code below this line */ }
          <Welcome name = {"RaymondGuo"}/>
          { /* Change code above this line */ }
      </div>
  );
}
};


  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Access Props Using this.props

Link to the challenge:

The component App renders a div that contains the component Welcome. In the component Welcome, it returns a div that contains a p that has your message.

(App)
div
  (Welcome)
  div
    p
      Hello, ...