日曆 DEMO

時間誠可貴，參加鐵人賽方得時間更加珍貴

我們可以直接把要呈現在 DOM 的內容直接寫在 ReactDOM.render() ，不過通常我們會在這個 function 外先做好所有 JavaScript 的邏輯，例如運算或從 API 取出資料等等，我們會先在外面處理完，再將要輸出的結果放到 ReactDOM.render() 裡。

一開始的寫法是將要 render 的內容放在 ReactDOM.render() 裡

<script type="text/babel">
    ReactDOM.render(
      <h1>Hello World!!!</h1>,
      document.getElementById('root')
    );
</script>

而將要渲染的內容移至 ReactDOM.render() 外，則程式碼會這樣寫

<script type="text/babel">

    const element = (           //將要渲染的內容放在變數裡
      <div>
         <h1>It is TIME!</h1>
         <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
    

    )

    function tick(){
      ReactDOM.render(
        element,               //呼叫存有渲染內容的變數
        document.getElementById('root')
      );
    }

    tick();

</script>

記得這邊的 HTML 語法事實上是 JavaScript 語法，當你有兩個以上的元素，就必須把他們包在 <div></div> 否則 Babel 看不懂這個語法，無法轉譯導致出現 Inline Bable Script 的錯誤訊息。
為了使用 Javascript 來取得屬性的值，JSX 使用 {...} 來取值，所以把 new Date().toLocaleTimeString() 放到 {} 中，就可以順利在頁面上顯示時間。

以上是不會自動更新的時間，再手動 reload 頁面後才會看到新的時間。那麼，我們如何在不手動操作的情況下，讓頁面上的時間就像是一般的電子鐘一秒一秒更新？

我們只需要將

tick();

轉換成

 setInterval(tick, 1000);
 

設定我們要在每 1000 毫秒重跑一次 tick() 這個 function，如此一來 React 就會再次更新 DOM。一千毫秒也就是我們熟知的一秒鐘，因此就可以做出像時鐘一樣，秒數每秒更新的樣式了！

在會 render 出時間之後，我突然靈機一動，因此就做出這個有時間的日曆了，透過 JavaScript 的 Date().getDate() 可以抓取當天的日期；Date().getFullYear() 可以抓取「西元年」；Date().getMonth() 則可以抓到月份，不過比較特別的是，月份是從 0 作為起始點，所以這個月會顯示 「11」，我們只要手動在後面 +1 就可以順利取得當下的月份。

const element = (
  <div>
     <h1>Cherish EVERY MOMENT!</h1>
     <div id="calendar">
       <h3 id="date">{new Date().getDate()}</h3>
       <h2 id="day">{new Date().getFullYear()} / {new Date().getMonth()+1}</h2>
       <h2 id="time_now">{new Date().toLocaleTimeString().split("下午")}</h2>
       </div>
  </div>
)