得到，人生中的第一個 React 元件
還記得小時候，拿起人生中第一塊樂高的感受嗎？
小時候，當我們第一次得到這些小東西，我們就開始了創作的旅程。拼拼湊湊的，儘管最後的成品稱不上好看，但是在年長的我們眼中，回頭看去，也是蠻可愛的：）
今天，我們將體驗如何建立人生中的第一個 React 元件。得到它就會如同得到魔法般，想變什麼就變什麼吧！
先了解學習重點，才不會走偏
這跟先講結論是一樣的道理，我會在下面列出本篇文章最想要帶給你什麼東西。
我今天會學到什麼？
- 了解「如何定義 React 元件」
- 了解「如何將元件畫在頁面上」
我今天的學習成果是什麼？
還記得我們的 TodoApp 嗎？
我們今天會先完成 TodoApp 這個大元件（紅色區塊），因為子元件都尚未完成，所以今天的成果會是長下面這樣子：
學習「如何定義 React 元件」
上面是 React 定義元件的其中一種寫法，它使用了 ES6 中的 classes 語法，這個規範讓 JS 可以更容易的撰寫物件導向的程式。
如果你是從 Java, .NET 等物件導向語言來的開發者，
我想你會很熟悉 class 和 extend 這兩個關鍵字：
- 你建立的元件（TodoApp）必須繼承 React.Component 這個基礎類別，並且實作 render 這個 function。
- render 翻作中文為「渲染」，它的用意為讓 React 了解這一個元件要呈現的樣貌，因此你要回傳一個 element 回去。
// Error：你只可以回傳一個 element 回去，因此下面的方法是會報錯的
render() {
return <div>hello,</div><div>world</div>;
}// Correct：你必須再多用一個 div 包起兩個內層的 div
render() {
return (
<div>
<div>hello,</div>
<div>world</div>
</div>
);
}
如果你不擅長物件導向語言，
上面那一段程式，翻為白話一點就是「你宣告了一個叫 TodoApp 的 React 元件，而你必須在 render 這個區塊，告知 React 這一個元件的樣貌為何」。
學習「如何將元件畫在頁面上」
當你定義完一個元件，要將元件畫在頁面上。你就可以用上一篇學習的 ReactDOM.render 這個 API，將 <TodoApp /> 帶進第一個參數中（見上方程式）。
或許你會想問我可以寫成 <TodoApp>hello</TodoApp> 嗎？
可以的！但是因為你還沒告訴 TodoApp 接收了 hello 這個值以後要做什麼處理，因此頁面上是不會顯示 hello 出來的。
所以囉，當你沒有要遞子元素進去，就跟 HTML 一樣寫成 <TodoApp /> 就好了。
如果你想了解要怎麼接收 hello 的值，未來的章節會提到；或者你可以先去下關鍵字：props.children。
程式碼，在這裡
上面的程式，我都把它放在這一支 jsfiddle 中了。
如果你有在自己的編輯器建立 index.html，那可以試著將第一個 TodoApp 元件也加上去！
重點整理
- 定義 React 元件的方法有很多種。
- 使用 ES6 的 classes 語法定義一個元件類別時，必須繼承 React.Component 和實作 render 方法。
- 使用 ReactDOM.render 的 API，來將定義好的元件畫在頁面上。
動手做，建立第二個元件
你可以試著在 jsfiddle 中，完成下面橘色區塊的元件（TodoHeader）：
並將它顯示在頁面上，就像這樣：
補充教材
如何使用其他宣告方法定義 React 元件？
React 提供了三種方式，讓你宣告元件：
ES6 的 classes 規範是什麼？
請參考這篇。
下集預告
下一集，「開始蓋房子，組合多個 React 元件」。
我們即將學習如何將多個元件組合起來了唷，盡情期待。
