上一篇

下一步

创建第一个组件

已完成

React 开发基于组件完成。 这些自包含单元旨在实现重用和模块化。 React 项目通常包含多个组件。

组件可以是函数，也可以是类。 多数 React 开发人员都倾向于使用函数创建组件，因此我们将重点介绍这种类型。

应用程序一般具有一个核心组件，我们通常称之为 App。 App 充当应用程序的根。 首先，我们将创建 App 组件。

创建组件

1. 打开 Visual Studio Code。

2. 在 src 中创建一个新文件。 将其命名为 App.jsx。

3. 添加以下代码：

   import React from 'react';
   
   function App() {
       return (
           <article>
               <h1>Recipe Manager</h1>
           </article>
       )
   }
   
   export default App;
   

浏览代码

通过导入 React 启动 App.jsx 文件，这样就可以使用 JSX 语法。 然后创建一个名为 App 的函数，方法如同采用 JavaScript 创建任何其他函数。 最后，使用标准 JavaScript 语法导出该函数。 组件的核心包含在 return 语句之中。

请注意，我们使用的是嵌入 JavaScript 的 HTML（严格来说是 XML）。 此功能显示了 JSX 的作用。 我们可以使用 JavaScript 的逻辑和功能创建自包含工作单元（组件）。

函数（或组件）返回的 HTML 显示在页面上。 标题包含文本“Recipe Manager”。

备注

h1 元素嵌套在 HTML 5 article 元素内。 由于 JSX 使用 XML，因此我们必须有一个根元素。 article 元素是此组件的根。 借助此结构，我们能够随着应用程序扩展添加 HTML 和其他 React 组件。

将应用程序更新为使用核心组件

让我们将应用程序更新为使用新的组件。

1. 打开 index.jsx。

2. 在内容为 import ReactDOM from 'react-dom'; 的行（应是第 3 行）之后，添加以下代码：

   import App from './App';
   

3. 找到内容为 <h1>Hello, world!</h1> 的代码。 将此初始消息替换为对 App 组件的调用：

   <App />
   

浏览代码

现在，index.jsx 的完整内容如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

import 语句用于导入组件，其使用的语法与我们用于任何其他模块的语法相同。 现在，可以像使用 HTML 一样使用该组件。

备注

由于 JSX 使用 XML 语法，所以我们必须结束 App 标记。 我们可以使用长格式语法 <App></App> 或“自结束”的速记 <App />，来实现此目的。 两个选项的作用相同，但多数开发人员使用速记选项。

查看结果

保存所有文件。 浏览器自动刷新并返回结果！

继续