react组件入门

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,我们看到,此时的界面为:

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

相关推荐
ai产品老杨2 分钟前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
GDAL3 分钟前
Quat.js四元数完全指南
javascript·quaternion
alphageek87 分钟前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
小桥风满袖38 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心39 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~42 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒1 小时前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件