Day7 什麽是JSX?

这个看起来很像HTML的标签语法，但实际上他是JavaScript的语法所扩充出来的 JSX语法

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

React利用JSX产生的React元素经由render後显示到画面上。
JSX可以在JavaScript中很好的呈现html的结构，并具有JavaScript的功能。

JSX是React.createElement的语法糖（简写），需经过babel工具编译成原生的JavaScript写法React.createElement产生的元件，让浏览器可以显示。

根据scr/App.js里的结构改写一下做比较：

JSX语法

function App() {
  return (
/* JSX语法 */

  <h1 className="greeting" id="bolder">
    Hello, World!<span>HAHA</span>
  </h1>

/* JSX语法 */
)};

React.createElement

而原生React.createElement所产生React Element写法如下：

React.createElement(type, [props], [children1,children2,...])

• type：React Component或html标签，Component 命名首字大写，html标签则为小写
• props：属性，以物件表示
• children：React.createElement产生的节点中的子节点

第三个参数後皆为children子节点参数

function App() {
  return React.createElement(
  'h1',//标签
  {className: 'greeting',id:'bolder'},//属性
  'Hello, World!',//子节点1
	React.createElement('span',null,'HAHA')//子节点2
)};

如果用React.createElement写法，要新增子节点就要使用巢状的方法写进参数中。
这样比较起来就能看到JSX写法的优点了：

• 有更加语意化且易懂的标签
• 写法更加简洁

将JSX 和 UI Component结合在一起，对於在React撰写JavaScript程序码时的阅读更加容易。

接着在下一章会继续详细介绍，如此方便的JSX该如何使用！