jsx语法规则

最新推荐文章于 2023-10-01 18:44:25 发布
最新推荐文章于 2023-10-01 18:44:25 发布
阅读量102 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoliao96530/article/details/121981097
版权

1.定义虚拟DOM时，不要写引号""

2.标签中混入JS表达式时，要用花括号{}

3.样式的类名指定不要用class，要用className

4.内联样式，要用style={{key:value}}的形式去写

5.虚拟DOM必须只有一个根标签

6.单标签必须有结束<input /> 或者变成双标签<input></input>

7.标签首字母规则：

        （1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错

        （2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

隔壁小廖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React基础之JSX语法
xiangzhihong8的专栏
03-26 1573
概述JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入b
自整理笔记——React基础之JSX语法
筱筱攻程师的博客
03-26 378
JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。 使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入b...
jsx的语法规则
cccbbbmmm的博客
10-01 163
可以使用任何 JavaScript 表达式作为 props 的值，包括字符串、数字、布尔值、函数等。HTML 标签和 React 组件名都必须以大写字母开头，否则会被认为是 HTML 标签。在 JSX 中可以插入 JavaScript 表达式（不是语句），表达式要用花括号。必须要有返回值，如果只是想渲染一个空元素，可以使用。在 JSX 中使用注释需要用。
4、JSX 基本语法规则
大家好，我是+V
09-11 442
JSX 全称是 JavaScript XML。react 定义的一种类似于 xml 的 js 拓展语法：js + xml。本质是 React。createElement(component, props, … children) 的语法糖。作用：- 写法：var ele = 我是𝒆𝒅. - 他不是字符串，也不是 HTML/XML 标签- 他最终产生的就是一个 js 对象标签名任意：html 标签或者是其他标签。
JSX基本语法规则
qq_38721353的博客
01-13 280
jsx语法规则 1、定义虚拟DOM时，不要写引号 2、标签中混入JS表达式时要用{}，注意【js表达式】和【js语句】 a、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方 （1）a (2)a+b ...
03-JSX的语法规则
魏大大
12-06 388
JSX是React为了方便创建虚拟DOM创建的一门新语言，语法类似于HTML，但是稍有区别。JSX全称，一种类似于XML的JS扩展语法（JS+XML）。其本质是方法的语法糖。JSX中可以使用JS原生的表达式，例如在JSX语句中插入JS变量： 上例中使用包裹JS表达式（这里式变量）实现在JSX中插入JS变量。执行后的HTML结果如下： 3. className属性 在JSX中不能直接使用指定标签的属性名，必须使用： 4. 内联样式 如果需要直接在标签上添加样式，需要使用语法： 注意： 此处的双花括号并不是一体
jsx 语法规范
iteval
09-05 117
一、插值语法 – {} const str = 'hello react'; const VDOM = <h1>{str}</h1>; // 注意：是一对大括号 {} 和 Vue( {{}} ) 区分开 二、给标签添加类名 – className= "" | {} /* css: .active { background-color: red; } */ const VDOM = <h1 className="active">hello react&l
jsx的语法
程序员徐小白的博客
02-14 254
1.定义 写在js文件中的html格式的语言 jsx比html严格多了，每个元素必须要有闭合 2.定义虚拟DOM对象 直接使用html标签就可以定义虚拟DOM对象 var div=<div>123456</div> 3.插值表达式{} 插值表达式内可以写数字，字符串，boolean值 当需要在jsx控制的区域内引用js中的对象时，就需要使用{} var aa=111 va...
react技术全家桶（5）jsx语法规则
weixin_41380194的博客
01-16 420
高杠杆
vue jsx 使用指南及vue.js 使用jsx语法的方法
11-27
Vue.js 是一款流行的前端框架，而 JSX 是一种用于在 JavaScript 中书写类似 HTML 的语法，它在 React 生态系统中广泛使用。Vue.js 也支持 JSX，但与 React 的 JSX 有一些差异。以下是一些关于 Vue.js 中使用 JSX 的...
React JSX语法使用案例
04-21
在`.babelrc`中，我们通常会配置`@babel/preset-react`预设，以便Babel能正确处理JSX语法。 `webpack.config.js`是Webpack的配置文件，Webpack是一个模块打包工具，用于处理前端资源。在React应用中，Webpack可以将...
五、jsx语法规则
积累
02-14 262
jsx语法规则
JSX语法规范
weixin_33672400的博客
09-27 177
1、只有一个开始节点和一个尾节点 正确的写法 ReactDOM.render( <div>hello,你好</div>, document.body ) 错误的写法，开始节点和尾节点不唯一 ReactDOM.render( <div>hello,</div> <d...
jsx的语法规则和实现步骤
最新发布
12-22
JSX是一种JavaScript的语法扩展，用于在React中描述用户界面的结构。它允许我们在JavaScript代码中编写类似HTML的标记，并将其转换为React元素。以下是JSX的语法规则和实现步骤： 1. 语法规则： - JSX标记必须被闭合，类似HTML标记。 - JSX标记可以包含属性，属性值可以是字符串、表达式或其他JSX元素。 - JSX标记可以包含子元素，子元素可以是文本、表达式或其他JSX元素。 - JSX标记可以使用JavaScript表达式，用花括号{}包裹。 2. 实现步骤： - 引入React库：在使用JSX之前，需要先引入React库。 - 创建React元素：使用JSX语法编写React元素，可以使用HTML标记和JavaScript表达式。 - 渲染React元素：使用ReactDOM库的render方法将React元素渲染到DOM中。 以下是一个使用JSX的示例： ```jsx import React from 'react'; import ReactDOM from 'react-dom'; // 创建React元素 const element = <h1>Hello, World!</h1>; // 渲染React元素 ReactDOM.render(element, document.getElementById('root')); ``` 在上面的示例中，我们首先引入了React和ReactDOM库。然后，我们使用JSX语法创建了一个React元素，其中包含一个h1标记和文本内容。最后，我们使用ReactDOM的render方法将React元素渲染到具有id为"root"的DOM元素中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值