什麽是 JSX （Day2）

介绍JSX

JSX 是一种在 JavaScript 里面的标签语法，让我们可以在写逻辑时使用 HTML 标签。
React 基本概念是：「建立元件，而不是样板」。

话说在设计软件时都会考量关注点分离，从 MVC 的架构开始，单纯的把逻辑 (Model) 跟样板 (View) 分开，
到发现只是技术上的区分，也把处理需求时，逻辑与样板两部份，相互需要对应注意的部分分开了。在影片 React：重新思考 best practices 提到一句话，「templates separate technologies, not concern」。

注：React：重新思考 best practices 里面有讲到完整的思考脉络，从建立元件的先决条件、React 设计决策、到实作方法，推荐观看。

JSX 里的 {} 、() 、与注意最外层只能有单一元素

以下举例 JSX 一些用法：

{ } 可以放置变数（文字或属性都可）、或 JS Expression ，并回传显结果，

const faith = <h1>I believe {1 + 1} > 2</h1>;

function person(name) {
  if (name) {
    return <h1>Hello, { name }!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

const user = {
  John: 'www.handsome.com/profile.jpg',
  Merry:'www.beautiful.com/profile.jpg'
}

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

( ) 当包多元素的时候必须使用

const fruits = (
<ul>
    <li>?</li>
    <li>?</li>
    <li>?</li>
</ul>);

最外层只能有单一元素

//错误的例子
const twins = (
  <h1>我是双胞胎哥</h1>
  <h1>我是双胞胎弟</h1> );

JSX 其实要透过 babel 解析

JSX 无法直接写在我们的 Script 当中，是需要经过 Babel 翻译成浏览器可以看懂的唷！
回头看 Day1 Hello, 2021 iThome 铁人赛! 例子，其实会被解析成以下例子。（可使用Bable 工具写 JSX 看看。)

ReactDOM.render(
  React.createElement("h1", null, "Hello Bable"),
  document.getElementById('root')
);

以上今天。

参考资料：
https://zh-hant.reactjs.org/docs/introducing-jsx.html
React：重新思考 best practices
Microsoft 架构原则