Hello {this.props.name}

我帮你格式化了一下。

我虽然没看过阮老师的文章，但是你说的“顶层标签”的问题，是指任何return出的JSX，必须由一个标签来包裹。

你举的例子

return (
   <h1>
     Hello {this.props.name}
   </h1>
   <p>
     some text
   </p>
);

就是相当于暴露了两个标签<h1/>, <p/>，这样写是会报错的，必须由一个标签包裹起来。

return (
    <p>
        <h1>
          Hello {this.props.name}
        </h1>
        <p>
          some text
        </p>
    </p>
);

看到里面的<p>吗，就是所谓的“顶层标签”。

其实就只指代包裹这个部分的标签，即在这个范围里，最上层的标签只能有一个，不能并列多个。因为React会将这部分转为控件，控件对应一个标签会比较容易管理，所以React只允许出现一个顶层标签，这样就可以直接进行控制与标签的绑定了。

这样来看

<h1>
    <p></p>
</h1>

这里的顶层标签只有一个就是h1

<h1></h1>
<p></p>

这里的顶层标签就有两个啦

这应该不是一种专业的术语。