【前端】深入了解React JSX语法及实例应用

人不走空

🌈个人主页：人不走空** **

💖系列专栏：算法专题

⏰诗词歌赋：斯是陋室，惟吾德馨

React是一种流行的JavaScript库，用于构建用户界面。其中，JSX（JavaScript XML）是React中定义UI组件结构的一种语法。在本篇博客中，我们将深入介绍React JSX语法，并提供一些实例应用以帮助你更好地理解。

JSX语法简介

JSX是一种类似XML的语法扩展，它被设计用来描述React元素的结构。以下是一些JSX语法的基本要点：

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写（查看下面代码）。

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以

<

开头），就用 HTML 规则解析；遇到代码块（以

{

开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看 demo03 ）。

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面代码的

arr

变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。

作者其他作品：

数据结构之链表-CSDN博客

力扣1445 连续字符-CSDN博客

软件工程之维护阶段-CSDN博客

开源社区的力量：软件工程的协作新模式-CSDN博客

https://blog.csdn.net/double222222/article/details/134776271

软件工程之设计分析(2)-CSDN博客

软件工程之设计分析(1)-CSDN博客

软件工程之需求分析-CSDN博客

软件工程之编码（1）-CSDN博客

https://blog.csdn.net/double222222/article/details/135334628?spm=1001.2014.3001.5502

【Linux】文件服务NFS（Network File System）-CSDN博客

软件工程之编码（2）-CSDN博客