react总结之jsx是什么,jsx语法规则

简介: react总结之jsx是什么,jsx语法规则

一、jsx是什么?

jSX 代表 Javascript XML。它是 Javascript 和 Html 的融合。它是一种类似于 HTML 的标记语法,用于描述应用程序的 UI 外观。总体上使代码易于理解和调试,避免了复杂的 javascript DOM     结   构。我们也可以用纯旧的 JavaScript 编写,这使得开发更快更容易。


二、jsx的优点

优点:


1. JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化


2. JSX 是类型安全的,在编译过程中就能发现错误


3. 使用 JSX 编写模板更简单快速


三、jsx语法规则

1.创建虚拟DOM时,不要写引号;


2.标签中要混入js表达式,要是用{}


3.标签中样式的类名要用className指定


4.标签中的内联样式要用style={{color:'white'}},注意属性名转为小驼峰


5.只能有一个根标签


6.标签必须闭合


7.关于标签首字母


8、一定注意区分:【js语句(代码)】与【js表达式】


9、jsx注释:注释使用{/**/}


10、条件运算符:使用{}可以做条件判断,但是不能是太复杂的条件判断,只能写表达式


11、属性表达式,jsx支持动态设置属性值用{}包裹

let img = '图片路径';
<img src={img} alt="" />


12、在jsx语法内的标签一定要闭合如

<img src='' alt = '' />   <br/>


13、img标签要加上 alt属性

相关文章
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
62 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
3月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
42 4
|
16天前
|
XML 前端开发 JavaScript
React JSX
React 使用 JSX(一种类似 XML 的 JavaScript 语法扩展)来替代传统 JavaScript 编写 UI。JSX 使代码更简洁、执行更快且类型安全。例如,`&lt;h1&gt;Hello, world!&lt;/h1&gt;` 实际上是创建一个 React 元素,通过 `ReactDOM.render()` 渲染到 DOM。注意,JSX 中使用 `className` 替代 HTML 的 `class` 属性。
|
27天前
|
XML 前端开发 JavaScript
React JSX
10月更文挑战第7天
13 2
|
3月前
|
前端开发 JavaScript 开发者
React 的 ES6 语法与 ES5 相比有何不同?
【8月更文挑战第30天】
60 1
|
3月前
|
前端开发 JavaScript
React Server Component 使用问题之添加jsx的组件化能力,如何操作
React Server Component 使用问题之添加jsx的组件化能力,如何操作
|
3月前
|
前端开发 JavaScript 开发者
React组件与JSX之间的区别是什么
【8月更文挑战第9天】 React组件与JSX之间的区别是什么
61 4
|
3月前
|
XML 前端开发 JavaScript
【React新手必看】JSX,让你的代码舞动起来!
【8月更文挑战第24天】JSX(JavaScript XML)是React开发的核心,作为一种JavaScript语法扩展,它支持在代码中使用类似HTML的标签。JSX并非模板语言,在编译过程中转换为纯JavaScript,使React能高效更新DOM并渲染页面。其优势在于直观性、简洁性和灵活性:简化复杂用户界面构建、减少代码量,并支持HTML标签、React组件及JavaScript变量的表达式插入。基本用法涉及定义组件UI,如创建包含标题和段落的简单组件。
77 0
|
3月前
|
XML 前端开发 JavaScript
React——JSX语法【三】
React——JSX语法【三】
30 0
|
4月前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
68 0