Try   HackMD

Day2學前端 Frontend with React - Hello World React

tags: frontend

Copyright 2021, 月下麒麟


Target

不外乎,還是要在React上做出Hello World

Get start

  • 進入react專案資料夾後,再進入src資料夾裡面

  • 其中App.js就是我們今天要改寫Hello World的檔案了

  • App.js檔案程式碼(可以將預設的註解)

import React from 'react'; class App extends React.Component{ render(){ return( <div style = {{ textAlign: 'center'}}> <div>Hello, World</div> <div>This is second day for learning react.</div> <div>The day today is {new Date().toLocaleDateString()}</div> </div> ); } } export default App;

自我理解程式碼
(跟實際的解釋或許有些出入,先直覺記錄下,之後學習再來比對更正,將來review會更幫助學習)
1, 導入React模組
3, 創建App這個類別
4, 載入或導向瀏覽器
5~10, 回傳HTML的內容

  • 刷新頁面

今天就學習到這邊囉~

Reference:IT邦幫忙【DAY 03】Hello, React! 我終於印出你了!

觀念補充
認識一下React的前世今身:
Reference:IT邦幫忙【DAY 02】蝦咪?ES6、Babel、JSX要先來鑑定?
Reference:React 術語表