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

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

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试