iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
自我挑戰組

30 天線上自學前端系列 第 30

[Day 30] [React] JavaScript expression 在 JSX 的小練習

  • 分享至 

  • xImage
  •  

OK~ 今天課程一開始就是單刀直入說要練習 JSX,而題目就擺在課程的開始處:


//Create a react app from scratch.
//It should display 2 paragraph HTML elements.
//The paragraphs should say:
//Created by YOURNAME.
//Copyright CURRENTYEAR.
//E.g.
//Created by Angela Yu.
//Copyright 2019.

完整答案長這樣:

https://ithelp.ithome.com.tw/upload/images/20220930/20151588SpVBMTM9dM.png

OK~ 我的 step 1 就是先把簡單的先做好 XD


//Create a react app from scratch.
//It should display 2 paragraph HTML elements.

ReactDOM.render(
  <div>
    <p>Created by </p>
    <p>Copyright </p>
  </div>,
  document.getElementById("root")
);

再來是 YOURNAME 以及 CURRENTYEAR。先來查一下 JS 的 year 有什麼 function 可以用:

https://ithelp.ithome.com.tw/upload/images/20220930/20151588aMOfwJoe57.png

OK~ CURRENTYEAR 擺上去之後沒什麼問題:

https://ithelp.ithome.com.tw/upload/images/20220930/20151588vEndL9Uncz.png

再來是 YOURNAME

https://ithelp.ithome.com.tw/upload/images/20220930/20151588sJFD2TBZkk.png

OK~ 下次是 JSX attribute 和 styling React element。


上一篇
[Day 29] [React] JavaScript expression 在 JSX & EX6 的樣板字串
下一篇
[Day 31] [React] JSX 屬性(attributes)& styling React Elements 簡單介紹
系列文
30 天線上自學前端72
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言