React JSX

news/2024/7/15 17:29:16 标签: react.js, javascript, 前端

文章目录

  • React JSX
  • 使用 JSX
  • 独立文件
  • JavaScript 表达式
  • 样式
  • 注释
  • 数组
  • HTML 标签 vs. React 组件

React JSX

在这里插入图片描述

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

  • JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的，在编译过程中就能发现错误。
  • 使用 JSX 编写模板更加简单快速。

使用 JSX

JSX 看起来类似 HTML ，我们可以看下实例：

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

React 实例

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">javascript">
      ReactDOM.render(
      	<div>
      	<h1>CSDN</h1>
      	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
</body>
</html>

运行效果：
在这里插入图片描述

独立文件

你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然后在 HTML 文件中引入该 JS 文件：

React 实例

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>
</html>

运行效果：
在这里插入图片描述

JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

React 实例

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">javascript">
      ReactDOM.render(
      	<div>
      	  <h1>{1+1}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
</body>
</html>

运行效果：
在这里插入图片描述

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中变量 i 等于 1 浏览器将输出 true，如果修改 i 的值，则会输出 false。

React 实例

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">javascript">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
</body>
</html>

运行效果：
在这里插入图片描述

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

React 实例

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">javascript">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>React 实例</h1>,
      	document.getElementById('example')
      );
    </script>
</body>
</html>

运行效果：
在这里插入图片描述

注释

注释需要写在花括号中，实例如下：

React 实例

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">javascript">
      ReactDOM.render(
      	<div>
            <h1>React 实例</h1>
            {/*注释...*/}
         </div>,
      	document.getElementById('example')
      );
    </script>
</body>
</html>

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：

React 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="http://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="http://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">javascript">
      var arr = [
        <h1>React 实例</h1>,
        <h2>相看两不厌，唯有敬亭山！</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
</body>
</html>

运行效果：
在这里插入图片描述

HTML 标签 vs. React 组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

注意：由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。


http://www.niftyadmin.cn/n/306863.html

相关文章

开发必备，开源 or 免费的 AI 编程助手

开发必备，开源 or 免费的 AI 编程助手

AI 大模型的火热&#xff0c;让开发圈近来如虎添翼&#xff0c;各种各样基于 AI 技术的开发者工具和新范式不断涌现&#xff0c;尤其是 Github 和 OpenAI 共同推出的 Copilot X &#xff0c;更是一骑绝尘。本文推荐一些开源 or 免费的 AI 编程工具&#xff0c;不妨试着用起来。…
阅读更多...
01 点云中的NAN点

01 点云中的NAN点

一、NAN点 在点云中&#xff0c;NAN(Not a Number)表示一个无效的数字或值&#xff0c;通常是由于数据输入错误、计算错误或其他问题导致的。NAN点可能表示一个不存在的点、一个超出点云范围的点、一个无效的坐标值等。 由于NAN点在数学和计算机科学中都是特殊的数值&#xf…
阅读更多...
智能美妆镜兴起，如何升级更精细、智能的化妆体验！

智能美妆镜兴起，如何升级更精细、智能的化妆体验！

经常化妆的小姐姐&#xff0c;会发现化妆除了要有好皮肤、一堆化妆品之外&#xff0c;化妆镜的作用也尤其重要&#xff01;爱拍照的小姐姐们都知道&#xff0c;自拍的效果好不好&#xff0c;和背景、灯光有着很大的关系&#xff0c;其中灯光的冷调或者暖调&#xff0c;也是影响…
阅读更多...
Python ---- pyInstaller 的常用打包命令

Python ---- pyInstaller 的常用打包命令

1. 简介 PyInstaller是一个第三方库&#xff0c;它能够在Windows、Linux、 Mac OS X 等操作系统下将 Python 源文件打包&#xff0c;通过对源文件打包&#xff0c; Python 程序可以在没有安装 Python 的环境中运行&#xff0c;也可以作为一个 独立文件方便传递和管理。PyInsta…
阅读更多...
黑马程序员-学成在线项目总结

黑马程序员-学成在线项目总结

黑马程序员-学成在线项目总结 收获 基础公共样式 清除默认样式&#xff0c;例如内边距、外边距、项目符号等等 设置通用样式&#xff0c;例如&#xff1a;文字样式 项目结构 注:多个css文件引入顺序&#xff0c;先清除&#xff0c;后设置 版心效果 许多网页整体都有版心居…
阅读更多...
[GFCTF 2021]文件查看器（GZ、过滤器、phar) day4

[GFCTF 2021]文件查看器（GZ、过滤器、phar) day4

打开界面直接一个登录界面&#xff0c;直接admin/admin登录进去 。 进来之后发现是一个文件查看器的功能 随便输入了点东西发现了报错&#xff0c;然后读取文件的功能&#xff0c;输入Files.classs.php发现读取不成功 换了个index.php <?phpfunction __autoload($classN…
阅读更多...
第五十章 Unity Input Manager 输入系统（上）

第五十章 Unity Input Manager 输入系统（上）

Unity的输入系统支持多种输入设备&#xff0c;比如键盘和鼠标&#xff0c;游戏手柄&#xff0c;触摸屏&#xff0c;VR和AR控制器等等。Unity 通过两个独立的系统提供输入支持&#xff1a;第一&#xff0c;输入管理器 (Input Manager) 是 Unity 核心平台的一部分&#xff0c;默认…
阅读更多...
Python+Selenium4环境搭建

Python+Selenium4环境搭建

set集合 怎么把列表种相同的数据和不同的数据取出来 1.把列表转为set集合 2.按照集合的交集 selenium 自动化测试&#xff1a;自动化测试就是通过代码或者是工具模拟人的行为来进行对WEB&#xff08;APP&#xff09;来进行操作。 QTP (HP公司)&#xff1a;以录制回放的模式…
阅读更多...
最新文章

Copyright @ 2022~2023