把整張名片作為一個 component

每一個 component 外層都會用一個 class 包起來。extends 指的是 React.component 物件底下的子類別（subclass）。在這個物件底下，它的大架構是 render(){} 裡面放要回傳在 DOM 上的內容。

class Card extends React.Component{
   render (){
      return(

      )
   }
}

我們將整個名片的 JSX 語法放進 return() 中

class Card extends React.Component{
   render (){
      return(
         <div className="card">
           <div className="photo">
             <img src="images/chris-merica.png" alt="Photo" />
           </div>
           <div className="bio">
             <h1 className="name">Ya-Yun.name</h1>
             <h2 className="location">Taichung, Taiwan</h2>
             <div className="occupation">
               <p>Protecting Freedom @ onemonthedu</p>
             </div>
           </div>
           <div className="updates">
              <ul>
                <li className="update">Updates</li>
                <li className="update">Updates</li>
              </ul>
           </div>
          </div>

      )
   }
}

在最後一行加入 class 的 名稱 <Card /> 就可以看到我們的名片出現在頁面上囉～
＊在 JSX 語法中，tag 第一個字都會是 大寫 喔！以便用來和 HTML tag 做區分。

ReactDOM.render(<Card />, document.getElementById("app"));

分屍（？）名片 Component

在 card 這個 component 底下，我們還可以切成三個 components，分別為 Photo, Bio, Updates，那麼我們就來拆解剛剛放在 Card 裡面的語法吧！

為 Photo 創建一個 component

class Photo extends React.Component{
   render (){
      return(
         <div className="photo">
           <img width="100%" src="https://avatars2.githubusercontent.com/u/22999436?s=400&u=70a8f1ade1c99998d172deff59ac8d20d33fc35d&v=4" alt="Photo" />
         </div>
      )
   }
}

為 Bio 創建一個 component

class Bio extends React.Component{
   render (){
      return(
        <div className="bio">
          <h1 className="name">Ya-Yun.name</h1>
          <h2 className="location">Taichung, Taiwan</h2>
          <div className="occupation">
            <p>Protecting Freedom @ onemonthedu</p>
          </div>
        </div>
      )
   }
}

為 Updates 創建一個 component

class Updates extends React.Component{
   render (){
      return(
        <div className="updates">
           <ul>
             <li className="update">Updates</li>
             <li className="update">Updates</li>
           </ul>
        </div>
      )
   }
}

好的上面那段就是講一樣的話，做一樣的事ＸＤＤ
如此一來，我們就簡單拆解完我們的名片組件～

但拆解完最重要的是要組合回去啊，就像玩具拿出來玩不放回原位會被媽媽罵一樣。。。所以我們必須把剛剛拆解的 component 放回原本的 Card component 裡，React 在 render 的時候才會記得有這幾個組件的存在。

放回原位非常簡單，只要加上我們所設定的 類別名稱 即可。

class Card extends React.Component{
   render (){
      return(
         <div className="card">
            <Photo />   
            <Bio />
            <Updates />
         </div>

      )
   }
}

Part1 的部分先介紹到這邊，明天介紹 modelur 的寫法囉～