react应用程序就是由一个个组件搭建而成。组件有类组件和函数组件两种。

我们之前使用create-react-app创建了app，src下放的就是我们应用的源代码，我们基于这些已生成的文件，来学习和验证组件。

类组件

这里我们创建PostList.js更改这个app。

javascript">// src/PostList.js
// 必须import和extends react的component
import React from "react";
// 组件标签的名字首字母必须大写，这里必须采用驼峰书写方式
class PostList extends React.Component {// 类组件内部必须有一个render，render方法返回代表该数组件UI的// React元素render() {return {<div>post list<ul><li> post 1 </li><li> post 2 </li><li> post 3 </li></ul></div>  };}
}
// 将PostList作为默认模块导出，从而可以再其他js文件中导入PostList使用
export default PostList;

这个代码段定义了一个博客列表。 index.js是默认程序的入口。我们实现以下变更：

diff --git a/src/index.js b/src/index.js
index d563c0f..8dd4562 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,14 @@import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';
-import App from './App';
+//import App from './App';
+import PostList from './PostList'import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode>
-    <App />
+    <PostList /></React.StrictMode>);

我们刷新localhost:3000，就可以看到更新了。

函数组件

function ComponentName就是函数组件。我们在类组件基础上添加函数组件。

javascript">diff --git a/src/index.js b/src/index.js
index d563c0f..ac9a9d4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,27 @@import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';
-import App from './App';
+//import App from './App';
+import PostList from './PostList'import reportWebVitals from './reportWebVitals';+function PostList1() {
+  return (
+      <div>
+        post list 1
+        <ul>
+          <li> post 4 </li>
+          <li> post 5 </li>
+          <li> post 6 </li>
+        </ul>
+      </div>
+    );
+}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode>
-    <App />
+    <PostList />
+    <PostList1 /></React.StrictMode>);

刷新app，我们看到，此时的界面为：

我们这里举的例子是最简单的类组件和函数组件，后面我们陆续介绍二者丰富的用法。