React基础与JSX语法【课件】

20XX/XX/XXReact基础与JSX语法汇报人:XXXCONTENTS目录01

React入门基础认知02

JSX核心语法规则03

JSX基础用法讲解04

JSX入门实操案例05

学习总结与拓展React入门基础认知01React的官方定义它是Meta开发的用于构建用户界面的JavaScript库，专注于高效渲染交互式UI组件。React的核心定位作为前端框架生态的重要成员，主打声明式编程，降低复杂UI的开发维护成本。React的应用场景广泛用于搭建单页应用，像Facebook、Instagram的前端界面均基于React开发。React是什么为什么学习React

企业项目广泛应用阿里、字节等大厂的前端项目多采用React开发，掌握它能获得更多优质就业机会。

跨平台开发能力突出借助ReactNative可快速搭建iOS、安卓应用，如Facebook、Instagram的移动端应用均基于此。

生态系统丰富完善有ReactRouter、Redux等大量成熟工具库，能大幅提升前端开发效率与项目稳定性。JSX核心语法规则02元素命名规则

首字母大写区分自定义元素自定义组件需以大写字母开头，如自定义<UserInfo>组件，避免与原生HTML元素混淆。

原生元素保持小写命名JSX中原生HTML元素需用小写字母，如<div>、<p>，符合HTML原生命名规范。

使用驼峰式命名元素属性JSX元素属性采用驼峰式，如onClick、className，替代HTML中的短横线命名。使用大括号嵌入变量在JSX中可通过大括号嵌入变量，比如将存储用户名的userName变量嵌入页面展示欢迎语。嵌入算术与逻辑表达式支持嵌入算术、逻辑表达式，像在购物车组件中嵌入{count*price}计算商品总价。嵌入函数调用结果可直接嵌入函数调用结果，例如嵌入formatTime(newDate())展示格式化后的当前时间。表达式嵌入语法样式与class书写行内样式对象写法需以对象形式定义样式，如style={{color:'red',fontSize:'16px'}}，属性采用驼峰命名法。class类名绑定写法使用className替代class关键字，可直接写类名，如<divclassName="container"></div>，符合DOM规范。动态class绑定可借助模板字符串或数组，实现类名动态切换，如className={`box${isActive?'active':''}`}。条件渲染语法三元运算符实现条件渲染在React中，可通过{isShow?<p>显示内容</p>:null}格式，根据状态值控制元素展示。逻辑与运算符实现条件渲染利用{isLogin&&<span>欢迎回来</span>}，当状态为真时才渲染后续JSX元素，简洁高效。if-else语句封装条件渲染将复杂判断逻辑封装进函数，如renderContent(){if(isOk)return<div>内容</div>}，在JSX中调用。JSX基础用法讲解03创建单一标签JSX元素如`<inputtype="text"/>`这类自闭合标签，需严格遵循XML语法，结尾添加斜杠确保语法合规。创建嵌套结构JSX元素可构建类似`<div><h1>React</h1><p>JSX示例</p></div>`的层级结构，清晰呈现页面布局。创建带属性的JSX元素像`<imgsrc="logo.png"alt="React图标"/>`，通过属性为元素赋予样式、资源路径等信息。创建JSX元素渲染JSX到页面01使用ReactDOM.render()方法通过ReactDOM.render()可将JSX元素挂载到指定DOM节点，如把<h1>HelloReact</h1>渲染到root容器中。02利用React18的createRoot()方法React18引入createRoot()替代旧方法，需先获取DOM节点再创建根节点进行渲染。03条件渲染JSX元素可通过三元运算符判断，如用户登录时渲染<Welcome/>组件，未登录则渲染<Login/>组件。列表渲染方法

使用map()函数遍历数组在React中，可通过map()遍历数组生成JSX元素列表，如遍历商品数组渲染商品列表项。

设置唯一key属性列表渲染需为每个元素设置key值，通常用数组项id，避免React渲染时出现性能问题。

处理空列表场景当数组为空时，可渲染提示文案，如购物车为空时显示“暂无商品，请添加”。事件绑定方式

箭头函数绑定法在JSX中通过箭头函数直接绑定事件，如<buttononClick={()=>handleClick()}>点击</button>，简洁直观。

类方法绑定法类组件中可在构造函数内绑定this，如this.handleClick=this.handleClick.bind(this)，避免this指向问题。

属性初始值绑定法利用类属性初始值语法，直接将方法赋值为箭头函数，如handleClick=()=>{}，无需额外绑定。Props基础使用Props的基本定义与传递Props是组件间传递数据的核心方式，父组件可通过属性形式向子组件传递字符串、数字等各类数据。Props的只读特性说明React规定Props是只读的，子组件不可直接修改接收的Props，需通过父组件更新数据来实现变化。Props的默认值设置可通过defaultProps为组件Props设置默认值，比如给列表组件的空列表提示内容预设默认文本。JSX入门实操案例04渲染基础待办项使用JSX将预设的待办事项数组，以<li>标签循环渲染成列表，直观展示基础渲染逻辑。添加新待办功能实现通过绑定输入框与按钮事件，用JSX动态将用户输入内容添加至待办列表，交互感十足。标记完成状态样式切换为待办项添加点击事件，用JSX条件渲染实现完成项划灰、未完成项高亮的样式切换。待办事项列表简易商品展示卡

JSX结构搭建商品基础框架用<div>嵌套<h3><p>等标签搭建卡片结构，写入商品名称、价格等基础信息，构建展示雏形。

添加内联样式美化展示卡为卡片添加backgroundColor、padding等内联样式，参考淘宝商品卡调整样式参数提升美观度。

嵌入图片标签展示商品图引入<img>标签并设置src和alt属性，插入商品主图路径，实现图文结合的商品展示效果。点击切换组件

构建基础切换按钮在JSX中创建<button>元素，绑定onClick事件，设置初始状态控制组件显示隐藏。

设计切换显示的组件编写两个不同功能的子组件，比如用户信息组件和设置组件，通过状态判断渲染。

实现条件渲染逻辑借助三元运算符，根据点击触发的状态变化，切换展示两个子组件，参考React官方示例写法。学习总结与拓展05核心知识点回顾

React组件的两种定义方式分为函数组件与类组件，前者简洁易用，后者可借助生命周期处理复杂逻辑。

JSX的语法规则与特性允许在HTML中嵌入JavaScript表达式，需用大括号包裹，如渲染动态数据。

虚拟DOM的作用与原理通过对比虚拟DOM差异更新真实DOM，React以此提升页面渲染效率。入门练习建议模仿实现简单UI