0102DOM-JSX语法-基础-React

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

文章目录

1 Hello React

就如最初我们学习某个js一样，创建html，引入reactjs相关库，写Hello React。

  • reactjs相关库
    • react.development.js：react核心库
    • react-dom.development.js：react操作DOM扩展库
    • babel.min.js：jsx转js库，浏览器不识别jsx，需要babel转换成js。

步骤：

  • 创建html
  • 准备好容器
  • 引入react相关库
    • react.development.js，react-dom.development.js，babel.min.js顺序引入。
  • script内编写jsx
    • script type=“text/babel”

示例代码1-1如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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">
    // 1.创建虚拟DOM
    const VDOM = <h1>hello react</h1>
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>

2 虚拟DOM创建方式

我们要在页面展示的结构如下：

<h1>
	<span>hello,reac</span>
</h1>

2.1 js方式创建

代码2.1-1如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js创建虚拟DOM</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">
    // 1.创建虚拟DOM
    const VDOM = React.createElement('h1',{id: 'title'}, React.createElement('span',{}, 'hello, react'))
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>

  • 不需要babel.min.js

  • API格式

    React.createElement('标签名',标签属性,'内容')
    • 标签名：比如h1,div,table
    • 标签属性：对象，比如{key: value}
    • 内容：如果标签有嵌套，那么内容就需要嵌套创建

2.2 jsx方式创建

