[Day23] JavaScript 函式库 - React

终於要到了铁人赛的尾声了，笔者一直想在最後几篇来了解一下React，所以趁现在JavaScript应该算是告一个段落时，来开始认识他的函式库React了!

什麽是 React？

React是由 Facebook 团队所开发维护的开放原始码 JavaScript 函式库，拥有很好的延展性、丰富的开发辅助工具和周边函式库，是用来建立使用者介面 (UI) 的前端架构，可让我们使用小巧而独立的component，来建立复杂的 UI。

• 线上编辑器: CodeSandBox
  在初学React时，建议可用CodeSandbox线上编辑器，让我们可以直接在线上建立一个React专案。

Component 元件

React component 需要实做 render() function，这个 function 接受输入的资料并回传需要显示的内容。这个范例使用了 JSX，JSX是一个类似 XML 的语法。传入给元件的输入资料可以透过this.props在render()function 中存取。

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Judy" />,
  document.getElementById('root')
);

>> 以上显示: Hello Judy

JSX - JavaScript XML

语法

const element = <h1>Hello World!</h1>;

这个有趣的标签语法不是一个字串也不是 HTML(虽然看起来很像HTML)。

JSX 语法类似 HTML，全名为JavaScript XML，是一个 JavaScript 的语法扩充，我们在写 React 的时候可透过这个语法来描述使用者介面的外观。在 React 中会透过Babel套件将 JSX 标签语法转换成 React.createElement 并编译成让网页看得懂的元件，元件非常方便，因为我们可以将程序码集中在每个文件中，使其更容易维护。

看到对於JSX一个很贴切的解释:   JSX就是一个披着html的javascript。

为什麽要用 JSX?

在前端中，状态逻辑与使用者介面本就是密不可分的，与其将他们拆开到各个档案中存放，不如关注在：以组件方式拆分，其中封装好 UI 与逻辑，而组间之间彼此独立，互不相依赖。

由於 JSX 类似 XML 的语法，让一些非开发人员也更容易看懂，且能精确定义包含属性的树状结构。当 Component 组成越来越复杂时，若使用 JSX 将可以让整个结构更加直观、简洁，可读性较高。

React并不强制使用 JSX，但它整合 UI 与逻辑，是一个很好的视觉辅助，也是现今大多数人使用的语法。

资料来源:
https://zh-hant.reactjs.org/docs/introducing-jsx.html