React JSX基本语法

最新推荐文章于 2024-10-08 13:39:29 发布
最新推荐文章于 2024-10-08 13:39:29 发布
阅读量50 收藏
点赞数
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HAI_WD/article/details/132723339
版权

0x00 前言

文中工具皆可关注 皓月当空w 公众号 发送关键字 工具 获取

0x01 JSX

jsx 全程是 Javascrip XML，react 是一种XML的js扩展语法，本质上是一种语法糖。主要的作用是用来简化创建虚拟DOM

1.基本写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = (
            <h1 id="title">Hello,react</h1>
        )
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

0x02 语法规则

1.定义虚拟dom得到时候，不需要写引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = (
            <h2 id="cs">
                <span>hello world!</span>
            </h2>
        )

        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

2.标签中使用js变量的时候，需要使用花括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const myId="ceshi"
        const myData="Hello"

        const VDOM = (
            <h2 id={myId}>
                <span>{myData}</span>
            </h2>
        )

        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

3.样式的类名执行用className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const myId="ceshi"
        const myData="Hello"

        const VDOM = (
            <h2 className="title" id={myId}>
                <span>{myData}</span>
            </h2>
        )

        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

4. 内联样式需要使用{{}}的形式，传入键值对来进行生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const myId="ceshi"
        const myData="Hello"

        const VDOM = (
            <h2 className="title" id={myId}>
                <span style={{color:'white',fontSize:'29px'}}>{myData}</span>
            </h2>
        )

        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

5. 标签只能有一个根标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const myId="ceshi"
        const myData="Hello"

        const VDOM = (
            <div>
                <h2 className="title" id={myId}>
                    <span style={{color:'white',fontSize:'29px'}}>{myData}</span>
                </h2>
            </div>
           
        )

        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

6. 标签必须闭合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const myId="ceshi"
        const myData="Hello"

        const VDOM = (
            <div>
                <h2 className="title" id={myId}>
                    <span style={{color:'white',fontSize:'29px'}}>{myData}</span>
                </h2>
                <input type="text"/>
            </div>
           
        )

        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

0x03 other

欢迎大家关注我朋友的公众号 皓月当空w 分享漏洞情报以及各种学习资源，技能树，面试题等。

以上