代码示例2.2-1如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsx创建虚拟DOM</title>
</head>
<body>
  <div id="test"></div>
  <div id="demo"></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">
    // 1.创建虚拟DOM
    const VDOM = (
      <h1>
        <span>hello,react</span>
      </h1>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>

分析：jsx极大简化了创建虚拟DOM

2.3 虚拟DOM与真实DOM区别

示例代码2.3：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hell react</title>
</head>
<body>
  <div id="test"></div>
  <div id="demo">111</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">
    // 1.创建虚拟DOM
    const VDOM = (
      <h1>
        <span>hello react</span>
      </h1>  
      )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
    // 虚拟DOM和真实DOM比较
    console.log("虚拟DOM", VDOM)
    const rDOM = document.getElementById('demo')
    console.log("真实DOM", rDOM)
    debugger
  </script>
</body>
</html>

debugger 测试虚拟DOM，如下图2.3-1所示：在这里插入图片描述

debugger测试真实DOM，如下图2.3-2所示：在这里插入图片描述

关于虚拟DOM：

  • 本质是Object类的对象（一般对象）
  • 虚拟DOM比较“轻”，真实DOM比较重；虚拟DOM是React内部在用，无需真实DOM上那么多属性。
  • 虚拟DOM最终会被React转换为真实DOM，呈现在页面上。

3 JSX语法规则

  • 全称：JavaScript XML
  • react定义的一种类似于XML的JS扩展语法
  • 本质是React.createElement(component,props,…children)方法的语法糖。
  • 作用：简化创建虚拟DOM
    • 格式：var ele = <标签名>内容</标签名>
    • 他不是字符串，也不是HTML/XML标签
    • 它最终产生一个JS对象

示例代码3-1如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSX语法规则</title>
  <style>
    .title {
      background-color: orange;
      width: 200px;
    }
  </style>
</head>
<body>
  <div id="test"></div>
  <div id="demo"></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 = "helLO"
    const myText = "hello react"
    // 1.创建虚拟DOM
    const VDOM = (
      <div>
        <h2 className="title" id={myId.toLowerCase()}>
          <span style={{color: 'white', fontSize: '35px'}}>{myText}</span>
        </h2>
        <h2 className="title" id={myId.toLowerCase() + '1'}>
          <span style={{color: 'white', fontSize: '35px'}}>{myText}</span>
        </h2>
        <input type="text" />
        <good>23231</good>
      </div>  
      )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
    /*
      jsx语法规则：
        1.定义虚拟DOM时，不要写引号
        2.标志中写入js表达式，需要用{}包裹
        3.样式类名指定时不要用class,要用className
        4.内联样式，要用style={{key: value,...,key: value}}的形式去写
        5.虚拟DOM有且仅有一个根标签
        6.标签必须闭合
        7.标签首字母
          （1）若小写字母开头，则将该标签转为html同名标签；若html中无同名标签报错
          （2）若大写字母开头，react就渲染对应的组件；若组件未定义，则报错
    */
  </script>
</body>
</html>

区分JS表达式和JS语句，示例代码3-2如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hell 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">
    /*
      区分：【js语句】和【js表达式】
      1.表达式：表达式是由运算符构成，并运算产生结果的语法结构。每个表达式都会产生一个值,它可以放在任何需要一个值的地方
        示例：
          (1) a+b
          (2) demo(1)
          (3) arr.map()
          (4) function fun() {}
      2.语句：语句则是由分号分隔的句子或命令,是一个行为
        示例：
          (1) 声明语句 const a
          (2) 赋值语句 const b = 2
          (1) 表达式语句：a+b;
          (2) 控制语句 if(a>b) {}

    */
    const data = ['Vue', 'React', 'Angular']
    // 1.创建虚拟DOM
    const VDOM = (
      <div>
        <h1>前端js框架列表</h1>
        <ul>
          {
            data.map((item, index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>  
      )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>

后记

❓QQ:806797785

⭐️源代码仓库地址：https://gitee.com/gaogzhen/react-study

参考：

[1]尚硅谷React教程（2022加更，B站超火react教程）[CP/OL].2020-12-15.p2-p6.

gaog2zh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React-jsx语法
weixin_44486539的博客
02-05 254
jsx语法是 react 的模板语法，是 react 的灵魂；通过该语法可以很方便的创建 react 对象 jsx 不是字符串也不是 html，就是 react 对象，其底层就是 React.createElement()；所以使用 jsx 语法时还是要引入 react 核心包 jsx 只能有一个根节点；所以多个根节点时要再用一个元素将其包起来或者使用 <> </> 将其包...
【React】入门概述 - 虚拟DOM与原生DOM - JSX语法 - React基本使用
YK菌的博客
06-04 2904
从今天起，YK菌要开始学习React了 官方文档https://react.docschina.org/ 为什么要学React
react--JSX语法糖
郑怪兽
09-01 498
JSX语法糖 JSX是一种语法糖，全称：javascript xml JSX语法不是必须使用的，但是因为使用了JSX语法之后会降低我们的开发难度，故而这样的语法又被成为语法糖。 看下面的DOM结构： <div class='app' id='appRoot'> <h1 class='title'>欢迎进入React的世界</h1> <p> React.js 是一个帮助你构建页面 UI 的库 </p> </div>
React - jsx语法规则
weixin_46398446的博客
05-14 283
jsx语法规则 定义虚拟DOM时，不要写引号。 标签中混入JS表达式要用{}. 样式的类名指定不要用class，要用className。 内联样式，要用style={{key：value}}形式写，value注意加引号。 只有一个根标签。 标签必须闭合。 标签首字母 a.若小写字母开头，则将标签转为html同名元素，若html无该标签对应同名元素，则报错。 b.若大写字母开头，react就去渲染对应组件，若组件没有定义，则报错 <!-- jsx语法规则： 1.定义虚拟DOM
gulp-jsx:用于gulp的virtual-dom-jsx
05-03
gulp-jsx for 。 安装 npm install gulp-jsx 用法 var gulp = require ( 'gulp' ) ; var jsx = require ( 'gulp-jsx' ) ; gulp . task ( 'build' , function ( ) { return gulp . src ( 'views/**/*.js' ) . pipe...
react-ReactcreateElement和JSX替代语法糖
08-15
JSX则是对`React.createElement`的一种语法糖，它允许开发者用类似HTML的结构来编写React组件。上面的例子在JSX中可以写成： ```jsx const element = ( <h1>Hello, World! ); ``` JSX的优势在于提高了代码的...
react-react面试题之Jsx转换成真实DOM的过程.zip
03-20
Babel是一个广泛使用的JavaScript编译工具，它能够将ES6+和JSX语法转换为浏览器可以理解的ES5代码。在处理JSX时，Babel会将JSX标签转换成对应的`React.createElement()`函数调用。 例如，以下JSX代码： ```jsx ...
使用React-JSX编写你的鸿蒙原生应用.zip
02-07
安装完成后，你可以创建一个新的项目，选择React-JSX模板，这将为你生成一个基础的项目结构，包括`harmonyos-jsx-main`目录。 在`harmonyos-jsx-main`目录下，你会看到主要的源代码文件，如`main.js`。这里，你可以...
React+TS前台项目实战（二十九）-- 首页构建之性能优化实现首页Echarts模块数据渲染
weixin_43883615的博客
07-11 1065
还记得之前我们创建的 高性能可配置Echarts组件 吗？今天我们将利用它来呈现首页统计模块的数据可视化效果，借助这个组件，我们能够显著减少编写代码的工作量，会方便很多。下一篇讲【首页响应式构建之实现全页面数据】。关注本栏目，将实时更新。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1496
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
react-类组件2
m0_74019046的博客
07-12 401
在开发中不能直接通过修改state的值来使界面发生变化，必须通过setState来修改才能使页面发生变化。使用setState修改时，，如果发生变化会覆盖原来的，然后再执行render。
图片上传裁剪react-cropper
xiao970615的博客
07-11 310
【代码】图片上传裁剪react-cropper。
reactnative 电量自动-颜色渐变-带文字-svg-path-rect实现
最新发布
一个能慢慢慢慢慢变强大的demo
07-12 930
{/* 反着来的 最大值71 最小值0*/}//设置文字显示x起点坐标。//设置文字渐变颜色。
5，智能合约（react+区块链实战）
qq_44870829的博客
07-11 952
在真实开发里面不是连接jsVM虚拟机的，而是真正链接以太坊的链，无论私有链还是说公链，测试链。创建钱包，常用密码，助记词一定不要丢，备份自己的私钥（助记词，私钥映射到其中）（1）合约里的全局变量 msg.sender 部署合约的地址（合约的拥有者）通过上述进行部署合约到链上及，区分部署合约的地址和调用合约的地址的不同。是因为账户的原因，链接的是第一个无钱的账号，应该链接第二个导入的账户。其余地址执行写入的函数时，虽然没法真正的写入进去，但还是会消耗gas。可以点击部署，将合约部署到链上，这里还没有写合约。
react hook---钩子函数的使用，useState，useReducer，useEffect，useRef,useContext，自定义hook
I_am_shy的博客
07-12 1558
什么是hook钩子函数 hook（钩住），表示拦截操作，可以在某些操作执行时拦截住（钩住），执行hook函数的逻辑， 在react中，hook函数一般是use开头，然后提供一些方法api，也就是说你可以理解成react中的hook就是一套便于操作的api
React_自定义组件_下拉框
分享程序相关知识
07-11 250
使用HTML自带的下拉框，或者使用组件库的下拉框，很难完全按照自己的ui样式去实现，所以自定义一个下拉框，更改更加方便。
6-5，web3浏览器链接区块链（react+区块链实战）
qq_44870829的博客
07-11 1303
此处点击领养会弹出框用来支付的，因为要调用写入函数，写到链上的，此处的领养不用转钱但需要父手续费。通过命令进入文件夹内部，准备运行项目。react创建新项目 使用creat-react-app快速新建一个react项目。可以使用metamask链接网站了，并且能够打印出当前的metamask地址。使用上方的变量可以获取本地的地址及metamask的默认账号地址了。来到react项目的根目录下（在第一章进行了创建），此代码还有一些缺陷，若交易失败会报错，页面也会报错，经过代码的修改后在初始化的函数部分修改，
react学习——28react-redux实现多组件共享数据（精简版）
ChenJin_2的博客
07-12 208
react学习——28react-redux实现多组件共享数据（精简版）
搭建react 的react-router-dom v6路由详情
05-10
npm install react-router-dom@next ``` 2. 创建路由 在应用程序的入口文件中，使用BrowserRouter创建一个路由： ```jsx import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值