react入门（二）——jsx语法

概念及用法

demo需要的js文件我不在这里声明了，若有需要js的，可以去我上一个博客上面复制cdn的地址进行下载 https://blog.csdn.net/qq_40566547/article/details/91425577 。
首先我来解释一下jsx：
jsx全称JavaScript Xml，大家都知道xml和html，在html中我们只能使用固定的标签，在xml中我们可以使用自定义的标签，jsx就是将xml的标签写法加入进js写法而已，和平常写html标签没什么区别。
在jsx中，我们可以直接以写html代码的形式进行js的书写，不过需要babel进行转换语法，当我们需要在jsx中书写动态的内容，可以通过 {} 进行js动态的值或表达式（三目表达式）。

例子1

<script type="text/babel">
const msg = 'I LIKE YOU';
const myId = 'testid';
//创建虚拟dom（jsx）,  {}  里面写入js表达式
const vDom1 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>;
ReactDOM.render(vDom1 , document.getElementById('test1'))
</script>

我们需要知道的是，在jsx中，如果你想要写动态的值，就必须要加{}，然后再里面书写js的内容。
有了上面的思想，我们现在做一个复杂点的。

例子2

/*
需求：动态展示列表数据
大多数的react小白会想到用一个数组来存储需要动态展示的数据，这没错很正确
但是当大家在不知道语法的情况下，很容易书写成以下情况
不多说，我们先看下效果
*/
<script type="text/babel">
    const datas = ['jQuery', 'zeptoo', 'React', 'Vue','Vue全家桶'];
    const vDom = (
        <ul>
          <li>{datas}</li>
        </ul>
    );
    ReactDOM.render(vDom, document.getElementById('example'))
</script>

我们可以看到上面只是将数组进行了遍历，然后将每一位分别插入到一个li标签中，所以我们需要转换一下思想：如何将一个数据的数组转换为一个标签的数组。这个时候我们想到了用数组的map方法。

<script type="text/babel">
    /*
        动态展示列表数据，问题：如何将一个数据的数组转换为一个标签的数组（使用map）
     */
    const datas = ['jQuery', 'zeptoo', 'React', 'Vue','Vue全家桶'];
    //由于遍历的时候若不加一个唯一的key加以区分，控制台会报错，所以这里我们需要将key加上，我建议以后进行相类似的操作都加上key
    const vDom2 = (
        <ul>
            {datas.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
    );
    ReactDOM.render(vDom2, document.getElementById('example'))
</script>

通过上面的操作我们就能得到想要的效果

这里用了很多ES6的写法，若有不懂得请看阮一峰的《ES6标准入门》一书，网址http://es6.ruanyifeng.com/