React 基础 -- JSX 语法

最新推荐文章于 2022-09-26 18:30:43 发布

置顶 ZQzhousiqin

最新推荐文章于 2022-09-26 18:30:43 发布

阅读量200

点赞数 3

分类专栏： react入门文章标签： reactjs javascript html5 html 前端

本文链接：https://blog.csdn.net/ZQzhousiqin/article/details/104485518

版权

react入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JSX的介绍

JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以粗暴的理解为在 JS 中编写与 XML 类似的语言，一种定义带属性树结构（DOM结构）的语法，它的目的是通过编译器将这些标记编译为标准的JS语言。

JSX原理

React.createElement(tag,{attrs},content)
JSX语法
JSX就是一个语法糖，可以更加方便的书写代码。
JSX是JavaScript扩展的意思，JSX全名是JavaScript XML
jsx原理是 React.createElement(tag,{attrs},content)

JSX注意点

1.jsx语法必须闭合
2.对象不能直接渲染，数组是以字符串的形式进行渲染
3.绑定事件事，事件名首字母需要大写
4.jsx 语法，标签必须闭合
5.jsx 语法，当遇到小写字母开头标签时，会作为普通标签。当遇到大写字母开头的标签会认为是组件。当遇到首字母大写的标签会认为是组件。当遇到 { } 时，内部会作为逻辑去处理。
6.jsx语法标签内写 js 语句必须用差值表达式包裹起来，即 { }
7.差值表达式可以书写函数和表达式，不能书写 for 循环

JSX的规则

value ：表单元素的 value 属性改为 defaultValue
checked ：表单元素 checked 属性改为 defaultChecked
onXxxx ：事件名首字母大写
for ：label 标签中的 for 属性噶为 htmlFor
style ：写对象的形式 style={ {color:‘red’ } }
class ：标签中 class 属性改为className

JSX注释使用

在jsx中加注释需要写在表达式当中，且最好在表达式中使用多行注释的语法/* /，单行注释可能会引发一些问题, 尽量避免使用。如：
{ / 这是JSX的注释 */ }

JSX简单使用

<head>
<!-- 提供 React 对象  vue.min.js -->
<script src="lib/react.development.js"></script>
<!-- 提供了reactDOM 对象 将虚拟 dom 渲染成真实 dom-->
<script src="lib/react-dom.development.js"></script>
<!-- 帮助浏览器解析 jsx 语法，让浏览器支持JSX.转为JS,只可以解析type为text/babel -->
<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
    ReactDOM.render(<div>我是JSX</div>, document.querySelector("#root"));
</script>
</body>

ZQzhousiqin

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React 基础 -- JSX 语法

JSX的介绍JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以粗暴的理解为在 JS 中编写与 XML 类似的语言，一种定义带属性树结构（DOM结构）的语法，它的目的是通过编译器将这些标记编译为标准的JS语言。JSX原理React.createElement(tag,{attrs},content)JSX语法JSX就是一个语法...
复制链接

扫一扫