React的jsx的用法

这篇具有很好参考价值的文章主要介绍了React的jsx的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

React是一个流行的JavaScript库,用于构建用户界面。它使用一种名为JSX的语法扩展来描述组件的结构和样式。JSX是React的核心语言之一,它允许开发人员在JavaScript中编写HTML,从而使代码更加简洁和易于阅读。

JSX是一种语法扩展,它允许开发人员在JavaScript中编写类似于HTML的代码。它使用类似XML的标记来描述组件的结构和样式。例如,下面是一个简单的JSX组件:

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
};

在这个例子中,我们定义了一个名为MyComponent的函数组件,它返回一个包含HTML标记的JSX元素。这个元素包含一个<div>标记,其中包含一个<h1>标记和一个<p>标记。这些标记被称为“元素”,它们可以包含属性和子元素。

JSX的语法非常类似于HTML,但有一些重要的区别。首先,JSX元素必须使用尖括号< >来包围。其次,JSX属性必须使用双引号"来包围。最后,JSX元素必须以分号;结尾。

除了HTML标记外,JSX还支持JavaScript表达式。这意味着我们可以在JSX中使用变量、函数和算术运算符等JavaScript语法。例如,下面是一个使用JavaScript表达式的JSX组件:

const MyComponent = () => {
  const name = "John";
  const age = 30;
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

在这个例子中,我们定义了两个变量nameage,然后在JSX中使用它们来显示用户的姓名和年龄。我们使用花括号{ }来将JavaScript表达式嵌入到JSX中。

JSX还支持JavaScript的条件语句和循环语句。例如,下面是一个使用条件语句的JSX组件:

const MyComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome back!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
};

在这个例子中,我们定义了一个名为isLoggedIn的属性,它表示用户是否已登录。然后,我们使用条件运算符? :来根据用户是否已登录显示不同的消息。

JSX还支持JavaScript的循环语句。例如,下面是一个使用循环语句的JSX组件:

const MyComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

在这个例子中,我们定义了一个名为items的属性,它是一个包含多个对象的数组。然后,我们使用Array.map()方法来遍历数组,并为每个对象创建一个<li>元素。我们还使用key属性来指定每个元素的唯一标识符,以提高性能。

jsx的{}能够放什么—表达式—值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用react的环境-->
    <script src="./js/babel.min.js"></script>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>

    <!--
        babel的作用就是把 react的语法转为 js语言
        react-dom的作用就是把 虚拟dom转为dom
        react.development 开发环境下的react源码
    -->
</head>
<body>
<!--真是的dom-->
<div id="app"></div>

<script type="text/babel">
    let classNameVal = "content"
    let text="刘明飞快的在回你眼前的这个未婚妻是什么情况"
    function add(){
        return "真的让人无法自拔啊!!!"
    }
    let list=["心海","甘雨","艳菲","八重"]
    let VDOM = (
        <div className={classNameVal}>
            <p style={{color:"red",fontSize:"29px"}}>你好{classNameVal}</p>
            <img src="./1.jpg" alt="" width="239" height="159"/>
            {
                //这里是注释
                /*
                多行注释
                多行注释
                * */
            }
            <p>{text}</p>
            <p>{text+"看着他布灵布灵的大眼睛"}</p>
            <p>{add()}</p>
            <div>
                我的老婆们:
                {
                    list.map(ele=>{
                        return <h2>{ele}</h2>
                    })
                }


            </div>
        </div>
    )

    ReactDOM.render(VDOM, document.querySelector("#app"))
    /*
         在 {} 里能写什么   ---表达式---也就是值
         js代码 和 js表达式

         a. 表达式: 一个表达式会产生一个值,可以在任意需要值的地方 使用
             a
             a+520
             fn()
             list.map

         b. 流程控制语句
             if
             for
             switch

      */
</script>


</body>
</html>

总之,JSX是一种非常强大和灵活的语法扩展,它使React开发人员能够更轻松地编写和组织代码。通过使用JSX,我们可以将HTML、JavaScript和CSS等不同类型的代码组合在一起,从而创建出美观、灵活和易于维护的用户界面。文章来源地址https://www.toymoban.com/news/detail-694826.html

