1. JSX 基本概念

概念

注意

演示

总结

2. JSX 基本使用

基本使用

思考问题

总结

补充

3. JSX 的注意事项

使用细节

代码示例

总结

1. JSX 基本概念

知道 JSX 是什么，知道 JSX 的优点

概念

JSX 是 JavaScript XML 的简写，表示了在 JavaScript 中书写 XML 格式的代码。它是 React 的核心内容，它可以让我们在 React 中创建元素更加简单，更加直观，提高开发效率。

注意

JSX 是 JavaScript 的语法扩展，它无法在浏览器中直接使用，在 create-react-app 脚手架中内置了 @babel/plugin-transform-react-jsx 插件来解析它，成为 JavaScript 的标准语法。

演示

我们可以在 babel 的网站，在线测试 babeljs ，这个网站可以把 JSX 代码转换成 JS 代码

总结

什么是JSX？
- JS 扩展语法，可以在 JS 中书写 XML 语法
JSX的优点？
- 可以更加 简洁、直观、高效 的声明 UI 界面

2. JSX 基本使用

掌握 JSX 在 React 中的基本使用

基本使用

导入 react-dom
使用 JSX 创建元素
使用 react-dom 渲染

思考问题

需要导入 react 包吗？

落地代码：

import ReactDom from 'react-dom';const element = (<div id="box"><h1>JSX</h1><ul><li>tom</li><li>jack</li><li>tony</li></ul></div>
);ReactDom.render(element, document.getElementById('root'));

上述代码运行成功，现在 React17x 可以不必导入，因为在 babel 转换的时候自动导入了创建 React 元素的依赖。但是如果你使用 React16x 那么你还需要手动导入 React ，如何验证？安装下低版本的 React 包即可。

总结

导入 react-dom 使用 JSX 创建元素使用 react-dom 渲染元素
17x 版本的 React 不需要导入，如果将来遇见 低版本 是需要导入的。

补充

vscode settings.json 加上在 react 中使用 ement 语法提示创建标签

"emmet.includeLanguages": {"javascript": "javascriptreact"
}

3. JSX 的注意事项

知道 JSX 的使用细节

使用细节

特殊属性写法 className htmlFor
没有内容的节点可以使用 单标签
必需有根节点，可以使用 <></> 幽灵标签，其实是 <React.Fragment></React.Fragment> 简写
如果 JSX 有换行，最好使用 () 包裹

代码示例

特殊属性

// class ---> className    for ---> htmlFor  特殊属性
<div className="box"><label htmlFor="ck"></label><input id="ck" type="checkbox" />
</div>

可单标签

// <span className="icon-edit"></span> 没内容可以写成单标签形势
<span className="icon-edit" />

有根节点

// 1. 使用 React.Fragment 代码片段
import React from 'react';
import ReactDom from 'react-dom';
const element = (<React.Fragment><div>header</div><div>footer</div></React.Fragment>
);
ReactDom.render(element, document.getElementById('root'));

// 2. 使用<></>可以避免没必要的标签产生 简写 React.Fragment
import ReactDom from 'react-dom';
const element = (<><div>header</div><div>footer</div></>
);
ReactDom.render(element, document.getElementById('root'));

用小括号

// 有换行的时候最好使用()可以让标签对其，避免没必要的错误
const element = (<><div>header</div><div>footer</div></>
);

总结

那些特殊属性？
- className htmlFor
什么时候使用单标签？
- 没有内容的标签
必需又根标签，如果不想产生无用标签怎么办？
- 使用 <></> 代码片段标签
建议多行用()包裹

JSX语法学习（一）相关推荐

jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
React jsx语法学习
目录 1. 需要准备的三个文件 2. jsx 和 js 创建虚拟DOM 的区别 3. jsx语法 (1)创建虚拟DOM不要加引号 (2)使用js定义的变量 (3)使用calss类名 (4)使用styl ...
JSX语法学习（三）
目录 1. JSX 样式-style 方式 2. JSX 样式-className 方式 3. JSX 样式-动态 className 4. JSX 样式-classnames 库安装导入 clas ...
React学习（1）——JSX语法与React组件
为什么80%的码农都做不了架构师?>>> 本文记录了在官网学习如何使用JSX+ES6开发React的过程. 全文共分为3篇内容: JSX语法与React组件状态.事件与动态渲 ...
React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...
React 学习笔记：JSX 语法
JSX JSX 是 JavaScript XML 的简写,表示了在 JavaScript 中书写 XML 格式的代码.它可以让我们在 React 中创建元素更加简单,并且保留 HTML 代码的结构更直 ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点是React最重要的一个特性放进内存最小更新的视图,差异部分更新 diff算法 ...
react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...

JSX语法学习（一）

1. JSX 基本概念

概念

注意

演示

总结

2. JSX 基本使用

基本使用

思考问题

总结

补充

3. JSX 的注意事项

使用细节

代码示例

总结

JSX语法学习（一）相关推荐

最新文章

热门文章