此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第二篇，主要介绍jsx语言。

jsx定义

jsx全称为：JavaScript XML语言。

jsx是react定义的一种类似于XML的js扩展语法，JavaScript+XML

jsx语法

1.定义虚拟DOM时，不要写引号

2.标签中混入JS表达式的时候要用{}包起来

3.样式的类名指定，要用className，不要用class

4.内联样式，要用style={ {key:"value"}}的形式写。

5.只能有一个根标签

6.标签必须闭合

7. 标签首字母问题

（1）若首字母为小写，则将标签转为html中同名的元素，如果html中没有同名元素则报错。

（2）若首字母为大写，react就会去渲染对应的组件，若组件没有定义就会报错。

代码示例如下：

<!-- 准备好容器 -->
    <div id="test"></div>

<!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">//写为babel格式，否则识别为普通js文件
        const myId = "React"
        const myData = 'Hello,React'
        //1.创建虚拟dom,只能有一个跟标签，且标签必须闭合
        const VDOM = (//标签混入js表达式时需要用{}括起来,使用className给标签添加class名字,内联样式，要用style={
   
   {key:"value"}}的形式写
            <div>
                <h1 id={myId.toLocaleLowerCase()} className="title">
                    <span style={
   
   { color: 'red' }}>{myData.toLocaleLowerCase()}</span>
                </h1>
                <h1 id={myId.toUpperCase()} className="title">
                    <span style={
   
   { color: 'red' }}>{myData.toUpperCase()}</span>
                </h1>
                <input type="text"></input>
            </div>
        )


        //2.渲染dom到页面，就是根据虚拟dom生成真实dom
        ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id

效果如下：

jsx小练习

我们使用react写一个小案例，将数组里面的数据遍历然后渲染到页面上。

写一个数组const data = ['Angular','React','Vue']，我们在ul内使用li承载数据，使用map()遍历数据。

js表达式与js语句

注意，我们在使用js表达式的时候，需要用{}将其括起来，但我们必须区分什么是js表达式，什么是js语句（代码）。js语句用{}括起来是会报错的。

1.js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。下面这些都是表达式。

（1）变量a

（2）变量a + 变量b

（3）arr.map()

（4）function test() {}

（5）demo(1)

2.js语句（代码）：

（1）if语句

（2）for循环

（3）switch（）{case：xxx}

遍历时的key值问题

使用map遍历数组并且进行操作，我们必须给每个dom节点设置key值，显示其唯一性。我们暂时使用index作为其唯一标识。

代码如下：

<!-- 准备好容器 -->
    <div id="test"></div>

<!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">//写为babel格式，否则识别为普通js文件
        const data = ['Angular','React','Vue']
        
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }    
                </ul>  
            </div>
        )
        //2.渲染dom到页面，就是根据虚拟dom生成真实dom
        ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id