到了这里,关于React的jsx的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【React】‘React‘ must be in scope when using JSX react/react-in-jsx-scope

    React 报错: 意思是在使用 JSX 时,没有引入 React ,比如像这样: 在使用 import 引入时,没有引入 React 。所以在被 Eslint 的 \\\"plugin:react/recommended\\\" 检查时,就会报错。 于是很多人就选择引入的时候加上 React ,这样 这样确实不报错了,但是他们忽略了一个版本事实: 在 React@17

    2024年02月15日
    浏览(41)
  • 【react从入门到精通】React JSX详解

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:react从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用

    2024年02月05日
    浏览(49)
  • React源码解析18(1)------ React.createElement 和 jsx

    我们知道在React17版本之前,我们在项目中是一定需要引入react的。 import React from “react” 即便我们有时候没有使用到React,也需要引入。原因是什么呢? 在React项目中,如果我们使用了模板语法JSX,我们知道它要先经过babel的转译。那babel会将JSX转换成什么样子的格式呢? 可

    2024年02月13日
    浏览(35)
  • React笔记(二)JSX

    一、JSX JSX是javascript XML的简写,实际上是javascript的扩展,既有javascript的语法结构,又有XML的结构 1、JSX的规则要求 jsx必须要有一个根节点 如果不想产生无用的根标签,但是还要遵守JSX的语法的要求,可以使用如下两种方式 JSX必须要有一个根节点,而且编译之后在浏览器中不

    2024年02月11日
    浏览(41)
  • 【React基础】– JSX语法

    ◼ 这段element变量的声明右侧赋值的标签语法是什么呢? ​  它不是一段字符串(因为没有使用引号包裹); ​  它看起来是一段HTML元素,但是我们能在js中直接给一个变量赋值html吗? ​  其实是不可以的,如果我们将 type=“text/babel” 去除掉,那么就会出现语法错误

    2024年01月21日
    浏览(71)
  • React02-JSX 语法

    React.createElement 是 jsx 语法的编译结果,这个函数用来创建一个 React 元素,它的返回值是一个 Virtual DOM(虚拟DOM)。 React.createElement(type, props, ...children) 第一个参数为元素类型,可以是标签名或组件名,第二个参数为元素属性,第三个参数为子节点列表。 以上2种写法是等价的

    2024年02月12日
    浏览(35)
  • 前端框架学习-React(一)

    React 应用程序是由 组件 组成的。 react 程序是用的jsx语法,使用这种语法的代码需要由babel进行解析,解析成js代码。 jsx语法: 只能返回一个根元素 所有的标签都必须闭合(自闭和或使用一对标签的方式闭合) 使用驼峰式命名法给大部分属性命名如:className 大写字母开头的

    2024年02月12日
    浏览(40)
  • react之组件与JSX

    概述:React是一个用于构建用户界面(UI)的JavaScript库,用户界面由按钮,文本和图像等小单元内容构建而成。React帮助你把它们组合成可重用,可嵌套的组件。从web端网站到移动端应用,屏幕上的所有内容都可以被分解成组件。 定义组件 一直以来,创建网页时,Web 开发人员

    2024年04月25日
    浏览(34)
  • React的基础概念JSX

    首先我们需要创建虚拟DOM,然后渲染虚拟DOM到页面上展示 其次在写react的内容的时候,我们在script里面,需要填写类型为babel,而不是JavaScript。因此我们需要在上方引入babel文件夹 另外还需要引入react核心库和react-dom文件,react-dom是用于支持react操作DOM的 类型为babel是为了告诉

    2024年02月11日
    浏览(38)
  • react06-jsx渲染机制

    构建视图的具体流程 : 将jsx语法,编译为虚拟dom对象 ,根据react中的处理生成virtualDom ,这是react自己内部构建的一套对象体系,基于jsx中的属性描述构建成视图中真实DOM的相关描述,具体通过 React.createElement(type , props , children) 将虚拟dom构建成真实dom 补充: 第一次渲染是直接

    2024年04月28日
    浏览(25)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包