# Day2學前端 Frontend with React - *Hello World React*

###### tags: `frontend`
Copyright 2021, [月下麒麟](https://hackmd.io/@YMont/note-catalog)

---

## 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! 我終於印出你了！](https://ithelp.ithome.com.tw/articles/10200501)

**觀念補充**
認識一下React的前世今身:
Reference:[IT邦幫忙【DAY 02】蝦咪？ES6、Babel、JSX要先來鑑定？](https://ithelp.ithome.com.tw/articles/10200353)
Reference:[React 術語表
](https://zh-hant.reactjs.org/docs/glossary.html)