React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）

已于 2023-01-21 13:57:07 修改
阅读量841 收藏 4
点赞数
分类专栏： # React 文章标签： react.js javascript 前端
于 2022-12-09 16:01:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48617322/article/details/128182456
版权

系列文章目录

第一章：React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
第二章：React基础知识（组件实例三大核心属性state、props、refs）（二）
第三章：React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
第四章：React脚手架应用（创建脚手架、代理配置、ajax相关、组件通信）（四）
第五章：react-router5路由相关一（路由相关概念、基本使用、NavLink与NavLink的封装、Switch的使用、严格匹配、路由重定向、路由组件与一般组件的区别）（五）
第六章：react-router5路由相关二（嵌套路由、路由传参、replace、编程式路由导航、withRouter的使用、BrowserRouter与HashRouter的区别）（六）
第七章：React-Router6路由相关一（路由的基本使用、重定向、NavLink·、路由表、嵌套路由）（七）
第八章：React-Router6路由相关二（路由传参、编程式路由导航、路由相关hooks）（八）
第九章：React相关扩展一（setState、lazyLoad、Hooks相关）（九）
第十章：React相关扩展二（Fragment、Content、组件优化、render props、错误边界）（十）
第十一章：Redux相关知识（什么是redux、redux的工作原理、redux的核心概念、redux的基本使用）(十一)
第十二章：React-Redux相关知识(什么是react-redux、react-redux的原理、react-redux相关API、react-redux的基本使用)（十二）

文章目录

一、React简介

1.英文官网: https://reactjs.org/
2.中文官网: https://react.docschina.org/

1.1 React的特点

  • 声明式设计： React采用声明范式，可以轻松描述应用。
  • 高效： React通过对DOM的模拟，最大限度地减少与DOM的交互。
  • 灵活： React可以与已知的库或框架很好地配合。
  • JSX： JSX 是JavaScript语法的扩展。React 开发不一定使用 JSX，但我们建议使用它。
  • 组件： 通过 React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
  • 单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什 么比传统数据绑定更简单。

1.2 React高效的原因

1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。

二、React基本使用

2.1 引入react相关js库

1.react.js：React核心库。
2.react-dom.js：提供操作DOM的react扩展库。
3.babel.min.js：解析JSX语法代码转为JS代码的库。

可在bootcdn中引入相关库 https://www.bootcdn.cn/

2.2 创建虚拟DOM的两种方法

1.JSX方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入相关版本的react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.1渲染虚拟DOM到页面（v17）
		//ReactDOM.render(VDOM,document.getElementById('test'))
		
		//2.2渲染虚拟DOM到页面（v18）
		const root = ReactDOM.createRoot(document.getElementById('test'));
		root.render(VDOM);
	</script>
</body>
</html>

运行结果：
在这里插入图片描述
2.纯JS方式(一般不用)
使用纯js的方式需要不断的创建节点，非常的不方便

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_使用js创建虚拟DOM</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>

	<script type="text/javascript" > 
		//1.创建虚拟DOM
		const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
		
		//2.1渲染虚拟DOM到页面（v17）
		//ReactDOM.render(VDOM,document.getElementById('test'))
		
		//2.2渲染虚拟DOM到页面（v18）
		const root = ReactDOM.createRoot(document.getElementById('test'));
		root.render(VDOM);
	</script>
</body>
</html>

2.3 虚拟DOM和真实DOM

React提供了一些API来创建一种 “特别” 的一般js对象

  • const VDOM = React.createElement('xx',{id:'xx'},'xx')
  • 上面创建的就是一个简单的虚拟DOM对象

代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3_虚拟DOM与真实DOM</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<div id="demo"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.1渲染虚拟DOM到页面（v17）
		//ReactDOM.render(VDOM,document.getElementById('test'))
		
		//2.2渲染虚拟DOM到页面（v18）
		const root = ReactDOM.createRoot(document.getElementById('test'));
		root.render(VDOM);

		const TDOM = document.getElementById('demo')
		console.log('虚拟DOM',VDOM);
		console.log('真实DOM',TDOM);
		debugger;
		// console.log(typeof VDOM);
		// console.log(VDOM instanceof Object);
		/* 
				
		 */
	</script>
</body>
</html>

运行结果：
在这里插入图片描述

关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

三、JSX基本使用

3.1 jsx使用

