Почему в React такая схема?

Question

[75db77]

Код из документации React:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

Результат:
Hello, Sara
Hello, Cahal
Hello, Edite

Не могу понять почему в ReactDOM.render - написали<App />, а не<Welcome/>. Ведь имя Sara передают через {props.name} в функцию Welcome, а именно в строку: return <h1>Hello, {props.name}</h1>;, и уже соединившись в фунции Welcome становятся в конечном итоге Hello, Sara
А если написать в ReactDOM.render <App />как в примере, то по логике должно было выводиться на экран просто: Sara. Но почемо-то выводиться на экран Hello, Sara
Обьясните почему в React такая схема?

Answer 1

[Евгений Ромашкан]

Рендерится то что вернётся из функционального компонента App().
App() рендерит div внутри которого 3 раза рендерится то, что вернёт компонент Welcome(), который, в свою очередь, возвращает заголовок с приветствием.
Вот такой порядок. В чем проблема?

Если через ReactDOM отрендерить тег Welcome мы получим один заголовок с приветствием вместо трёх

Comments

[75db77]

Просто как-то запутано получается. Ведь допустим комьютер знает что я передал функции welcome имя sara, cahal, и Edite, потому что я прописал {props.name}. Другими словами я говорю компютеру: Возврати мне заголовок Hello и значение свойства name.
Но как компьютер знает что я хочу взять Hello из функции Welcome и положить в функцию App? Ведь в функции App я этого не написал.

[Евгений Ромашкан]

75db77,

Но как компьютер знает что я хочу взять Hello из функции Welcome и положить в функцию App?

Тег Welcome это и есть рендеринг функционального компонента, который содержит приветствие. То есть App
целиком включает в себя то что отрендерит Welcome()
<Welcome name="Sara" />
Вместо этого кода будет результат компонента Welcome()

Answer 2

[Владимир]

Два функциональных компонента первый - App выводит пачку вторых компонентов Welcome
Открой песочницу и сам попробуй написать https://codesandbox.io/s/

Answer 3

[hzzzzl]

забудь что это "реакт", это просто "яваскрипт" (JSX)
https://ru.reactjs.org/docs/introducing-jsx.html

функция Welcome вызывается три раза и рисует на страницу то, что в нее задают
функция App вызывается один раз, и вызывает Welcome три раза с разным параметром name