iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
2
Modern Web

Zero to hero with React.js系列 第 7

【Day7 React】從拆解電子名片學習 React Components #Part1

把整張名片作為一個 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>
      )
   }
}

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

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

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

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

      )
   }
}

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


上一篇
【Day6 React】學習都是從觀摩他人的 code 開始
下一篇
【Day8 React】從拆解電子名片學習 React Components #Part2
系列文
Zero to hero with React.js30

尚未有邦友留言

立即登入留言