1.全称: JavaScript XML ,react定义的一种类似于XML的JS扩展语法: JS + XML,本质是React.createElement(component, props, …children)方法的语法糖
2.作用: 用来简化创建虚拟DOM

1)写法：var ele = <h1>Hello JSX!</h1>
2)注意1：它不是字符串, 也不是HTML/XML标签
3)注意2：它最终产生的就是一个JS对象

3.jsx语法规则

1)定义虚拟DOM时，不要写引号。
2) 标签中混入JS表达式时要用{}。
3) 样式的类名指定不要用class，要用className。
4) 内联样式，要用style={{key:value}}的形式去写。
5) 只有一个根标签
6) 标签必须闭合
7) 标签首字母
(1)若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

4.babel.js的作用

  1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    2)只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

代码片段:

  • jsx使用变量/动态属性/指定类名/内联样式
<head>
  <meta charset="UTF-8">
  <title>jsx语法规则</title>
  <style>
    .title {
      background-color: orange;
      width: 200px;
    }
  </style>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" >
		const myId = 'aTgUiGu'
		const myData = 'HeLlo,rEaCt'

		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h2 className="title" id={myId.toLowerCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<h2 className="title" id={myId.toUpperCase()}>
					<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
				</h2>
				<input type="text"/>
			</div>
		)
		//2.1渲染虚拟DOM到页面（v17）
		//ReactDOM.render(VDOM,document.getElementById('test'))
		
		//2.2渲染虚拟DOM到页面（v18）
		const root = ReactDOM.createRoot(document.getElementById('test'));
		root.render(VDOM);
	</script>
</body>
</html>

运行结果：
在这里插入图片描述

  • jsx条件渲染
<!DOCTYPE html>
<body>
  <!-- 准备好一个“容器” -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    let flag = Math.random() > 0.5;
    console.log(flag);
    let VDOM = flag ? <div>大</div> : <div>小</div>
    //2.1渲染虚拟DOM到页面（v17）
		//ReactDOM.render(VDOM,document.getElementById('test'))
		
		//2.2渲染虚拟DOM到页面（v18）
		const root = ReactDOM.createRoot(document.getElementById('test'));
		root.render(VDOM);
  </script>
</body>

</html>

运行结果：
在这里插入图片描述
在这里插入图片描述

  • jsx列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" >
			//模拟一些数据
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>//使用列表需携带key值
						})
					}
				</ul>
			</div>
		)
		//2.1渲染虚拟DOM到页面（v17）
		//ReactDOM.render(VDOM,document.getElementById('test'))
		
		//2.2渲染虚拟DOM到页面（v18）
		const root = ReactDOM.createRoot(document.getElementById('test'));
		root.render(VDOM);
	</script>
</body>
</html>

运行结果：
不携带key值：
在这里插入图片描述

携带key值：
在这里插入图片描述

  • 注意：

区分【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

四、React模块化与组件化

注意

1.组件名必须首字母大写
2.虚拟DOM元素只能有一个根元素
3.虚拟DOM元素必须有结束标签

4.1 函数式组件

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”(代表属性)对象 与并返回一个 React元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
相对比类组件，函数组件有以下特点：

  • 没有组件实例
  • 没有生命周期
  • 没有 state 和 setState，只能接收 props
  • 函数组件是一个纯函数，执行完即销毁，无法存储state

代码片段

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建函数式组件
		function MyComponent(props){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义),{props.name}</h2>
		}
		//2.1渲染虚拟DOM到页面（v17）
		//ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		
		//2.2渲染虚拟DOM到页面（v18）
		const root = ReactDOM.createRoot(document.getElementById('test'));
		root.render(<MyComponent/>);
	</script>
</body>
</html>

