Реагировать на компоненты, игнорируя тег <h1>

Question

Я очень новичок в React и просто экспериментирую, чтобы лучше понять синтаксис. Когда я добавляю компоненты к компоненту приложения, он и просматривает его на веб-странице, он игнорирует code<h1>Hello</h1> в компоненте приложения и отображает только заголовок code<h3>Form</h3> компонентов формы. Я немного запутался и уже некоторое время пытаюсь понять это ...

Компонент приложения ниже.

import React from 'react';

import Form from './Form';

const App = () => {
    return (
        <h1>Hello</h1>,
            <Form />
    );
}

export default App;

Компонент формы

import React from 'react';

const Form = () => {
    return (
        <h3>Form</h3>
    );
}
export default Form;

Answer 1

Я бы предположил, что он вообще ничего не должен отображать (без ошибок / предупреждений), но компоненты реагирования должны возвращать (то есть отображать) только отдельные узлы.

Отображение нескольких элементов

import React from 'react';

import Form from './Form';

const App = () => {
  return (
    <div>
      <h1>Hello</h1>,
      <Form />
    </div>
  );
}

export default App;

Или используйте фрагмент, чтобы не зашумлять DOM

import React, { Fragment } from 'react';

import Form from './Form';

const App = () => {
  return (
    <Fragment>
      <h1>Hello</h1>,
      <Form />
    </Fragment>
  );
}

export default App;