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 術語表