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是默认程序的入口。我们实现以下变更:
bash
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,我们看到,此时的界面为:
我们这里举的例子是最简单的类组件和函数组件,后面我们陆续介绍二者丰富的用法。