React Day 1 - Getting Started

發表於   |   分類於

Why React?

React 是一個 facebook 和 instagram 為了建構使用者界面的 javascript 函式庫. 大部分的人把它當作 MVC 架構中的 View 使用.

我們用 React 解決一個問題: 建構大型應用程式時隨時間改變的資料.

Simple

簡潔地表達你的程式在什麼時間點應該要長得怎麼樣, 當底層的資料改變時, React 會自動管理 UI 的更新.

Declarative

當資料改變, 在概念上, React 就像 refresh 按鈕且只會變動需要更新的部分.

Build Composable Components

React 專注於建立可重覆使用的組件, 事實上, 在 React 中你唯一能作的事也就是只有建立組件. 由於其封裝性, 組件讓你的程式碼可以重覆利用, 易於測試與容易切分組件之間的關係.

JSX

我們強烈地相信用組件的這種設計方法比起 “模板(templates)” 和 “顯示邏輯(display logic)” 這些方式來得更能劃分清楚關係. 我們認為標籤(markup)與相關的程式碼應要更緊密的連結在一起. 此外, 顯示邏輯通常都非常複雜, 若使用模板語言(template language)將顯得極其笨重.

我們找到解決這個問題最好的方法就是直接在 javascript 程式碼裡用一種能夠完全表達清楚的語言去產生 HTML code 和表達組件的樹狀結構.

為了使這件事變得容易, 我們創造了一個簡單的, 或必要性的, 類似像 HTML 的語法來建構 React 的樹狀節點 - JSX

jSX 讓你用 HTML 的語法建立 Javascript 的物件 :

1
React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!');

換成 JSX 的表達方式如下:

1
<a href="http://facebook.github.io/react/">Hello!</a>

我們發現用這種的方式能更方便建構 React 應用程式, 而設計師也比較不會排斥, 但每個人都有屬於自已習慣的工作流程, 所以 JSX 並不是使用 React 的必要選項

若要對 JSX 了解更多, 可以看看 JSX in depth, 或是試試我們的 JSX 線上編譯器

JSX 很像是 HTML, 但畢竟它們並不完全相同, 想要了解它們之間關鍵的差別可以看看 JSX gotchas 這篇.

React without JSX
1
2
3
4
// React Element
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', {className: 'my-list'}, child);
React.render(root, document.body);

基於便利性, 你可以使用 factory function 從 custom components 建立 React elements:

1
2
3
4
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({custom: 'prop'});
React.render(root, document.body);

React 已經內建常用的 HTML tag factories:

1
2
3
4
5
6
var root = React.DOM.ul(
	// props
    {className: 'my-list},
    // child
	React.DOM.li(null, 'Text COntent)
);
線上轉換

JSX 是一種可以在 javascript 中使用 XML 語法的語言, 搭配 JSXTransformer.js 你可以直接在 HTML 中使用 <script type=”text/jsx”> 的區塊直接編寫 JSX 或是外部引入.

hellowworld.js:

1
2
3
4
React.render(
	<h1>Hello, world!</h1>,
    document.getElementById('example')
);

helloworld.html:

1
<script type="text/jsx" src="helloworld.js"></script>

我們強烈建議不要在正式環境使用這樣的方式, 而應改用命令工具 react-tools 將 JXS 預編譯(precompile)為 javascript code.

離線轉換
1
npm install -g react-tools
1
jsx --watch src/ build/

Displaying Data

Reactive Updates 反應的改變

在以下這個範例你會發現, React 只會改變這個組件中顯示時間的部分, 你在輸入框所輸入的任何東西都不會受到刷新的影響, 而你根本沒有編寫任何的程式來管理這個行為. React 讓你可以專注做你要做的事件而不用分心在一些無關的機制處理.

React 能做到這點是因為它除非不得已不會直接更動 DOM 來維護呈現的內容. React 使用一個快速, 內部模擬的 VDOM 來差異化計算 DOM 的變動.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">

      // ** Your code goes here! **

    </script>
  </body>
</html>

組件的輸入參數被命名為 props (“properties” 的簡寫), 透過 JSX 的語法被像是 attributes 定義的方式傳遞進來. 你應該把它們想成是一個組件不變的資料, 意即, 應永遠不改寫 props 的資料. this.props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});

setInterval(function() {
  React.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);
Components are Just Like Functions

React 的組件相當簡易. 你可以把它們想成就像是一個有 props 和 state 屬性和 render HTML 方法的 function. 因為它們是如此簡單, 使得它們的程式碼容易閱讀.

限制:

React 的組件只能 render 一個根節點(root node)的結構, 如果你的內容是多節點的, 那它們必須要用一個根節點將它們包(wrap)起來.