Day5 认识JSX，简化你的程序码

一般写程序的时候，我会将HTML和Javascript分开来写，但react提供了JSX的语法，将html标签和Javascript放在同一个档案，并让你的程序更简洁。

JSX几大特色

1. 提供语意化标签，增加程序易读性
   JSX除了可以使用HTML外，还可以搭配XML、Javascript宣告变数。

// HTML
const element = <h1>你好，世界！</h1>;
// XML
const element = <hellowWorld/>;
// HTML+Javascript，{greeting(someone)}会取代成greeting function的回传值
const element =(<h1>你好，{greeting(someone)}</h1>) ;

( )虽非必要，但可以避免程序用多行呈现时出错。
React搭配JSX使用的话，可以用声明式而非命令式的方式撰写程序，下面用IG按赞的事件作举例。

// 命令式
if(userLikes()) {
    if(!hasRedLike()) {
      removeHollowLike();
      addRedLike();
    }
  } else {
    if(hasRedLike()) {
      removeRedLike();
      addHollowLike();
    }
  }
  
//   声明式
if(this.state.liked) {
    return (<RedLike />);
  } else {
    return (<HollowLike />);
  }

2. 简化程序
   下面拿昨天的范例作举例，可以很清楚的理解到JSX帮助你简化你的程序。

// 未使用JSX未使用JSX
  const li=React.createElement('li',{},'第一点');

//   使用JSX
const li = <li>第一点</li>;

3.结合Javascript语法，可以清楚了解每个元件所负责的功能，让你更好管理程序
下面用官网提供的范例作举例。

const e = React.createElement;

class LikeButton extends React.Component {


  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
/