隨著jason大大的關卡我們來到了lesson 5 學習Reactjs元件的拼裝,這個章節介紹 allen大大 的主講

https://www.youtube.com/watch?v=pBtPwcBHhqE

步驟重點心得分享
這邊在學習過程中有時會看到另外一種使用common.js的寫法export default TodoApp輸出模組的方式,有時候看別人的範例的時候初學者會搞混的地方
這邊是最單純的環境,把TodoApp掛到 window.App.TodoApp這個物件之下

1.創建Component

    class TodoApp extends React.Component {
    ...
    }
    window.App.TodoApp = TodoApp;  

2.在主頁面中引入Component

        <script type="text/babel" src="./InputField.js"></script>
        <script type="text/babel" src="./TodoHeader.js"></script>
        <script type="text/babel" src="./TodoItem.js"></script>
        <script type="text/babel" src="./TodoList.js"></script>
        <script type="text/babel" src="./TodoApp.js"></script>

3.主頁面創造一個主容器

     <script type="text/babel">
        const { TodoApp } = window.App;
        ReactDOM.render(
          <TodoApp />, //這邊這個就是容器
          document.getElementById('app')
        );
      </script>

4.拼湊元件

重取window.App出各元件 這邊是es6的語法可以想成是這樣的語法

const {
  InputField,
  TodoHeader,
  TodoList
} = window.App; 

const InputField=window.App.InputField;
const TodoHeader=window.App.TodoHeader;
const TodoList=window.App.TodoList;

const {
  InputField,
  TodoHeader,
  TodoList
} = window.App;   

class TodoApp extends React.Component {
  render() {
    return (
      <div>
        <TodoHeader />
        <InputField />
        <TodoList />
      </div>
    );
  }
}

5.抽離 - 在TodoList中會有許多的TodoItem 這個 TodoItem 也把他抽離出來

    class TodoItem extends React.Component {
      render() {
        return (
          <div>
            <input type="checkbox" />
            <span>Item 1</span>
            <button>x</button>
          </div>
        );
      }
    }

    window.App.TodoItem = TodoItem;

6.TodoList 置換抽離TodoItem元件

        render() {
          return (
            <ul>
              <li>
                <TodoItem />
              </li>
              <li>
                <TodoItem />
              </li>
              <li>
                <TodoItem />
              </li>
            </ul>
          );
        }

以上是Allen大大 線上讀書會主講影片的重點整理 滿輕鬆愉快的一個單元,有任何問題都很歡迎加入線上reactjs讀書會再一起討論,希望藉由知識的opensoruce和日常攻略,可以加速更快的學習體驗,希望有幫助到大家

線上讀書會12月天天都精彩歐 https://goo.gl/CK1ibc
線上讀書會粉絲團 https://www.facebook.com/readbook999/
點選全系列連結,選喜歡的線上讀書會加入並安裝zoom後就等精彩的活動超連結嚕(活動前約30分鐘會公佈)