JSX初探

需求：动态的创建HTML页面，假设有一个布尔变量"editable"，为true时创建A界面，为false时创建B界面。
A界面：

<div class="container>
   <span>我可以编辑</span>
   <img src="icon.png"></img>
</div>

B界面：

<div class="container_uneditable>
   <span>不能编辑</span>
   <img src="icon_uneditable.png"></img>
</div>

现有的实现思路有两个:
一、JS动态创建HTML标签

var myDiv = document.createElement('div');
var mySpan = document.createElement('span');
var myImg = document.createElement('img');

if(editable){
    myDiv.className = 'container';
    mySpan.innerHTML = '我可以编辑';
    myImg.src = 'icon.png';
} else {
    myDiv.className = 'container_uneditable';
    mySpan.innerHTML = '不能编辑';
    myImg.src = 'icon_uneditable.png';
}
myDiv.appendChild(mySpan);
myDiv.appendChild(myImg);

优点：灵活
缺点：不够优雅，繁琐

二、模板代码

<template id="my_template">
  <div class="">
       <span></span>
       <img src=""></img>
  </div>
</template>

var myTemplate = document.querySelector('#my_template');
if(editable){
    myTemplate.content.querySelector('div').className = 'container';
    myTemplate.content.querySelector('span').innerHTML = '我可以编辑';
    myTemplate.content.querySelector('img').src = 'icon.png';
} else {
    myTemplate.content.querySelector('div').className = 'container_uneditable';
    myTemplate.content.querySelector('span').innerHTML = '不能编辑';
    myTemplate.content.querySelector('img').src = 'icon_uneditable.png';
}

优点：不用创建标签
缺点：不灵活

有什么方法既可以灵活创建标签，又不繁琐呢？JSX就是解决方案之一。

<script type="text/babel">
        const domContainer = document.querySelector('#容器id');
        var editable = false;
        const ele = (
            <div className={editable ? 'container' : 'container_uneditable'}>
                <span>{editable ? '我可以编辑' : '不能编辑'}</span>
                <img src={editable ? 'icon.png' : 'icon_uneditable.png'}></img>
            </div>
        )
        ReactDOM.render(ele, domContainer);
</script>

---

下面我们开始正式介绍JSX:
Consider this variable declaration:

const element = <h1>Hello, world!</h1>;

This funny tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

这个有趣的标记语法既不是字符串也不是HTML。它被称作JSX，它是对JS的一种语法扩展。推荐将其和react一起使用以描述界面。JSX可能会让你想起模板语言，但它还具备了JS的所有能力。

一、Why JSX?
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

为什么使用JSX?
React承认这样一个事实：渲染逻辑天生就会和UI逻辑耦合在一起，而不是强行将标记代码与逻辑代码分割在不同文件。
React用松耦合的单元（即组件，它既包含渲染逻辑，也包含UI逻辑）来分离关注点。
React不强制要求使用JSX，但大部分人发现当你需要在JS代码中编写UI逻辑时它是很有用处的，它也能够帮助React展示更多有用的错误、警告信息。

二、Embedding Expressions in JSX
In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

在JSX中嵌入表达式
在上面的例子中，我们声明了一个叫做name的变量，然后把它写在花括号中内嵌入JSX中，任何合法的表达式都可以嵌入其中，比如数值运算、函数调用并返回值

三、JSX is an Expression Too
After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX也是一种表达式
编译后，JSX表达式变成了一个普通的JS函数调用并且会得到一个JS对象返回值。
这意味着你可以在if，while语句中使用JSX，把它赋值给变量，传值给参数，返回值给函数。

四、Specifying Attributes with JSX
You may use quotes to specify string literals as attributes:

const element = <div tabIndex="0"></div>;

You may also use curly braces to embed a JavaScript expression in an attribute:

const element = <img src={user.avatarUrl}></img>;

用JSX指定属性值
你可以使用双引号指定字符串字面量作为属性值。你也可以使用花括号嵌入JS表达式

五、Specifying Children with JSX
If a tag is empty, you may close it immediately with />, like XML:

const element = <img src={user.avatarUrl} />;

JSX tags may contain children:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

用JSX指定子视图
如果有多层视图，要在外部用括号括起来。

更多详情
参考：https://reactjs.org/docs/introducing-jsx.html