這一篇相對來說比較單純，大多是元件切版的部分，比較多會是範例程式碼。

首頁製作

首先是製作首頁的部分，首頁的大佈局分別是自我介紹及作品列表，作品列表的部分因為在作品列表頁也需要用到，所以我們後面會製作成共用元件。首先是自我介紹這個區塊，由上往下拆成三個小區塊，分別為履歷照片、職業及自我簡介，這邊因為不算困難，就不多做詳述，直接放上 JSX 程式碼，CSS 的部分只會針對較重要的部分放上範例，完整程式碼可以查看 github 連結。

import React from 'react';
import styles from './homePage.module.scss';
import WorkLists from '../../components/WorkLists';

const HomePage = () => {
  return <div className={ styles.wrap }>
    <section className={ styles.brief }>
            <img src={ require("../../assets/images/kururu.jpg") } />
            <h2>LeoLiu</h2>
            <ul>
                <li>front-end engineer</li>
            </ul>
            <p>I am a front-end developer.</p>
            <p>Contact me at test@gmail.com</p>
        </section>  

        <section className={ styles.work }>
            Content
        </section>
  </div>
}

export default HomePage;

作品列表

由於作品列表頁會做成共用元件，所以我們在 components 資料夾裡面新增一個 WorkLists 資料夾，並在裡面新增 index.jsx 和 workLists.module.scss 檔作為 WorkLists 元件的檔案。並在 HomePage 元件中引入 WorkLists 元件。接著我們需要再取得作品列表的資料，一般這種列表的資料會像伺服器請求獲得資料，但這個練習中我們沒有後台，因此我是使用了課程提供的資料做練習，只要放到 json 檔中再去 import，接著我們就能將 import 進來的資料當作參數傳入 WorkLists。

import React from 'react';
import styles from './homePage.module.scss';
import WorkLists from '../../components/WorkLists'; //引用 WorkLists 元件
import worksData from '../works.json'; // 引用 works.json 的資料

const HomePage = () => {
  return <div className={styles.wrap}>
    <section className={styles.brief}>
    </section>
    <section className={styles.works}>
      <div className={styles.title}>
        <h3>A section of work</h3>
        <p>You can find more in the work overview.</p>
      </div>
      <WorkLists workListData={ worksData.data } />
    </section>
  </div>
}

export default HomePage;

接下來我們製作 WorkLists 的部分，首先從 props 中取得 workListData，利用 map 遍歷陣列資料。由於每一個作品要能跳轉到他們的單獨頁面，所以我們用 Link 去包住每個作品，這樣點擊作品便能進行跳轉。另外作品使用到的技術內容 tags data 也是一組陣列資料，所以也要使用 map 來遍歷。基本結構完成之後，再插入 CSS 就可以完成列表部份了。

import React from 'react';
import styles from './workLists.module.scss';
import { Link } from 'react-router-dom';

const WorkLists = ({workListData}) => {
  console.log(workListData)
  return <div className={styles.workLists}>
    <ul>
        {
          workListData && workListData.map(item=>
            <li key={item.id}>
              <Link to={ `/works/${item.id}` }>
                <div className={ styles.cover }>
                  <img src={ item.cover } />
                </div>
                <div className={styles.workbrief}>
                  <h3>{item.title}</h3>
                  <p>{item.brief}</p>
                  <div className={styles.tag}>
                    { item.tags && item.tags.map(i=><span key={i}>{i}</span>) }
                  </div>
                </div>                       
              </Link>
            </li>
          )
        }
    </ul>
  </div>
}

export default WorkLists;

由於作品列表除了首頁以外，在作品頁也會用到，所以我們也要在作品頁 WorkPage 中放入 WorkLists

import React from 'react';
import styles from './works.module.scss';
import WorkLists from '../../components/WorkLists';
import datas from '../works.json';

const WorkPage = () => {
    return <div className={ styles.wrap }>
        <div className={ styles.title }>
            <h3>My Work</h3>
            <p>A collection of different things I have worked on.</p>
        </div>
        <WorkLists workListData={ datas.data } />
    </div>
}

export default WorkPage;

作品詳情頁

接下來是製作作品詳情頁，先前我們在 App.js 裡面設定 path 時，WorkDetailPage 是綁 id，這是因為作品詳情頁會跳轉到指定的頁面，所以沒有固定的 path。

//WorkDetailPage 的路由是綁 id
<section className={styles.content}>
    <Route path="/" exact component={HomePage} />
    <Route path="/works" exact component={WorkPage} />
    <Route path="/works/:id" exact component={WorkDetailPage} />
</section>

作品詳情頁的內容方面，因為我們沒有真正的資料庫，所以在實際跳轉到作品詳情頁時，都是使用同一筆資料，所以不管點哪個作品，內容看起來都會一樣，但是在實際的專案中，就可以透過資料庫傳送的數據，呈現不同內容了。詳情頁的內容相對單純，是參考課程提供的內容(課程中是參考其他開發者本身的簡歷網站製作的)，是比較單純的切版 + CSS，由於文字內容略多，範例程式碼就只貼上一部分，結構如下

import React from 'react';
import styles from './workDetail.module.scss'

const WorkDetailPage = () => {
  return <div className={styles.workDetail}>
    <div className={styles.box}>
      <div className={styles.title}>
        <h1>StaffTraveler</h1>
        <p>Sep 2017 to Aug 2018</p>
      </div>
      <section className={styles.content}>
        <p>
          Airline employees are able to travel with other airlines either for free or a small fee if seats are available. This is known as flying non-revenue. But since airline computer systems all operating individually, it takes a lot of effort to request and keep track of the current availability (loads) for the flights you are interested in.
          </p>
          ...
      </section>
    </div>
  </div>
}

export default WorkDetailPage;

到這邊就算是完成了這個簡易版網站了，原始碼可以參考我的 github。我們也可以試著將這個練習專案上傳到 github 上面，利用 github pages 來呈現，發佈到 github pages 上的流程可以參考 PJ 大大的 [Day 29 - 即時天氣] 寫網頁就是要炫耀啊，不然要幹麻？發布上 Github Pages 吧！，裡面有詳細的講解如何佈署。佈署完畢就可以檢視一下成果了，這邊附上我自己練習的成果。

小結

這三篇利用一個簡單的實作練習來體驗 react 的開發流程，並使用了一些常用的套件，下一篇開始會繼續整理 react 實作上的一些概念。