本节先介绍如何通过JavaScript函数形式实现一个React函数组件。下面看一个具体的代码实例：

【代码3-3】（详见源代码目录ch03-react-comp-func.html文件）

关于【代码3-3】的说明：

• 第18~20行代码定义了一个JavaScript函数（HelloReactComp()），该函数就是我们要实现的React函数组件，具体说明如下：
  • ►　第19行代码通过return语句返回了一行JSX代码，该行代码通过<p>标签元素定义了一行段落文本。
• 关键看第22行代码，通过const关键字定义了一个常量（eleHello），然后将JavaScript函数（HelloReactComp()）的名称（HelloReactComp）使用尖括号“<>”包括进去，赋值给常量（eleHello），相当于将函数名称（HelloReactComp）作为标签名来使用。通过以上步骤的定义，JavaScript函数（HelloReactComp()）就成为了一个React函数组件（<HelloReactComp>）。
• 第27行代码通过常量（eleHello）放入JSX代码（{eleHello}）来实现React函数组件的应用。

测试网页的效果如图3.1所示。

如图3.1中箭头所示，页面中显示了通过React函数组件渲染的效果，从效果来看与JSX代码一致。

尽管React组件与JSX代码实现的功能基本一致，但从设计角度上讲还是推荐使用React组件方式。原因是：将React组件与Props结合使用可以实现更灵活的功能，关于Props的内容会在本章后续内容中详细介绍。 zg+mRljMpkrPV9HarvafTxa8nFx3AUYqSVrFfvVVpw76oxYFb9qt2agZlkYZ9Hor