React入门系列教程（二）使用JSX代替React.creat

上文提到在页面上显示文字信息，直接用html标签不就行了，用js大材小用了。原生环境下当然可以，React呢？没问题，那就是JSX。啥是JSX？就是用html标签的形式实现js语句的功能。

让我们看看如下代码能不能用

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script type="text/javascript">
    const rootElement = document.getElementById('rootElement')
    /*JSX的写法，创建div元素, 设置className属性，文字内容(children属性)*/
    const divElement = <div className="container">du1dume</div>
    ReactDOM.render(divElement, rootElement)
</script>

确实不能用，如图1所示，语法错！

当然语法错，这压根儿就不是js的语法啊，得把这段代码翻译成正确的js语法，也就是把它翻译成React.createElement方法调用。谁来帮你翻译，Babel！通常做正经的项目我们得需要Webpack之类的构建库来帮我们把JSX预编译成js代码，这里我们主要是学习看效果，所以直接在浏览里使用Babel独立版动态编译就好了。看下面的代码：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<!-- 这里引入了babel库，注意路径是babel-standalone -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<!-- 这里把原来的type="text/javascript"改成了type="text/babel" -->
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    const divElement = <div className="container">du1dume</div>
    ReactDOM.render(divElement, rootElement)
</script>

保存，刷新，完美！

现在文字内容是写死的，如果我们想动态的设置文字内容咋整呢？那就把文字内容放进一个变量里呗，那JSX中如何使用一个变量呢？看代码：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<!-- 这里引入了babel库，注意路径是babel-standalone -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<!-- 这里把原来的type="text/javascript"改成了type="text/babel" -->
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    /*存入变量*/
    const content = 'du1dume'
    /*使用大括号显示变量内容*/
    const divElement = <div className="container">{content}</div>
    ReactDOM.render(divElement, rootElement)
</script>

对头，就是用大括号，在JSX中使用大括号，可以让我们脱离JSX宇宙，立即跳跃进js宇宙。

既然大括号里是js宇宙范畴了，那我们就可以在里面干js可以干的事儿了，看代码：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<!-- 这里引入了babel库，注意路径是babel-standalone -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<!-- 这里把原来的type="text/javascript"改成了type="text/babel" -->
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    const content = 'du1dume'

    /*我们在大括号里干了js小时候最爱干的事儿，立即执行函数，这里用了箭头函数*/
    const divElement = <div className="container">{ (() => content)() }</div>
    
    ReactDOM.render(divElement, rootElement)
</script>

这也太牛x了吧！我们可以在两个宇宙中来回穿梭！

我们知道在JSX标签中间书写文字内容就是设置children属性的简写方式，既然children属性可以使用动态方式，其他属性当然也可以，比如className属性，同样是把具体内容放入变量，使用的时候用大括号括起来即可，看代码：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<!-- 这里引入了babel库，注意路径是babel-standalone -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<!-- 这里把原来的type="text/javascript"改成了type="text/babel" -->
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    const content = 'du1dume'
    
    /*className属性的值，放入clsName变量中*/
    const clsName = 'container'
    
    const divElement = <div className={clsName}>{ (() => content)() }</div>
    
    ReactDOM.render(divElement, rootElement)
</script>

这样我们就可以动态地设置页面上内容的样式，轻易地实现各种效果了。

上文我们提到过，React创建出来的元素都有一个重要的props属性，这个属性是个对象，里面存放了该元素的配置信息。在JSX中，我们可以使用类似js的spread语法来让代码可读性更高。

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<!-- 这里引入了babel库，注意路径是babel-standalone -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<!-- 这里把原来的type="text/javascript"改成了type="text/babel" -->
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
  
    /*props对象，配置元素各项属性*/
    const props = {
        className: 'container',
        children: 'du1dume'
    }
    
    /*类似js的spread语法 */
    const divElement = <div {...props} />
    
    ReactDOM.render(divElement, rootElement)
</script>

如果我们既直接配置了属性，也通过传递props对象配置了该属性，会出现什么情况呢？

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<!-- 这里引入了babel库，注意路径是babel-standalone -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<!-- 这里把原来的type="text/javascript"改成了type="text/babel" -->
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
  
    const clsName = 'myContainer'
  
    const props = {
        className: 'container',
        children: 'du1dume'
    }
    
    /*既直接配置了className属性，又用props对象设置了该属性，规则就是最后一个设置生效*/
    const divElement = <div className={clsName} {...props} />
    
    ReactDOM.render(divElement, rootElement)
</script>

总之记得在JSX语法中，大括号内是js。