运行结果：
在这里插入图片描述
执行了ReactDOM.render(<MyComponent/>.......）之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

4.2 类式组件

通过类来定义一个组件。
类组件有以下特点：

  • 有组件实例
  • 有生命周期
  • 有 state 和setState({})，使用this.setState({name:‘tom’})可以来修改state中的数据
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建类式组件
		class MyComponent extends React.Component {
			render(){
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.1渲染虚拟DOM到页面（v17）
		//ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		
		//2.2渲染虚拟DOM到页面（v18）
		const root = ReactDOM.createRoot(document.getElementById('test'));
		root.render(<MyComponent/>);
		
	</script>
</body>
</html>

运行结果：
在这里插入图片描述

执行了ReactDOM.render(<MyComponent/>.......)’之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

Nyingchi-X
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【React】模块化案例 - TodoList - 页面拆分 - 静态页面搭建 - 动态页面交互实现 - 总结
YK菌的博客
06-11 1186
之前用Vue写过这个页面，这次用React再写一次，步骤功能都是类似的，就是语法和用法有点区别，可以对比着学习一下
linjunc#react-study#React 入门学习（一）-- 基础知识以及 jsx语法1
07-25
声明式编码，组件化编码React 的一些主要优点？它提高了应用的性能可以方便在客户端和服务器端使用由于使用 JSX，代码的可读性更好使用React，编写 UI
react基础（jsx，组件，react-dom，react-router-dom，red ux，脚手架安装+新旧生命周期+通信...）
lwg112233的博客
10-25 564
概念： react 是目前最流行的框架;其中是采用 mvvm 的思想，让我们把所有的只关注视图层和逻辑层 react 的创始人：Facebook； js 的创始人：布兰登 艾奇； react由：(jsx，组件，react-dom)，和他的全家桶技术（react-router-dom，redux） jsx：用于将jsx转化js语法 react-router-dom：路由 react-dom：虚拟dom redux：管理数...
【React】知识点归纳：React JSX、虚拟DOM、模块与组件和模块化与组件化的理解
Dream_Lee的博客
01-21 451
JSX 1)全称: JavaScript XML 2)react定义的一种类似于XML的JS扩展语法: XML+JS 3)作用: 用来创建react虚拟DOM(元素)对象 var ele = &amp;amp;amp;lt;h1&amp;amp;amp;gt;Hello JSX!&amp;amp;amp;lt;/h1&amp;amp;amp;gt; 注意1: 它不是字符串, 也不是HTML/XML标签 注意2: 它最终产生的就是一个JS对象 4)标签名任意: HTML标签
react 模块化开发
mygoes
08-26 1169
项目结构如下: src/component/mod.js 中: let iNum = 10; let sTr = 'Hello,React!'; let oPerson = {name:'Tom',age:18}; // 1.名称导出，名称导出可以写多个 export { iNum }; export { sTr,oPerson }; // 2.默认导出，只能写一个，导出的时候可以不用名称 export default {name:'Rose',age:19}; src/00index_模块化开发.
react中的组件/模块, 组件化/模块化
weixin_44560342的博客
04-14 645
React中的组件/模块, 组件化/模块化 1、基本概念 1.1、什么组件？ 1、一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等) 2、把这些局部功能组装到一起就形成了完整的一个大的功能 3、主要目的在于: 复用代码, 提高项目运行效率。 1.2、什么组件化？ 如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用。 1.3、什么模块？ 多个组件形成模块, 或者是一个提供特定功能的js文件, 主要特点在于耦合性低, 可移植性高, 执行效率好
模块化react-router配置方法详解
10-16
模块化的`react-router`配置可以使得大型应用的路由管理更加清晰、可维护。本篇文章将详细讲解如何实现模块化的`react-router`配置。 首先，确保安装了`react-router-dom`库，这是`react-router`在浏览器环境中的...
详解如何在React组件“外”使用父组件的Props
11-30
在写SDK项目的时候碰到一个问题：在直播间初始化SDK时使用默认主题，在专题页初始化SDK时使用其它主题。默认主题在打包时挂在全局环境下供多个页面使用，定制主题需要在初始化SDK的时候传入。 实现起来很简单，判断...
react-timeseries-charts:用于React的声明性和模块化时间序列图表组件
04-13
该库包含一组模块化的图表组件，用于构建灵活的交互式图表。 它是从头开始为React设计的，专门用于可视化时间序列数据和网络流量数据。 低级元素使用d3构造，而React可提供更高级别的可组合性。 可以以高度声明性的...
React构建用户界面组件化架构JavaScript库
最新发布
06-11
React的主要特点之一是其组件化架构，允许开发人员将应用程序拆分成独立且可重用的组件。这使得开发人员可以更轻松地管理复杂的界面，并促进了代码的可维护性和可扩展性。 一些React的主要特性包括： 1. **虚拟DOM...
React 相关的JS库
02-15
react.development.js react核心库 react-dom.development.js 用于支持react操作dom babel.min.js 用于将jsx转为js prop-types.js 对组件标签属性进行限制
react开发的核心api包集合
04-24
react开发的核心api包集合
react模块化及类组件
Nikki_u的博客
05-30 363
//<MyComponent/>由babel翻译 自动调用函数MyComponent() //babel翻译时自动开启严格模式 严格模式自动禁止把this指向window 这时this指向的是undefined <script type="text/babel"> function MyComponent(){ console.log(this);//undefined return <h1>我是h1</h1>
React 模块化,组件化介绍
小黄宝宝的专栏
06-09 1070
模块:像外提供特定功能的js程序,一般就是一个js文件 组件:用于实现特定功能效果的代码集合(html/css/js) 模块化和组件化. 模块化:当应用的js都以js模块来编写,这个应用就是一个模块化的应用 组件化:当应用是以多组件的方式来实现功能,这个应用就是一个组件化的应用. 面向对象编程:重点是对象 面向过程编程:重点是过程. ...
React：核心库引入与JSX语法
席木木的博客
10-04 1010
React官网：React是用于构建用户界面的JavaScript库，其含义就是：React框架关注点在于前端用户界面。相比原生JavaScript开发网页页面，频繁操作原生DOM元素的方式（像：查找、获取、增加、删除、更新等），React框架依靠其底层的Diffing 算法，具有更好的性能优势。
三、React中的模块化与组件化
m0_60726620的博客
11-06 304
组件是React应用程序的基本构建块，它代表了UI的一部分。每个组件负责呈现一部分页面内容，并通常具有自己的状态和行为。
react基础 - 模块与组件 - 组件化开发
hibufan的博客
07-06 420
react基本原理和使用
React中组件和模块，模块化和组件化的理解
Haines
04-22 350
模块 理解：向外提供特定功能的js程序，一般一个模块是一个js文件 为什么要拆分：业务逐渐复杂的时候，代码不好维护 好处：易于维护、提高复用性 组件 组件其实要比模块高一个层级，或则说模块其实是组件的子集。 理解：用来实现局部效果功能的代码和资源的集合（html/css/js/img等） 为什么？业务逐渐复杂的时候，代码不好维护 好处：易于维护、提高复用性 模块化 当一个应用的js都是使用模块来编写的，这个应用就是模块化应用。 组件化 当一个应用都是使用组件化来编写的，这个应用就是组件化
【React】归纳篇（三）模块与组件以及模块化与组件化-概念与基本使用
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
09-05 1497
慨念 模块：向外提供特定功能的JS文件，便于复用JS，简化JS，提升JS效率 数据、对数据的操作（函数）、将想暴露的私有的函数向外暴露（暴露的数据类型是对象） 模块化：形容项目编码方式，即按模块编写与组织的项目。 组件：用来实现特定布局功能效果的代码与资源集合，包含html、css、js、图片资源等，例如一个页面中头部区域的资源集合 组件化：形容项目的编码方式，即按组件方式编写实现的项...
react组件化开发
07-27
React组件化开发是一种将用户界面划分为独立可复用的部分的方法。在React中，组件是构建用户界面的基本单位，可以将其视为自包含、独立运作的模块。 在React中创建组件的一种常见方式是使用类组件。一个类组件是一个继承自React.Component的JavaScript类，它有自己的状态(state)和生命周期方法。以下是一个示例： ```jsx import React from 'react'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { // 初始化状态 }; } componentDidMount() { // 组件挂载后执行的操作 } componentDidUpdate(prevProps, prevState) { // 组件更新后执行的操作 } componentWillUnmount() { // 组件卸载前执行的操作 } render() { return ( // 组件的渲染内容 <div> <h1>Hello, World!</h1> </div> ); } } export default MyComponent; ``` 以上示例中，MyComponent是一个React类组件。它定义了构造函数(constructor)，用于初始化组件的状态。还包含了生命周期方法(componentDidMount, componentDidUpdate, componentWillUnmount)，用于在不同的组件生命周期阶段执行特定的操作。最后，render方法用于返回组件的渲染内容。 使用该组件时，可以在其他地方导入并使用它： ```jsx import React from 'react'; import MyComponent from './MyComponent'; function App() { return ( <div> <h1>My App</h1> <MyComponent /> </div> ); } export default App; ``` 在上述示例中，App组件中使用了MyComponent组件。通过组件化开发，我们可以更好地组织和管理代码，并提高代码的可维护性和重用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值