// 1. 新增一個繼承 React.Component 的子類別
class TodoApp extends React.Component {
  // 2. 必須實作 render 方法：
  //    透過該方法回傳的元素，讓 React 瞭解要如何繪製該元件在頁面上
  render() {
    return <div>TodoApp</div>;
  }
}

// 3. 將元件類別 (TodoApp) 定義在 window.App 下：
//    這可以讓其他 JS 檔使用該元件類別
window.App.TodoApp = TodoApp;

// 在 ES5 中，你使用 var 宣告變數，且可以賦予新值：
var text = 'hello';
text = 'world';

// 而 ES6 提供你兩個新功能：
// 1. 使用 let 宣告「區域變數」
// 2. 使用 const 宣告「常數」

// 範例如下：
let text = 'hello';
const TEXT = 'hello';

text = 'world';
TEXT = 'world'; // 發生錯誤：Uncaught SyntaxError: "TEXT" is read-only

// 上例中，因為 const 一旦宣告後，就無法重新賦值，所以發生錯誤。
// 因此 cosnt 通常用在宣告常數，那麼 let 和 var 的差別是什麼呢？

// 見下方範例：
var vText = 'vText';
let lText = 'lText';

if (true) {
  var vText = 'vText2';
  let lText = 'lText2';

  console.log(vText); // vText2
  console.log(lText); // lText2
}

console.log(vText); // vText2
console.log(lText); // lText

// It's magic!
// 上例讓我們得知：
// 在 if 區塊中使用 let 宣告的變數，只能在 if 區塊內使用；
// 而 var 卻無限制，這就是 let 和 var 的差別。

// 再看一個例子：
if (true) {
  let text = 'hello';
}
console.log(text); // 發生錯誤：Uncaught ReferenceError: text is not defined

class Person { // 1. 使用 class 建立類別
  constructor(name) { // 2. 使用 constructor 定義建構子
    this.name = name;
  }

  speak() {
    console.log('My name is ' + this.name);
  }
}

const jason = new Person('Jason Chung');
jason.speak(); // My name is Jason Chung

class Men extends Person { // 3. 使用 extends 繼承類別
  speak() {
    super.speak(); // 4. 使用 super 呼叫父類別方法
    console.log('I\'m a man');
  }
}

const andy = new Men('Andy Lin');
andy.speak(); // My name is Andy Lin
              // I'm a man

const state = {
  value1: 'value1',
  value2: 'value2'
};

// ES5 取得 value1 和 value2 的方法
const value1 = state.value1;
const value2 = state.value2;
console.log(value1 + value2);

// ES6 取得 value1 和 value2 的方法
const { value1, value2 } = state;
console.log(value1 + value2);

// 第一種. 使用 ES6 的類別 (classes)
class TodoApp extends React.Component {
  render() {
    return <div>TodoApp</div>;
  }
}

// 第二種. 使用 React.createClass API，通常用於 ES5 中
const TodoApp = React.createClass({
  render() {
    return <div>TodoApp</div>;
  }
});

// 第三種. 使用 function，通常用在元件只需要定義 render 方法時
const TodoApp = function() {
  return <div>TodoApp</div>;
};