# 框架課前認識React

## 為什麼要有框架?

框架可以將關注點分離，將程式元件化，相類似的程式就不須重複登打，
並且可以更簡單的處理js與html之間的關係。
同時框架也可以讓大家的開發思維更接近，讓分工協作更加順暢

---

### 如何建立React環境

第一步:
引入React、babel資源
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

第三步:
加入root元素 
<div id="root"></div>

<script type="text/babel">

第二步:
檢查資源是否正確載入
console.log(React,ReactDOM);

第四步
建立React元件，函式名稱首字大寫
function App() {
  return <h1>React 我來了</h1>
}

//步驟五，渲染元件至根元件上
const element = document.querySelector("#root");
const root = ReactDOM.createRoot(element); //ReactDOM
root.render(<App />);



</script>

注意:ReactDOM -DOM大寫、
render(<App />) -首字一定要大寫，並加上結尾"/"

---

### 使用資料驅動

將資料、畫面分離，使用同一個版型並利用資料改變內容，讓程式碼得以重複利用，常見的資料有圖片/網頁連結、文字內容等。

程式寫法大致與建立React環境相同，在App函式中加入data資料集，並透過{}將資料內容帶入畫面中

function App(){
  const data ={
    imageUrl:"https://images.unsplash.com/photo-1514819121162-8f4345eb8fb7?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    title:"cardTitle",
    content:"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe ipsum maiores, unde distinctio qui repellat commodi quasi excepturi dolor aliquam natus libero facilis enim, sapiente itaque et praesentium eos labore.",
    link:"https://hackmd.io/HwZS-9UPQZG7rfEhM_GGQA?view"
  }

  return <div className="card">
  <img src={data.imageUrl} className="card-img-top" alt="..." />
  <div className="card-body">
    <h5 className="card-title">{data.title}</h5>
    <p className="card-text">{data.content}</p>
    <a href={data.link} className="btn btn-primary">Go somewhere</a>
  </div>
</div>
}

---

### 型別注意事項
1. JSX 不會呈現物件型別以及特定的原始型別 物件、布林值、undefined、null
2. 陣列中的值會直接呈現在畫面上

3. 渲染元件的簡寫方法

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);
root.render(<App/>)

---

### JSX 做了什麼事？

function App() {
  //順序:標籤、屬性(用物件形式),內容
  return React.createElement("h1",null,"React 我來了",
  React.createElement("small",{
    className:"text-danger",
    title:"時間",
  },new Date().toLocaleDateString()),
"我好棒")
}


const el = document.getElementById('root');
const root = ReactDOM.createRoot(el);
root.render(<App/>)

筆記:
1. React.createElement後的順序:標籤、屬性、內容
2. 屬性要用物件形式
3. new Date().toLocaleDateString()會以當地習慣的方法標記日期

---

### JSX 與 HTML 的標籤屬性
更改成JSX寫法時有幾個標籤屬性的寫法需特別注意:

| html寫法 | JSX寫法 |
| -------- | --------- |
| class | className |
| 不一定要有結尾標籤,如`<img>` |一定要有結尾標籤 如`<img/>` |
| checked | defaultChecked |
| value、selected | defaultValue |
| `<label for="email">請輸入 Email</label>` |`<label htmlFor="email">請輸入 Email</label>` |
|`<textarea>默認文字放這裡</textarea>` | `<textarea name="" id="" cols="30" rows="5" defaultValue=" 默認文字放這裡" />` |

> 其他無法放進表格的寫法差異

selected:
html:

<div>
          <select name="" id="" >
            <option value="1">1</option>
            <option value="2"selected >2</option>
            <option value="3">3</option>
          </select>
        </div>

JSX:

<div>
          <select name="" id="" defaultValue="3">
            <option value="1">1</option>
            <option value="2" >2</option>
            <option value="3">3</option>
          </select>
        </div>

JSX放入htmlTemplate:

const htmlTemplate = {__html: '<div>這裡有一段文字</div>'}
<div dangerouslySetInnerHTML={htmlTemplate}></div>

JSX-onChange:

<div><input type="text" onChange={function (event) {
          console.log(event.target.value);
        }} /></div>

---
### 如何在html元件內加入style

擷取範例:
<div className='card-img-top'
        style={{height: "200px",
        backgroundImage: `url('https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2352&amp;q=80')`,
        backgroundSize: "cover",
        backgroundPosition: "center center"
      }} ></div>

筆記:
style加入{{}}(第一個是要加入表達式，第二個是加入物件)
style的值以字串方式寫入，如 height: "200px",
url通常帶有 "、'等許多不同字元，使用樣板字面值較不易出錯

---
JSX常見錯誤:
1. 定義元件首字一定是大寫(app=>App)
2. 多個元素外層需要使用標籤包覆(最外層補上div)，或使用 React.Fragment可以只打<></>
3. 標籤一定要有結尾"/"
4. 屬性轉換名稱運用要正確，htmlFor,className(可以對照前面的筆記[JSX 與 HTML 的標籤屬性](https://hackmd.io/6K-tqnsjSvOSOpVKQpHckQ?view=&stext=2434%3A16%3A0%3A1734926774%3A7bX_jC))
5. return 建議加入括號，並將內容緊接在return後，不可斷行(return會自帶;斷行會自動跳出)
6. style要兩個{{}}，用物件形式撰寫並使用字串