React如何使用JSX语法

❝

1、🍟你可以直接下载本节配套的资源代码，然后导入vscode看效果，也可以跟着教程一点一点敲，都是没问题的。

🤔怎么运行本节代码？ 很简单，随便找个浏览器打开index.html即可。💕

代码目录

和上一小节一样，依然是用最简单的html。

运行效果

聊聊需求

用React动态展现一个动态的列表，效果如上。

开始整活

在编写代码之前呢，我们先聊一聊JSX语法，之前我们是这样写的。

const VDOM = <h1>Hello,React</h1>

我们说<h1>Hello,React</h1>就是JSX的语法，从效果来看，就是必须只能有一个根节点。再看需求，要展现一个动态的列表，那就不能写死，需要我们从js变量中提取数据，展示在JSX模板里面。

JSX允许我们通过{}的形式引入js表达式。

//准备数据
const arr = ['妙蛙种子', '妙蛙草', '妙蛙花'];
//1.创建虚拟DOM
const VDOM = <div>{arr}</div>