上半段來一點的碎碎心情抒發吧！鐵人賽逐漸到尾聲了，最近有朋友與我抒發他覺得自己學習太慢了，進步太慢讓他感到低潮，每個人在人生的階段何嘗不會有這樣的感覺，我也滿常會有這樣的沒自信，嚴重的話還會覺得自己一無是處。不過近期都會以這首美國的小詩《每個人都有自己的時區》，來為自己加油打氣：

紐約時間比加州時間早三個小時，
但加州時間並沒有變慢。
有人22歲就畢業了，
但等了五年才找到好的工作。
有人25歲就當上CEO，卻在50歲去世
也有人遲到50歲才當上CEO，然後活到90歲
有人依然單身，同時也有人已婚
歐巴馬55歲就退休，川普70歲才開始當總統

每個人都有自己的步調，如果有目標，慢慢走也會走到的 ; 若沒有目標，就好好享受沿途的風景吧！保持善良的心，體會這個世界帶給你的所有事物。

進入正題囉！今天要使用前端框架－ReactJS 快速建立一個專案，ReactJS是一個JavaScript library， 透過組件方式組合成前端UI介面，可重複使用的組件，很像樂高積木一樣，從微小組件組合成更大的組件。每個組件都有自己的業務邏輯，維護程式碼較容易。

（1）安裝Node.js 下載點
（2）建立React模版專案

npx create-react-app todolist
cd todolist
npm start

（3）資料夾結構

|-- public
			|-- index.html # default html
|-- src
    |-- assets  # 靜態檔案
        |-- css # css style
        |-- image # 圖片檔
		|-- components # 組件
    |-- pages # 頁面檔案
|-- App.js # 根組件
|-- index.js # 程式進入點
|-- package.json # 套件配置

（4）那就快速建立ToDoList 所需要的component

TitleBox.js 裡面的資料會先寫死，之後會動態帶入資料

import React from 'react';

const TitleBox = () => {
    return (
        <div className="title-box">
            <p className="date">2020-10-02</p>
            <p className="quote">溫暖是一種感恩，以熾熱的心去感化另一顆心。</p>
        </div>
    );
};

export default TitleBox;

TodoForm.js

import React from 'react';

const TodoForm = () => {
    return (
        <form class="header">
        <input type="text" id="input" placeholder="New Item..." />
        <button type="submit" class="addBtn">
            Add
        </button>
    </form>
    )
}

export default TodoForm;

TodoItems.js

import React from 'react';

const TodoItems = ()=> {
    return (
        <ul>
        <li>
            洗衣服 <span className="badge bg-red">生活</span>
            <span class="close">X</span>
        </li>
        <li>
            鐵人賽文章<span className="badge bg-blue">學習</span>
            <span class="close">X</span>
        </li>
    </ul>
    )
}

export default TodoItems;

在ToDo.js 把組件組起來，並給根組件使用

import React from 'react';
import TitleBox from '../components/TitleBox'
import TodoForm from '../components/TodoForm'
import TodoItems from '../components/TodoItems'

const ToDoList = () => {
    return (
        <div className="container">
            <TitleBox/>
            <div className="todo-box">
                <TodoForm/>
                <TodoItems/>
            </div>
        </div>
    );
};

export default ToDoList;

然後燈愣燈楞～npm start 進入http://localhost:3000/