Day 10 - React-JSX

今天一样是语法糖的练习，而且我想把日期塞进去 （感谢 sololearn 的 David Carroll 大大说明)

首先我们在 index.html 里再新增一个

<div id="root3"></div>

接着，我们到 index.js 中新增下列写法

const dateTime = (new Date()).toString(); // 这里把日期转为文字
const today = 'today'; //这里宣告了一个字串
const element2  = <p id={today}> {dateTime} </p>;
//我们用语法糖{}把变数today当成"today"来使用，用语法糖{dateTime}来呼叫变数里的值
//最後再把一切输出到element2中执行到div#root3里
ReactDOM.render(
  element2,
  document.getElementById('root3')
)

呈现的结果如下：

如果有网页设计师朋友应该很熟悉右边的工具，不过还是说明一下，通常按F12就会开启浏览器的侦测模式工具喔，是很方便的功能，特别是在模拟 RWD 网站的时候，非常方便哟，有兴趣的话可以 Google 相关资料。

接着今天我们要再做个小练习，一样是出自於sololearn，是个简单的计时器（虽然说简单，但我把 , 看成 . 所以也是错误了一下，要很细心哩）。

因为懒惰（对），所以我们再新增一个div#root4在同一页里，然後回到 index.js 中，写下

let counter = 0;
function counterFun() {
  counter++;
  const el = <p>{counter}</p>;
  ReactDOM.render(el, 
    document.getElementById('root4')
  );
}
setInterval(counterFun, 1000);

就可以得到下面自动计时的画面唷：