[React.js 學習筆記] ReactJS簡介

本系列文章將參考 React 官方教學和網路上文件以及 react 引領未來的用戶界面開發框架一書整理成 React 初學者系列教學文章。

在 Web 開發早期，開發者只需使用伺服器端語言（PHP，JSP）就可以透過伺服器渲染出對應頁面，隨著網站開發的技術的演進，前端開發技術變得日趨複雜，為了提供用戶體驗，我們不再每一個 request 都要求伺服器渲染整個頁面，從而在瀏覽器端透過 JavaScript 去處理頁面的渲染，複雜的更透過 JS 控制整個應用程式。

React是一個源自於Facebook的 PHP 框架 XHP的一個分支。React 將原來在伺服器端渲染頁面的工作流帶到了前端。更透過 Virtual DOM 的使用來突破舊有操作 DOM 所帶來的效能瓶頸，每次只重新 render 差異部分。

React 大致上包含下面這些概念：
1. Component(元件)
2. JSX(JavaScript XML)
3. Virtual DOM
4. Data Flow

本質上 React 可以稱為一個狀態機(我們可以把 React 看成 MVC 模型中的 V(View)的部份，React 事實上不處理Ajax，路由、資料儲存等)，可以協助開發者管理狀態的變化。事實上，React 關心的重點主要有兩個：

1. 更新DOM
2. 響應事件

接下來就讓我們用一個簡單元件 render 範例單作結尾

<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>