什么是JSX? JSX是JS语法的扩展 如果JS文件包括了JSX代码，这个文件必须要JSX编译器编译过后才能给浏览器使用！
JSX元素:
JSX元素看起来和HTML是一模一样的！唯一不同的是它是放在JS文件中的。
<h1>hello world</h1> // 这是一个JSX元素
JSX元素要和JS表达式放在一起，组成JSX表达式：
const navBar = <nav>I am a nav bar</nav>;
JSX元素可以和HTML一样，可以有属性：
const title = <h1 id="title">Hello world!</h1>;
如果你有多个JSX元素，当它们嵌套在一起组成JSX表达式时，必须给JSX元素加上一对括号：
const theExample = ( <a href="https://www.example.com"> <h1> Click me! </h1> </a> );
注意，JSX表达式只能有一个最外面的元素：
// 这个例子可以通过，外面只有一个div元素
const paragraphs = ( <div id="i-am-the-outermost-element"> <p>I am a paragraph.</p> <p>I, too, am a paragraph.</p> </div> );
//这个例子不能通过， 开标签和闭合标签必须是同一个JSX元素!
const paragraphs = ( <p>I am a paragraph.</p>
<p>I, too, am a paragraph.</p>
);
渲染JSX：
渲染JSX表达式的意思就是让JSX元素出现在屏幕上！要渲染JSX，使用ReactDOM.render()方法，这个方法接受两个参数：第一个是JSX元素，第二个是将到append到的元素。 注意第一个元素可以是一个变量：
const toDoList = ( <ol> <li>Learn React</li> <li>Become a Developer</li> </ol> ); ReactDOM.render( toDoList, document.getElementById(‘app‘) );
虚拟DOM：
ReactDOM.render()方法一个特点就是，它只更新DOM元素一次！