Wcbddd
关注
专栏目录
vim-jsx-improve：React jsx的语法和缩进插件
02-06
修复了React jsx文件的语法突出显示和缩进的问题。 与xml.vim配合良好 该插件没有依赖性，包含了jsx和javascript所需的所有代码。 注意：如果已经安装，您需要禁用vim-javascript插件，我必须更改一些高亮显示组以...
React JSX语法使用案例
04-21
在`.babelrc`中，我们通常会配置`@babel/preset-react`预设，以便Babel能正确处理JSX语法。 `webpack.config.js`是Webpack的配置文件，Webpack是一个模块打包工具，用于处理前端资源。在React应用中，Webpack可以将...
react-jsx基础语法
github_54195343的博客
01-20 575
1，jsx表达式: 在结构中使用{}，react可自动将{}中的代码解析为js代码。注意区别vue中的{{}}。 标签的动态属性，也可以用{}实现 <div title={form.name}></div>，注意区别vue中的v-bind 结构中的注释要写在{}中，{/*这里是注释。。。*/} （ctrl+/） 注意：{}中可以加js表达式，不能用语句 2,结构中嵌入js逻辑： react循环生成标签，每个标签页需要唯一值key，最好用id ...
React基础语法 — JSX语法
weixin_47342392的博客
10-07 88
一名技术栈是vue的开发者，在工作之余学习react的一些知识积累，以下文章是我在react学习过程中总结react一些基础只是---JSX语法。
React JSX常用语法总结
前端开发工程师
10-27 566
JSX（javascript xml） > 就是JavaScript和XML结合的一种格式，是JavaScript的语法扩展，只要把HTML代码写在JS中，就为JSX。用于动态构建用户界面的Javascript库，发送请求获取数据，处理数据，过滤，整理格式，操作DOM呈现页面，React是一个将数据渲染为HTML视图的开源JavaScript库。
React | React的JSX语法
CoderHing的博客~
04-18 783
btnClick函数并不是我们主动调用的,而是当button发生改变时,React内部调用了btnClick函数而它内部调用时,并不知道如何绑定正确的this。
react JSX基本语法
qq_46149597的博客
02-22 70
【代码】react JSX基本语法。
React快速上手（一）：万字整理jsx基础语法
m0_60353051的博客
06-29 684
state即状态，用来存储组件数据的，复杂组件（类式组件）才有state，简单组件（函数式组件）没有state。render(){// this指向实例对象，state就是实例对象生成的，通过this.state即可获取到！（1）state是组件最重要的属性，值是对象（key-value形式）；（2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（响应式）；（3）注意事项：A. 组件中render的this为组件实例对象；
React jsx 语法解析 & 转换原理
程序员李林
01-09 945
jsx是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法，用于描述UI界面，并且可以和JavaScript代码结合使用。v-ifv-forv-bind等，而是直接使用JavaScript语法就可以实现这些标签的功能。为何React中编写UI界面需要使用jsx语法呢？使用js选中元素，然后修改元素；元素上绑定有事件时，需要绑定对应的事件函数；js中某些数据发生变化时，需要修改html元素。
【React基础】– JSX语法
m0_68324632的博客
01-18 1508
​JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法
React —— React 中的JSX语法
Bonsoir777的博客
10-26 2013
本文主要介绍react中的基础知识
【react全家桶学习】react中JSX语法规则
蜗牛~~
04-24 853
JSX的定义 全称: JavaScript XML react 定义的一种类似于 XML的JS 扩展语法:JS +XML 本质是 React.createElement(component,props,...children)方法的语法糖，作用:用来简化创建虚拟 DOM
React JSX
12-14
React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。...
vim-jsx-typescript：针对vim和Typescript的React JSX语法突出显示
02-02
**vim-jsx-typescript** 是一个专门为 **Vim** 编辑器设计的插件，旨在为使用 **TypeScript** 开发 **React JSX** 代码的开发者提供强大的语法高亮和增强功能。这个插件结合了 **vim-jsx** 和 **typescript-vim** 的...
【Spring Boot & React】Spring Boot和React教程 完整版
ccf19881030的专栏
10-05 619
在B站找到一个不错的SpringBoot和React的学习视频，作者是。值得仔细学习一下，特此记录。
React18新特性
警警的博客
10-06 811
同时，需要注意的是，React 18的并发特性和新Hooks是基于Fiber架构实现的，它们共同构成了React 18中强大的渲染和控制能力。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。
【React】入门Day04 —— 项目搭建及登录与表单校验、token 管理、路由鉴权实现
2303_76696898的博客
10-04 1257
本文详细介绍了一个 React 项目的搭建过程以及登录模块、Layout 模块等功能模块的实现方式，包括项目结构调整、使用的技术（如 scss 预处理器、antd 组件库、react-router-dom 等）以及各个模块中涉及的关键知识点（如表单校验、token 管理、路由鉴权等），并为每个知识点提供了示例代码。
React 为什么引入 Hooks ？
最新发布
u010194271的博客
10-08 307
React 中的“Hook”之所以得名，是因为它能让你“钩住”函数组件中的状态管理、生命周期和其他特性，类似于编程中常见的“钩子”概念。通过 Hooks，你可以在 React 中更灵活地插入逻辑、管理状态，提供了一种简洁、模块化的方式来构建复杂应用。
React基础知识
itmacy的博客
10-08 409
概念：JSX是JavaScript和XML(HTML)的缩写，表示在js代码中编写HTML模板结构，它是React中编写UI模板的方式。优势：1.HTML的声明式模板写法2.JS的可编程能力。
React框架入门：解析JSX语法与ReactElement
"这篇教程介绍了JavaScript的React框架中JSX语法的基础知识，包括JSX的用途、转换机制以及React.createElement方法的使用。" 在React开发中，JSX（JavaScript XML）是一种特殊的语法，使得我们可以像编写HTML一样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值